HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第4章 运用盒子模型划分网页模块_第1页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第4章 运用盒子模型划分网页模块_第2页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第4章 运用盒子模型划分网页模块_第3页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第4章 运用盒子模型划分网页模块_第4页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第4章 运用盒子模型划分网页模块_第5页
已阅读5页，还剩225页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第4章运用盒子模型划分网页模块《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target熟悉盒子模型的概念，能够说出盒子模型的基本结构。了解元素类型，能够说出它们的特性。知识目标技能目标掌握<div>标签的作用，能够使用<div>标签实现网页布局。掌握边框属性、内边距属性、外边距属性、宽度属性和高度属性的用法，能够使用这些属性设置盒子样式。熟悉设置背景颜色、背景图像的各种方法，能够通过这些方法创建复杂的背景效果。学习目标/Target掌握<span>标签的作用，能够通过<span>标签定义网页中特殊显示的文本。掌握元素类型的转换方法，能够使用display属性对元素类型进行转换。掌握颜色透明度的用法，能够为元素的颜色改变透明度。掌握阴影的用法，能够为盒子添加阴影效果。熟悉渐变的原理，能够为页面元素设置渐变效果。技能目标素养目标通过制作环保宣传页面，培养保护环境的意识。通过制作背景拼图和创意相框，提高个人审美能力。章节概述/Summary盒子模型是页面布局的基础，在掌握盒子模型的各种特性和规律后，可以制作出更好的页面布局。本章将对盒子模型、<div>标签以及盒子模型的相关属性等进行详细讲解。目录/Contents010203案例4-1环保宣传页面案例4-2图书介绍专栏案例4-3背景拼图0405案例4-4电商网站导航栏案例4-5创意相框环保宣传页面案例4-1案例描述环保宣传是环境保护工作的重要组成部分，可以提升公众对环境保护重要性的认识，从而促进人与自然和谐共生。本案例将通过盒子模型及其边框属性制作一个环保宣传页面，其效果如图。知识引入熟悉盒子模型的概念，能够说出盒子模型的基本结构。学习目标1.认识盒子模型知识引入1.认识盒子模型在浏览页面时，会发现页面的内容都是按照区域划分的。在页面中，每一块区域分别承载不同的内容，使得网页的版式排列显得清晰且有条理。下图所示为中国教育考试网首页。知识引入1.认识盒子模型盒子模型就是把HTML页面中的元素看作盒子，也就是盛装内容的容器。每个盒子都由元素的内容（content）、宽度（width）、高度（height）、内边距（padding）、边框（border）和外边距（margin）组成。知识引入以手机盒子为例，分析盒子模型。1.认识盒子模型知识引入掌握<div>标签的作用，能够使用<div>标签实现网页布局。学习目标2.<div>标签知识引入1<div>是HTML中的一个标签。2可以将页面划分为不同的区域，以实现网页的规划和布局。3大多数HTML标记都可以嵌套在<div>标记中。4<div>中还可以嵌套多层<div>。5可以替代大多数的块级文本标记。2.<div>标签知识引入2.<div>标签1.<div>标签的强大之处还体现在与id、class等属性的结合上。通过为<div>标签添加id或class属性，我们可以方便地将其与CSS样式关联起来。2.凭借CSS强大的样式控制能力，<div>标签能够替代大多数的块级文本标签，为页面带来更丰富多样的视觉效果。知识引入2.<div>标签通过代码演示<div>标签的使用。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>div标签</title>

<style>知识引入2.<div>标签

.one{width:600px;

/*设置宽度*/

height:50px;

/*设置高度*/

background:aqua;

/*设置背景颜色*/

font-size:20px;

/*设置字体大小*/

font-weight:bold;

/*设置字体加粗*/

text-align:center;

/*设置文本水平居中对齐*/

}知识引入2.<div>标签.two{

width:600px;

/*设置宽度*/

height:100px;

/*设置高度*/

background:lime;

/*设置背景颜色*/

font-size:14px;

/*设置字体大小*/

text-indent:2em;

/*设置首行缩进2字符*/

}

</style></head>知识引入2.<div>标签<body>

<divclass="one">

成功不会喜欢等待

</div>

<divclass="two">

<p>它只垂青那些敢于拼搏的人</p>

</div></body></html>知识引入2.<div>标签运行代码，效果如图。知识引入2.<div>标签<div>标签主要用于与浮动属性float配合以实现网页的布局，也就是常说的DIV+CSS布局。对于浮动属性和布局了解即可，后面将会详细介绍。<div>可以替代块元素（如h、p等），但是它们在语义上有一定的区别。例如<div>和<h2>的不同在于<h2>具有特殊的含义且语义较重，代表着标题，而<div>是一个通用的块元素，主要用于布局。块元素将在后面讲解。知识引入掌握边框属性，能够使用这些属性设置盒子样式。学习目标3.边框属性知识引入在页面布局中，常常需要给元素设置边框以区分不同的区域。常见的边框属性以及对应的属性值如表。3.边框属性边框属性说明属性值border-style用于设置边框样式none：无边框样式，默认值；solid：边框样式为单实线；dashed：边框样式为虚线；dotted：边框样式为点线；double：边框样式为双实线border-width用于设置边框宽度像素值border-color用于设置边框颜色颜色名称、十六进制颜色值、RGB颜色值知识引入在页面布局中，常常需要给元素设置边框以区分不同的区域。常见的边框属性以及对应的属性值如表。3.边框属性边框属性说明属性值border用于设置综合边框由多个属性值组成border-image用于设置图片边框由多个属性值组成border-radius用于设置圆角边框像素值或百分比数值下面将对边框属性进行详细讲解。知识引入3.边框属性border-style属性用于设置元素所有边框的样式，或者单独地为各边框设置样式。知识引入3.边框属性01border-style：边框样式border-style:上边框样式[右边框样式下边框样式左边框样式];当省略border-style属性的某个属性值时，会遵循“值复制”原则设置边框样式。知识引入3.边框属性01border-style：边框样式设置2个属性值时，第1个属性值代表上边框和下边框的样式，第2个属性值代表左边框和右边框的样式。123设置3个属性值时，第1个属性值代表上边框的样式，第2个属性值代表左边框和右边框的样式，第3个属性值代表下边框的样式。设置1个属性值时，代表4条边框的样式。知识引入例如，某个<p>标签的上边框为虚线，其他3条边框为单实线，可以使用border-style属性分别设置各边框的样式，示例代码如下。3.边框属性上述代码按照值复制原则，可以改写为以下代码。01border-style：边框样式p{border-style:dashedsolidsolidsolid;}p{border-style:dashedsolidsolid;}知识引入除了上述设置元素边框样式的方法，还可以分别对元素的边框样式进行设置。border-top-style:上边框样式;border-right-style:右边框样式;border-bottom-style:下边框样式;border-left-style:左边框样式;3.边框属性01border-style：边框样式知识引入下面通过代码演示其用法。新建HTML页面，并在页面中添加标题和段落文本，然后通过边框样式属性控制标题和段落文本的边框样式。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>边框样式</title><style>3.边框属性01border-style：边框样式知识引入h2{border-style:double;/*4条边框样式相同——双实线*/}.one{border-top-style:dotted;border-bottom-style:dotted;border-left-style:solid;border-right-style:solid;/*上面4行代码等价于：border-style:dottedsolid;*/}3.边框属性01border-style：边框样式设置上边框样式为点线设置下边框样式为点线设置左边框样式为单实线设置右边框样式为单实线知识引入.two{border-style:soliddotteddashed;/*上边框样式为单实线、左右边框样式为点线、下边框样式为虚线*/}</style></head>3.边框属性01border-style：边框样式知识引入<body><h2>边框样式——双实线</h2><pclass="one">边框样式——上下边框样式为点线、左右边框样式为单实线</p><pclass="two">边框样式——上边框样式为单实线、左右边框样式为点线、下边框样式为虚线</p></body></html>3.边框属性01border-style：边框样式知识引入border-width属性用于设置边框的宽度，其基本语法格式如下。3.边框属性02border-width：边框宽度border-width{上边框宽度[右边框宽度下边框宽度左边框宽度];}与边框样式一样，边框宽度也可以针对4条边框分别进行设置。border-top-width:上边框宽度;border-right-width:右边框宽度;border-bottom-width:下边框宽度;border-left-width:左边框宽度;知识引入3.边框属性02border-width：边框宽度下面通过代码演示其用法。新建HTML页面，并在页面中添加段落文本，然后通过边框宽度属性对段落文本进行控制。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>边框宽度</title>知识引入3.边框属性02border-width：边框宽度<style>p{border-width:1px;

/*综合设置4条边框的宽度*/

border-top-width:3px;

/*设置上边框宽度*//*上面2行代码等价于border-width:3px1px1px;*/}</style></head><body><p>边框宽度——上边框宽度为3px、下/左/右边框宽度为1px，边框样式——单实线。</p></body></html>知识引入3.边框属性02border-width：边框宽度运行代码，效果如图。知识引入3.边框属性02border-width：边框宽度在上面的示例中，为<p>标签设置边框样式，代码如下。border-style:solid;知识引入3.边框属性03border-color：边框颜色border-color属性用于设置边框的颜色，其基本语法格式如下。border-color{上边框颜色[右边框颜色下边框颜色左边框颜色];}border-color属性值可为颜色名称、十六进制颜色值或RGB颜色值知识引入3.边框属性03border-color：边框颜色例如设置段落文本的边框样式为单实线，上下边框的颜色为灰色，左右边框的颜色为红色，代码如下。p{border-style:solid;border-color:#CCC#F00;}知识引入3.边框属性03border-color：边框颜色与边框样式和边框宽度相同，边框颜色也可以针对单条边框进行设置。border-top-color:上边框颜色;border-right-color:右边框颜色;border-bottom-color:下边框颜色;border-left-color:左边框颜色;知识引入3.边框属性CSS2.1将元素背景延伸到了边框，同时增加了transparent（透明色）。如果需要设置边框不可见，可使用“border-color:transparent;”，这时边框的颜色为透明色，如同没有边框，在需要边框可见时再设置相应的颜色，这样能够保证元素的区域不发生变化。这种方式与取消边框样式不同，取消边框样式时，边框的宽度为0，元素的区域会发生变化。巧用边框透明色知识引入3.边框属性04border：综合边框使用border-style、border-width、border-color虽然可以实现丰富的边框效果，但是编写的代码较烦琐且不便于阅读，为此CSS提供了综合边框属性border。border属性的基本语法格式如下。border:宽度样式颜色;宽度、样式、颜色的顺序不分先后，可以指定需要设置的属性值知识引入3.边框属性04border：综合边框当每一条边框的样式都不相同，或者只需单独定义某一条边框的样式时，可以使用border-top、border-right、border-bottom和border-left进行设置。例如单独定义段落文本的上边框样式，代码如下。p{border-top:2pxsolid#CCC;}/*定义上边框的样式，属性值的顺序不唯一*/知识引入3.边框属性04border：综合边框当4条边框的样式都相同时，可以使用border属性进行综合设置。例如，将2级标题的边框设置为3px、单实线、红色，代码如下。h2{border:3pxsolidred;}知识引入3.边框属性下面对标题、段落和图像分别应用边框属性设置边框。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>边框属性</title><style>04border：综合边框知识引入3.边框属性h2{border-bottom:5pxdoubleblue;/*使用border-bottom复合属性设置下边框*/text-align:center;}04border：综合边框知识引入3.边框属性.text{/*使用单条边框的复合属性设置各边框*/border-top:3pxdashed#F00;border-right:10pxdouble#900;border-bottom:3pxdotted#CCC;border-left:10pxsolidgreen;}04border：综合边框知识引入3.边框属性.libai{/*使用border复合属性综合设置各边框*/border:15pxsolid#CCC;}</style></head>04border：综合边框知识引入3.边框属性<body><h2>李白</h2><pclass="text">李白，字太白，号青莲居士，唐朝伟大的浪漫主义诗人。著有《李太白集》，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》等。</p><imgclass="libai"src="images/libai.png"alt="李白"></body></html>04border：综合边框知识引入3.边框属性运行代码，效果如图。04border：综合边框知识引入3.边框属性border-image属性是一个复合属性，包含border-image-source、border-image-slice、border-image-width、border-image-outset和border-image-repeat属性，border-image属性的基本语法格式如下。05border-image：图片边框border-image:border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatborder-image-slice、border-image-width和border-image-outset属性值用“/”分隔，其他属性值用空格分隔知识引入3.边框属性border-image包含的属性以及对应的属性值如表。05border-image：图片边框属性说明属性值border-image-source用于指定边框图片的路径URLborder-image-slice用于指定边框图片的向内偏移量（可以简单理解为图像的裁切位置）百分比数值知识引入3.边框属性05border-image：图片边框属性说明属性值border-image-width用于指定边框图片的宽度像素值border-image-outset用于指定边框图片向盒子外部延伸的距离（可以简单理解为边框图片与边框的距离）阿拉伯数字border-image-repeat用于指定边框图片的填充方式repeat（平铺）、stretch（拉伸）知识引入3.边框属性下面通过代码演示图片边框的使用。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>图片边框</title>05border-image：图片边框知识引入3.边框属性<style>p{width:362px;

height:362px;border-style:solid;border-image-source:url(images/shuzi.png);/*设置边框图片的路径*/border-image-slice:33%;/*设置边框图片的向内偏移量*/

border-image-width:40px;/*设置边框图片的宽度*/border-image-outset:0;/*设置边框图片向盒子外部延伸的距离*/border-image-repeat:repeat;/*设置边框图片的填充方式*/}</style>05border-image：图片边框知识引入3.边框属性</head><body><p></p></body></html>05border-image：图片边框知识引入3.边框属性05border-image：图片边框运行代码，效果如图知识引入3.边框属性例如，将图片边框的填充方式改为拉伸，具体代码如下。border-image-repeat:stretch；05border-image：图片边框知识引入3.边框属性在网页设计中，为了美化页面效果，经常会将边框设置为圆角样式。运用CSS3中的border-radius属性可以将矩形边框的四角圆角化。border-radius属性的基本语法格式如下。06border-radius：圆角边框border-radius:水平半径/垂直半径;水平半径和垂直半径参数之间用“/”隔开，参数的单位可以为px或%知识引入3.边框属性下面通过代码演示border-radius属性的使用。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>border-radius属性</title>06border-radius：圆角边框知识引入3.边框属性<style>img{width:300px;

/*设置图片的宽度*/

height:300px;

/*设置图片的高度*/border:5pxsolid#5ad841;border-radius:100px/50px;}</style>06border-radius：圆角边框知识引入3.边框属性</head><body><imgsrc="images/panda.png"alt="圆角边框"></body></html>06border-radius：圆角边框知识引入3.边框属性运行代码，效果如图。06border-radius：圆角边框知识引入3.边框属性在使用border-radius属性时，如果省略垂直半径参数值，则其默认等于水平半径参数值。例如，将上述代码进行替换。06border-radius：圆角边框border-radius:100px/50px；border-radius:50px;知识引入3.边框属性设置1个参数值时，代表4个圆角的半径。06border-radius：圆角边框

border-radius:50px20px/30px60px;设置2个参数值时，第1个参数值代表左上和右下圆角的半径，第2个参数代表右上和左下圆角的半径，如下所示。知识引入3.边框属性设置3个参数值时，第一个参数值代表左上圆角的半径，第2个参数值代表右上和左下圆角的半径，第3个参数值代表右下圆角的半径，如下所示。06border-radius：圆角边框

border-radius:50px20px10px/30px40px60px;border-radius:100px/50px；知识引入3.边框属性保存并运行，效果如图。06border-radius：圆角边框知识引入3.边框属性border-radius属性同样遵循值复制原则，可为其水平半径和垂直半径设置1～4个参数值，用来表示4个圆角的半径，具体解释如下。设置1个参数值时，代表4个圆角的半径。设置2个参数值时，第1个参数值代表左上和右下圆角的半径，第2个参数代表右上和左下圆角的半径，如下所示。06border-radius：圆角边框

border-radius:50px20px/30px60px;知识引入3.边框属性border-radius属性同样遵循值复制原则，可为其水平半径和垂直半径设置1～4个参数值，用来表示4个圆角的半径，具体解释如下。设置1个参数值时，代表4个圆角的半径。设置2个参数值时，第1个参数值代表左上和右下圆角的半径，第2个参数代表右上和左下圆角的半径，如下所示。06border-radius：圆角边框border-radius:100px/50px；

border-radius:50px20px/30px60px;知识引入3.边框属性保存并运行，效果如图。06border-radius：圆角边框知识引入3.边框属性设置3个参数值时，第一个参数值代表左上圆角的半径，第2个参数值代表右上和左下圆角的半径，第3个参数值代表右下圆角的半径，如下所示。06border-radius：圆角边框border-radius:50px20px10px/30px40px60px;border-radius:100px/50px；知识引入3.边框属性保存并运行，效果如图。06border-radius：圆角边框知识引入3.边框属性设置4个参数值时，第1个参数值代表左上圆角的半径，第2个参数值代表右上圆角的半径，第3个参数值代表右下圆角的半径，第4个参数值代表左下圆角的半径，如下代码所示。06border-radius：圆角边框border-radius:50px30px20px10px/50px30px20px10px;border-radius:100px/50px；知识引入3.边框属性保存并运行，效果如图。06border-radius：圆角边框知识引入3.边框属性设置4个参数值。06border-radius：圆角边框border-radius:50px30px20px10px;border-radius:50px30px20px10px/50px30px20px10px;简写为知识引入3.边框属性例如，设置边框为圆形，可以将案例中的代码替换。06border-radius：圆角边框border-radius:50%;border-radius:150px;或知识引入3.边框属性保存并运行，效果如图。06border-radius：圆角边框项目实现掌握盒子模型及其边框属性，能够通过盒子模型及其边框属性制作一个环保宣传页面。学习目标项目实现图书介绍专栏案例4-2案例描述在图书网站中，通常都有图书介绍专栏，用来进行图书展示。本案例将通过内边距和外边距属性等制作图书介绍专栏，其效果如图。知识引入掌握内边距属性的用法，能够使用该属性设置盒子样式。学习目标1.内边距属性知识引入内边距也被称为内填充，是指内容与边框之间的距离。在CSS中，padding属性用于设置内边距，与边框属性border一样，padding属性也是复合属性。为元素添加内边距的语法格式如下。1.内边距属性padding:上内边距[右内边距下内边距左内边距];知识引入此外，也可以精准设置元素某一方向的内边距，相应语法格式如下。1.内边距属性padding-top:上内边距;padding-right:右内边距;padding-bottom:下内边距;padding-left:左内边距;知识引入下面通过代码演示padding属性的用法。新建HTML页面，在页面中添加图像和段落，然后使用padding属性控制它们的显示位置。1.内边距属性<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>padding属性</title>知识引入1.内边距属性<style>.border{border:5pxsolid#ccc;}img{padding:80px;

padding-bottom:0;

}p{padding:5%;}

</style>为图像和段落设置边框图像4个方向的内边距相同单独设置下的边距知识引入1.内边距属性<style>.border{border:5pxsolid#ccc;}img{padding:80px;

padding-bottom:0;

}p{padding:5%;}

</style>等价于padding:80px80px0;段落内边距为父元素宽度的5%知识引入1.内边距属性</head><body><imgclass="border"src="images/lajifenlei.png"alt="内边距"><pclass="border">段落内边距为父元素宽度的5%。</p></body></html>

知识引入1.内边距属性保存并运行，效果如图。知识引入1.内边距属性注意：padding属性的百分比数值是相对于父元素宽度的百分比，内边距会随父元素宽度的变化而变化，与高度无关。知识引入掌握外边距属性的用法，能够使用该属性设置盒子样式。学习目标2.外边距属性知识引入网页是由多个盒子排列而成的，要想拉大盒子与盒子之间的距离、合理地布局网页，就需要为盒子设置外边距。外边距指的是相邻标签（或元素）之间的距离。CSS中的margin属性用于设置外边距，它的用法与padding属性的用法类似，设置外边距的语法格式如下。padding:上内边距[右内边距下内边距左内边距];2.外边距属性margin属性的取值遵循值复制原则知识引入当对块元素应用宽度属性width并将左右外边距都设置为auto时，可使块元素水平居中，在实际工作中常用这种方式进行网页布局，示例代码如下。.header{margin:0auto;}2.外边距属性此外，也可以精准设置元素某一方向的外边距，语法格式如下。margin-top:上外边距;margin-right:右外边距;margin-bottom:下外边距;margin-left:左外边距;知识引入下面通过代码演示外边距属性的用法。新建HTML页面，在页面中添加图像和段落，然后使用外边距属性对图像和段落进行排版，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>margin属性</title>2.外边距属性知识引入<style>img{border:5pxsolidpurple;float:left;margin-right:50px;margin-left:30px;}p{text-indent:2em;}</style>2.外边距属性设置图像左浮动设置图像的右外边距设置图像的左外边距段落首行缩进2字符知识引入<style>img{border:5pxsolidpurple;

float:left;margin-right:50px;margin-left:30px;}p{text-indent:2em;}</style>2.外边距属性等价于margin:050px030px;知识引入</head><body><imgsrc="images/olympic.jpg"alt="奥林匹克"><p>奥林匹克精神是一种生活态度。奥林匹克精神强调人通过自我锻炼、自我参与而拥有健康的体魄、乐观的精神和对美好生活的热爱与追求。这种乐观积极的生活态度是我们拥有完全自信和战胜一切挑战的强大动力。</p></body></html>2.外边距属性知识引入保存并运行，效果如图。2.外边距属性知识引入为了更好地实现页面布局，在实际开发中会添加如下代码清除标签默认的内边距和外边距样式。2.外边距属性*{padding:0;margin:0;}知识引入保存并运行，效果如图。2.外边距属性知识引入注意：当没有明确定义元素的宽度和高度时，内边距相比外边距具有更高的容错率。这意味着在没有显式设置元素宽度和高度的情况下，内边距通常会更可靠地保持元素的布局完整性，而外边距可能会对元素的周围布局产生更大的影响。2.外边距属性知识引入掌握宽度属性和高度属性的用法，能够使用这些属性设置盒子样式。学习目标3.宽度属性和高度属性知识引入网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为使用不同单位的数值或相对于父元素的百分比数值，实际工作中最常用的是像素值。3.宽度属性和高度属性知识引入下面通过代码演示width属性和height属性是如何控制网页中的段落文本的，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>width属性和height属性</title>3.宽度属性和高度属性知识引入<style>.box{width:450px;

height:120px;border:8pxsolid#00f;}</style></head>3.宽度属性和高度属性知识引入<body><pclass="box">勇敢地追求你的梦想，无论结果如何，这一路上的努力和勇气，都将成为你一生的宝贵财富。</p></body></html>3.宽度属性和高度属性知识引入3.宽度属性和高度属性保存并运行，效果如图。知识引入3.宽度属性和高度属性大多数浏览器（如火狐、Chrome）都遵循CSS规范，符合CSS规范的盒子的总宽度和总高度的计算方式如下。盒子的总高度=内容高度+上下内边距之和+上下边框宽度之和+上下外边距之和。12盒子的总宽度=内容宽度+左右内边距之和+左右边框宽度之和+左右外边距之和。知识引入注意宽度属性width和高度属性height仅适用于块元素，对行内元素（<img>标签和<input>标签除外）无效。3.宽度属性和高度属性项目实现掌握内边距和外边距属性，能够通过内边距和外边距属性等制作图书介绍专栏。学习目标项目实现背景拼图案例4-3案例描述拼图游戏是广受欢迎的一种智力游戏，它变化多端、难度不一，让人百玩不厌。除了实物的拼图卡片外，在网页中也可以制作拼图游戏。本案例将运用背景图像的相关属性，制作一个简单的背景拼图，具体效果如图。知识引入熟悉设置背景颜色的方法，能够通过该方法创建复杂的背景效果。学习目标1.设置背景颜色知识引入在CSS中，网页元素的背景颜色使用background-color属性来设置，background-color属性的取值可使用颜色名称、十六进制颜色值或RGB颜色值等。background-color的默认值为transparent，即透明色，此时子元素会显示其父元素的背景颜色。1.设置背景颜色知识引入下面通过代码演示background-color属性的用法。新建HTML页面，在页面中添加标题和段落文本，然后通过background-color属性控制标题标签<h2>和主体标签<body>的背景颜色，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>设置背景颜色</title>1.设置背景颜色知识引入<style>body{background-color:#CCC;}

h2{font-family:"微软雅黑";color:#FFF;background-color:#36C;

}</style></head>1.设置背景颜色设置网页的背景颜色设置标题的背景颜色知识引入<body><h2>热爱生活，珍惜眼前的幸福</h2><p>热爱生活是一种美好的心态，它让我们拥抱每一个日子，享受生命中的点滴。让我们学会珍惜眼前的幸福，感恩身边的人和事，对生活充满热情和活力。在生活中，无论遇到困难还是挑战，我们都要以乐观的态度去面对，从中获得成长。我们还要学会发现生活中的美好，即使是平凡的事物也会给予我们满满的幸福感。</p></body></html>1.设置背景颜色知识引入运行代码，效果如图。1.设置背景颜色知识引入熟悉设置背景颜色的方法，能够通过该方法创建复杂的背景效果。学习目标2.设置背景图像知识引入不仅可以将元素的背景设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。2.设置背景图像知识引入下面通过代码演示background-image属性的用法，如例。2.设置背景图像<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>设置背景图像</title>知识引入2.设置背景图像<style>body{background-color:#CCC;

background-image:url(images/bg.png);}h2{font-family:"微软雅黑";color:#FFF;background-color:#36C;

}</style></head>设置网页的背景颜色设置网页的背景图像设置标题的背景颜色知识引入2.设置背景图像<body><h2>热爱生活，珍惜眼前的幸福</h2><p>热爱生活是一种美好的心态，它让我们拥抱每一个日子，享受生命中的点滴。让我们学会珍惜眼前的幸福，感恩身边的人和事，对生活充满热情和活力。在生活中，无论遇到困难还是挑战，我们都要以乐观的态度去面对，从中获得成长。我们还要学会发现生活中的美好，即使是平凡的事物也会给予我们满满的幸福感。</p></body></html>

知识引入运行代码，效果如图。2.设置背景图像知识引入熟悉设置背景图像平铺，能够通过该方法创建复杂的背景效果。学习目标3.设置背景图像平铺知识引入默认情况下，背景图像会自动沿水平和垂直两个方向平铺。如果不希望背景图像平铺，或者希望只沿一个方向平铺，可以通过background-repeat属性来控制，该属性的取值及相关介绍如下。3.设置背景图像平铺no-repeat：设置背景图像不平铺（默认图像位于元素的左上角，只显示一次）。12repeat：默认值，设置背景图像沿水平和垂直两个方向平铺。3repeat-x：设置背景图像只沿水平方向平铺。4repeat-y：设置背景图像只沿垂直方向平铺。知识引入例如，我们希望例example11.html中的图像只沿水平方向平铺，可以将body元素的CSS代码更改为如下代码。body{

background-color:#CCC;

background-image:url(images/bg.png);background-repeat:repeat-x;}3.设置背景图像平铺设置标题的背景颜色设置网页的背景图像设置背景图像的平铺知识引入熟悉设置背景图像平铺的位置，能够通过该方法创建复杂的背景效果。学习目标4.设置背景图像的位置知识引入如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将显示在元素的左上角。如果想要自由设置背景图像的位置，可以使用CSS中的background-position属性。background-position属性可以精确设置背景图像的位置，其语法格式如下。4.设置背景图像的位置background-position:属性值1属性值2;知识引入background-position的属性有多种取值，具体如下。4.设置背景图像的位置使用不同单位的数值最常用的是像素值，即直接设置背景图像左上角在元素中的水平和垂直坐标。例如“background-position:20px20px;”。如果只设置1个数值，那么该数值表示水平坐标，垂直坐标默认居中设置。01知识引入background-position的属性有多种取值，具体如下。4.设置背景图像的位置方位名词用于指定背景图像在元素中的对齐方式。02垂直方向：top、center、bottom。12水平方向：left、center、right知识引入background-position的属性有多种取值，具体如下。4.设置背景图像的位置方位名词两个方位名词的顺序任意，若只有一个属性值，则另一个属性值默认为center。例如。02background-positioncenter相当于background-positioncentercenter（居中显示）background-positiontop相当于background-positiontopcenter或background-positioncentertop（水平居中、垂直居上）知识引入background-position的属性有多种取值，具体如下。4.设置背景图像的位置百分比数值背景图像和元素按指定百分比点对齐。0350%50%：表示背景图像的50%50%中心点与元素的50%50%中心点对齐。120%0%：表示背景图像的左上角与元素的左上角对齐320%30%：表示背景图像的20%30%点与元素的20%30%点对齐。4100%100%：表示背景图像的右下角与元素的右下角对齐。知识引入下面通过代码演示background-position属性的用法，为页面设置一个背景图像，背景图像的平铺方式为不平铺，如例。4.设置背景图像的位置<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>设置背景图像的位置</title>知识引入4.设置背景图像的位置<style>body{background-image:url(images/xiangrikui.png);

background-repeat:no-repeat;

background-position:topleft;

}</style></head>设置网页的背景图像设置背景图像不平铺设置背景图像的位置知识引入4.设置背景图像的位置<body><h2>热爱生活，充实自己</h2><p>热爱生活的过程也是充实自己的过程。当你热爱生活时，你会不断地去探索、学习和成长，这样的过程本身就是在充实自己。你会发现生活中的各种美好，从而拓展自己的视野，提升自己的能力，让自己的生活变得更加丰富多彩。</p></body></html>知识引入运行代码，效果如图。4.设置背景图像的位置知识引入例如，要将例example12.html中的背景图像定义在右下角，可以更改<body>标签的CSS代码为如下代码。4.设置背景图像的位置body{background-image:url(images/xiangrikui.png);background-repeat:no-repeat;background-position:rightbottom;}设置网页的背景图像设置背景图像不平铺设置背景图像位于右下角知识引入保存并运行代码，效果如图。4.设置背景图像的位置知识引入接下来，将background-position属性值定义为像素值，以更改图“背景图像位于右下角”中背景图像的位置，<body>标签的CSS代码更改为如下代码。4.设置背景图像的位置body{background-image:url(images/xiangrikui.png);background-repeat:no-repeat;background-position:50px80px;}设置网页的背景图像设置背景图像不平铺使用像素值设置背景图像的位置知识引入保存并运行代码，效果如图。4.设置背景图像的位置知识引入熟悉设置背景颜色的方法，能够通过该方法创建复杂的背景效果。学习目标5.设置背景图像位置固定知识引入当页面中的内容较多时，背景图像会随着页面的滚动而滚动，如果希望背景图像固定在浏览器窗口的某个位置，可以使用background-attachment属性，该属性的取值及相关介绍如下。fixed：图像固定在屏幕上，不随页面滚动12scroll：默认值，图像随页面一起滚动5.设置背景图像位置固定知识引入例如下面的代码，设置背景图像在距离浏览器窗口左边缘50px、上边缘80px的位置固定。body{background-image:url(images/xiangrikui.png);background-repeat:no-repeat;background-position:50px80px;background-attachment:fixed;}设置网页的背景图像设置背景图像不平铺使用像素值设置背景图像的位置5.设置背景图像位置固定设置背景图像位置固定知识引入熟悉综合设置元素的背景样式的方法，能够通过该方法创建复杂的背景效果。学习目标6.综合设置元素的背景样式知识引入6.综合设置元素的背景样式在CSS中，可以将与背景相关的样式都综合定义在复合属性background中。使用background属性综合设置背景样式的语法格式如下。background:背景颜色url("图像")平铺方式位置是否位置固定;知识引入6.综合设置元素的背景样式在CSS中，可以将与背景相关的样式都综合定义在复合属性background中。使用background属性综合设置背景样式的语法格式如下。background:url(he.png)no-repeat50px80pxfixed;background-image:url(images/he.png);background-repeat:no-repeat;background-position:50px80px;background-attachment:fixed;设置网页的背景图像设置背景图像不平铺使用像素值设置背景图像的位置设置背景图像的位置固定知识引入熟悉多背景图像的方法，能够通过该方法创建复杂的背景效果。学习目标7.多背景图像知识引入在CSS中，可以将与背景相关的样式都综合定义在复合属性background中。使用background属性综合设置背景样式的语法格式如下。background-image:url(pic01.png),url(pic02.png),url(pic03.png);7.多背景图像上述示例代码设置了3个背景图像，其中pic01.jpg位于图层的最上层，pic02.png位于图层的中间层，pic03.png位于图层的最下层background-repeat、background-position等属性也支持对多背景图像进行设置，用逗号分隔每个值即可。项目实现掌握背景颜色、背景图像的各种方法，能够运用背景图像的相关属性，制作一个简单的背景拼图。学习目标项目实现电商网站导航栏案例4-4案例描述网络购物已成为当今社会主流的购物模式，电商网站如雨后春笋般涌现。在这一背景下，电商网站的导航栏作为其核心组件，直接关乎网站的易用性和用户的整体体验。一个精心设计的图标导航栏，凭借其吸引力十足的视觉元素，不仅能够显著提升用户的浏览愉悦度，还能赋予网站更加鲜活、富有趣味性的样式。本案例通过巧妙运用块元素与行内元素的转换技巧，打造一款图标导航栏，效果如图。知识引入了解元素类型，能够说出它们的特性。学习目标1.元素类型知识引入HTML提供了丰富的标签，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML元素被定义成了不同的类型，一般分为块元素和行内元素，也称为块标签和行内标签。1.元素类型行内元素块元素知识引入1.元素类型块元素块元素在页面中以区域的形式出现，每个块元素通常都会独自占据一行或多行，可以对其设置宽度、高度、水平对齐方式等属性，常用于网页布局和网页结构的搭建。01常见的块元素有h1～h6、p、div、ul、ol、li等，其中div元素是非常典型的块元素。知识引入1.元素类型行内元素行内元素的特点是不会占据一行，但是也不强迫其他元素在新的一行显示。一个行内元素通常会和其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的文本内容大小和图像大小来支撑结构，一般不可以设置宽度、高度、水平对齐方式等属性，常用于控制页面中文本的样式。02常见的行内元素有strong、b、em、i、del、s、ins、u、a、span等，其中span元素是非常典型的行内元素。需要说明的是，行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素中。知识引入1.元素类型下面通过代码来进一步介绍块元素和行内元素，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>块元素和行内元素</title>知识引入1.元素类型<style>h2{background:#DBBBC9;

width:350px;height:50px;text-align:center;}p{background:#069;}

知识引入1.元素类型strong{background:#6FF;width:350px;height:50px;text-align:center;}em{background:#580;}del{background:#CCC;}</style></head>知识引入1.元素类型<body><h2>h2元素定义的文本</h2><p>p元素定义的文本</p><p><strong>strong元素定义的文本</strong><em>em元素定义的文本</em><del>del元素定义的文本</del></p></body></html>知识引入1.元素类型运行代码，效果如图。知识引入注意在行内元素中有两个特殊的元素——img和input，可以对它们设置宽度、高度和水平对齐方式，有些资料称它们为行内块元素。1.元素类型知识引入掌握<span>标签的作用，能够通过<span>标签定义网页中特殊显示的文本。学习目标2.<span>标签知识引入与<div>标签一样，<span>标签也作为容器被广泛应用在HTML中。与<div>标签不同的是，<span>标签是行内标签，只能包含文本和各种行内标签，例如<strong>标签、<em>标签等。<span>标签中还可以嵌套多层<span>标签。2.<span>标签知识引入下面通过代码演示<span>标签的使用，如例。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>span标签</title>2.<span>标签知识引入<style>#header{

font-family:"宋体";font-size:16px;color:#099;}2.<span>标签设置<div>标签中文本的通用样式知识引入#header.one{color:#64f;font-size:20px;padding-right:20px;}#header.two{color:#F43;font-size:18px;}</style></head>2.<span>标签控制第1个<span>标签中特殊显示的文本知识引入<body><divid="header"><spanclass="one">对酒当歌，人生几何！</span>譬如朝露，去日苦多。<spanclass="two">慨当以慷，忧思难忘。</span>何以解忧？唯有杜康。</div></body></html>2.<span>标签知识引入运行示例代码，效果如图。2.<span>标签知识引入掌握元素类型的转换方法，能够使用display属性对元素类型进行转换。学习目标3.元素类型的转换知识引入网页是由多个块元素和行内元素构成的盒子排列而成的。为了适应各种开发需求，有时会希望行内元素具有块元素的某些特性，例如可以设置宽度和高度，或者需要块元素具有行内元素的某些特性，例如不独占一行排列，可以使用display属性对元素类型进行转换。3.元素类型的转换知识引入display属性常用的属性值及含义如下。block：将元素显示为块元素（块元素默认值）。12inline：将元素显示为行内元素（行内元素默认值）。3

inline-block：将元素显示为行内块元素，可以为其设置宽度、高度和水平对齐方式等，但是该元素不会独占一行。4

none：元素隐藏，不显示也不占用空间，相当于该元素不存在。3.元素类型的转换知识引入使用display属性可以对元素类型进行转换，使元素以不同的方式显示。下面通过代码来演示display属性的用法，如例。3.元素类型的转换<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>display属性</title>知识引入3.元素类型的转换<style>div,span{

width:200px;

height:50px;

background:#FCC;

margin:10px;

}宽度高度背景颜色外边距知识引入3.元素类型的转换.d_one,.d_two{display:inline;}

.s_one{display:inline-block;}.s_three{display:block;}

</style></head>将前两个div元素转换为行内元素将第3个span元素转换为块元素将第1个

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论