HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第7章 运用浮动和定位布局_第1页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第7章 运用浮动和定位布局_第2页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第7章 运用浮动和定位布局_第3页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第7章 运用浮动和定位布局_第4页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第7章 运用浮动和定位布局_第5页
已阅读5页，还剩136页未读， 继续免费阅读

下载本文档

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

文档简介

第7章运用浮动和定位布局《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target熟悉网页布局，能够说明DIV+CSS布局的含义。了解网页模块命名规范，能够按照命名规范命名网页模块。知识目标技能目标掌握浮动属性，能够为元素设置和清除浮动。熟悉overflow属性的用法，能够设置溢出内容的显示方式。学习目标/Target掌握元素的定位，能够设置不同的定位模式。熟悉常见布局方式，能够运用HTML+CSS搭建布局结构。技能目标素养目标通过制作古典乐器展示页面，深入了解古典乐器的知识，提升文化素养。通过制作中国载人航天网站页面，深入研究中国载人航天的发展，提升科学素养。章节概述/Summary通过对前几章的学习，我们不难发现，网页中的元素会默认按照从上到下或从左到右的顺序进行排列。如果仅仅按照这种默认的方式进行布局，网页会显得单调、混乱。为了使网页的内容条理清晰、丰富美观，可以在CSS中对元素设置浮动和定位属性。本章将对元素的浮动和定位进行详细讲解。目录/Contents010203案例7-1古典乐器展示页面案例7-2中国载人航天网站页面案例7-3智能导航界面04案例7-4鲜花驿站首页古典乐器展示页面案例7-1案例描述浮动布局是网页制作中一种常用的布局方式，广泛用于PC端网页的制作中。通过浮动布局可以轻松实现图文混排效果，使页面内容条理清晰，视觉效果也更加美观。本案例将使用浮动布局制作一个古典乐器展示页面，效果如图。知识引入熟悉网页布局，能够说明DIV+CSS布局的含义。学习目标1.布局概述知识引入在网页设计中，布局主要依靠“DIV+CSS”技术来实现。说到DIV大家肯定非常熟悉，但是在本章，它不仅指前面讲解的<div>标签，还指所有能够承载内容的容器标签，如<p>、<li>等。在DIV+CSS技术中，DIV负责内容区域的分配，CSS负责样式效果的呈现，因此网页中的布局，也常被称作DIV+CSS布局。1.布局概述123确定页面的版心宽度。分析页面中的模块。控制网页中的各个模块。知识引入1.布局概述为了提高网页制作的效率，网页布局需要遵循一定的流程。知识引入1.布局概述版心是指页面的有效使用面积，是主要元素以及内容所在的区域，一般在浏览器窗口中水平居中显示。设计网页时，页面的宽度一般为1200px～1920px。但是为了适配具有不同屏幕分辨率的显示器，版心宽度一般设计为1000px～1400px。01确定页面的版心宽度知识引入1.布局概述例如屏幕分辨率为1024px×768px的显示器，其有效可视区域的宽度为1000px，所以最好设置版心宽度为1000px。此外，在设计网页时应尽量适配主流的屏幕分辨率，常见的版心宽度为1000px、1200px等。下图所示为华为商场网站页面的版心宽度和页面宽度示意。01确定页面的版心宽度知识引入1.布局概述在运用DIV+CSS布局之前，先要对页面有一个整体的规划，包括页面中有哪些模块，以及各模块之间的关系（分为并列关系和嵌套关系）。例如，右图所示为某页面的布局，该页面主要由头部（header）、导航栏（nav）、焦点图（banner）、内容（content）、底部（footer）模块组成，这5个模块为并列关系。01分析页面中的模块知识引入1.布局概述分析页面中的模块后，我们就可以应用盒子模型，使用DIV+CSS布局来控制网页中的各个模块。要想提高网页制作的效率，网页制作初学者一定要养成分析页面布局的习惯。03控制网页中的各个模块知识引入掌握浮动属性，能够为元素设置浮动属性。学习目标2.浮动属性知识引入浮动属性用于设置元素浮动。所谓元素浮动是指设置了浮动属性的元素会脱离标准文档流（标准文档流是指内容元素在排版布局的过程中，会自动从左往右、从上往下进行流式排列）的控制，移动到其父元素中指定位置的过程。2.浮动属性知识引入浮动属性作为CSS的重要属性，被频繁地应用在网页制作中。使用浮动属性设置元素浮动的基本语法格式如下。选择器{float:属性值;}2.浮动属性float属性即为浮动属性知识引入常用的float属性值有3个，具体如表。2.浮动属性属性值描述left用于设置元素左浮动right用于设置元素右浮动none默认值，元素不浮动知识引入在了解了float属性值及其描述后，下面通过代码演示float属性的用法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>元素浮动</title>2.浮动属性知识引入<style>.father{/*设置父元素的样式*/background:#eee;border:1pxdashed#999;}2.浮动属性知识引入.box01,.box02,.box03{/*设置box01、box02、box03这3个子元素的样式*/height:50px;line-height:50px;border:1pxdashed#999;margin:15px;padding:0px10px;}2.浮动属性知识引入.box01{background:#FF9;}.box02{background:#FC6;}.box03{background:#F90;}p{/*设置段落文本的样式*/background:#ccf;border:1pxdashed#999;argin:15px;padding:0px10px;}</style></head>2.浮动属性知识引入<body><divclass="father"><divclass="box01">box01</div><divclass="box02">box02</div><divclass="box03">box03</div><p>北京时间2024年4月25日20时59分，中国航天人再次刷新飞天壮举。航天员叶光富、李聪、李广苏组成神舟十八号飞行乘组，执行空间站应用与发展阶段第三次载人飞行任务，不断攀登新的科技高峰，标志着迈向航天强国的步伐铿锵有力。</p></div></body></html>2.浮动属性知识引入运行示例代码，效果如图。2.浮动属性知识引入接下来，在例example01.html的基础上设置元素左浮动。以box01为设置对象，对其应用左浮动样式，具体CSS代码如下。2.浮动属性.box01{float:left;}保存文件并刷新页面，box01左浮动的效果如图。知识引入在上述示例代码的基础上，继续为box02设置左浮动，具体CSS代码如下。2.浮动属性.box01,.box02{float:left;}保存文件并刷新页面，box01和box02同时左浮动的效果如图。知识引入接下来，继续为box03设置左浮动，具体CSS代码如下。2.浮动属性.box01,.box02,.box03{float:left;}保存文件并刷新页面，box01、box02、box03同时左浮动的效果如图。知识引入掌握浮动属性，能够为元素设置和清除浮动。学习目标3.清除浮动知识引入在CSS中，常用clear属性清除浮动。运用clear属性清除浮动的基本语法格式如下。选择器{clear:属性值;}3.清除浮动知识引入常用的clear属性值有3个，具体如表。3.清除浮动属性值描述left清除元素左侧浮动的影响right清除元素右侧浮动的影响both同时清除元素左右两侧浮动的影响知识引入在<p>标签的CSS代码中添加如下代码。clear:left;3.清除浮动保存文件并刷新页面，效果如图。知识引入下面通过代码演示这种情况会产生什么样的影响，如例example02.html。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>子元素浮动的影响</title>3.清除浮动知识引入<style>.father{/*没有为父元素设置高度*/background:#ccc;

border:1pxdashed#999;}3.清除浮动知识引入.box01,.box02,.box03{height:50px;line-height:50px;background:#f9c;border:1pxdashed#999;margin:15px;padding:0px10px;float:left;/*定义box01、box02、box03这3个子元素左浮动*/}</style></head>3.清除浮动知识引入<body><divclass="father"><divclass="box01">box01</div><divclass="box02">box02</div><divclass="box03">box03</div></div></body></html>3.清除浮动知识引入运行示例代码，效果如图。3.清除浮动知识引入清除子元素浮动对父元素的影响的方法有3种。3.清除浮动使用空标签清除浮动使用overflow属性清除浮动使用after伪对象清除浮动知识引入3.清除浮动在浮动元素之后添加空标签，并对该标签应用“clear:both;”样式，可清除元素浮动所产生的影响，这个空标签可以是<div>、<p>、<hr>等任何标签。01使用空标签清除浮动知识引入3.清除浮动下面通过代码演示使用空标签清除浮动的方法，如例。01使用空标签清除浮动<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>使用空标签清除浮动</title><style>知识引入3.清除浮动01使用空标签清除浮动.father{

/*没有给父元素定义高度*/background:#ccc;

border:1pxdashed#999;}知识引入3.清除浮动01使用空标签清除浮动.box01,.box02,.box03{height:50px;line-height:50px;background:#f9c;border:1pxdashed#999;margin:15px;padding:0px10px;float:left;/*定义box01、box02、box03这3个子元素左浮动*/}知识引入3.清除浮动01使用空标签清除浮动.box04{clear:both;}/*对空标签应用clear:both;*/</style></head><body><divclass="father"><divclass="box01">box01</div><divclass="box02">box02</div><divclass="box03">box03</div><divclass="box04"></div><!--在浮动元素之后添加空标签--></div></body></html>知识引入3.清除浮动运行示例代码，效果如图。01使用空标签清除浮动知识引入3.清除浮动对受浮动影响的元素应用“overflow:hidden;”样式，也可以清除浮动对该元素的影响，这种方法弥补了使用空标签清除浮动的不足。02使用overflow属性清除浮动知识引入3.清除浮动下面通过代码演示使用overflow属性清除浮动的用法，如例。02使用overflow属性清除浮动<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>使用overflow属性清除浮动</title>知识引入3.清除浮动02使用overflow属性清除浮动<style>.father{/*没有给父元素定义高度*/background:#ccc;

border:1pxdashed#999;overflow:hidden;/*对父元素应用overflow:hidden;*/}知识引入3.清除浮动02使用overflow属性清除浮动.box01,.box02,.box03{height:50px;line-height:50px;background:#f9c;border:1pxdashed#999;margin:15px;padding:0px10px;float:left;

/*定义box01、box02、box03这3个子元素左浮动*/}</style></head>知识引入3.清除浮动02使用overflow属性清除浮动<body><divclass="father"><divclass="box01">box01</div><divclass="box02">box02</div><divclass="box03">box03</div></div></body></html>知识引入3.清除浮动运行示例代码，效果如图。02使用overflow属性清除浮动知识引入3.清除浮动使用after伪对象也可以清除浮动，但是该方法只适用于IE8.0及以上版本浏览器和其他非IE浏览器。使用after伪对象清除浮动时有以下要求。03使用after伪对象清除浮动必须在伪对象中设置content属性，属性值可以为空，如“content:"";”。12必须为需要清除浮动的元素设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。知识引入3.清除浮动下面通过代码演示使用after伪对象清除浮动的方法，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>使用after伪对象清除浮动</title>03使用after伪对象清除浮动知识引入3.清除浮动<style>.father{

/*没有给父元素定义高度*/background:#ccc;border:1pxdashed#999;}03使用after伪对象清除浮动知识引入3.清除浮动.father:after{

/*对父元素应用after伪对象样式*/display:block;clear:both;content:"";visibility:hidden;height:0;}03使用after伪对象清除浮动知识引入3.清除浮动

.box01,.box02,.box03{height:50px;line-height:50px;background:#f9c;border:1pxdashed#999;margin:15px;padding:0px10px;03使用after伪对象清除浮动知识引入3.清除浮动float:left;/*定义box01、box02、box03这3个子元素左浮动*/}</style></head><body><divclass="father"><divclass="box01">box01</div><divclass="box02">box02</div><divclass="box03">box03</div></div></body></html>03使用after伪对象清除浮动知识引入3.清除浮动运行示例代码，效果如图。03使用after伪对象清除浮动项目实现掌握浮动布局，能够使用浮动布局制作一个古典乐器展示页面。学习目标项目实现中国载人航天网站页面案例7-2案例描述中国载人航天工程是中国空间科学实验的重大战略工程之一，于1992年由政府批准实施，代号“921工程”。中国发展载人航天具有多重意义，不仅彰显了国家科技实力与综合国力，推动了航天技术及相关领域的创新突破，促进了高科技产业发展，提升了民族自豪感和国际地位，还为探索宇宙奥秘、拓展人类生存空间贡献了重要力量，体现了大国责任与担当。本案例将运用CSS中的overflow属性模拟一款移动设备，用来展示中国载人航天网站页面，效果如图。知识引入熟悉overflow属性的用法，能够设置溢出内容的显示方式。学习目标overflow属性知识引入当盒子内的内容超出盒子自身的大小时，内容就会溢出。如果想要控制溢出内容的显示方式，就需要使用CSS的overflow属性。overflow属性用于规定溢出内容的显示方式，其基本语法格式如下。overflow属性选择器{overflow:属性值;}知识引入常用的overflow属性值有4个，具体如表。overflow属性属性值描述visible默认值，内容不会被隐藏，显示在盒子之外hidden内容会被隐藏，超出盒子的部分将不可见scroll溢出内容会被隐藏，浏览器会始终显示滚动条auto溢出内容会被隐藏，浏览器根据需要自动显示滚动条，不会始终显示知识引入下面通过代码演示overflow属性值的用法，如例。overflow属性<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>overflow属性值的用法</title>知识引入overflow属性<style>.hezi{width:260px;

height:176px;border:1pxsolid#000000;background-color:#bfd9f3;overflow:visible;/*溢出内容显示在盒子之外*/}</style></head>知识引入overflow属性<body><divclass="hezi">春风拂过，带来了万物复苏的气息。我漫步在乡间的小路上，感受着春天的温柔与生机。路旁的柳树已经抽出了嫩绿的枝条，轻轻摇曳着，仿佛在向春天致意。远处，一片片翠绿的稻田铺展开来，与蓝天白云相映成趣，构成了一幅美丽的画卷。我停下脚步，静静聆听春天的声音。微风吹过，树叶沙沙作响，伴随着鸟儿的欢歌，仿佛是大自然的交响乐。我闭上眼睛，深呼吸着清新的空气，感受着春天的气息在我体内流淌。</div></body></html>知识引入运行示例代码，效果如图。overflow属性知识引入如果希望溢出的内容被隐藏且不可见，可将overflow的属性值修改为hidden。在例example06.html的基础上进行演示，将第12行代码改为如下代码。overflow属性overflow:hidden;项目实现掌握overflow属性，能够通过运用CSS中的overflow属性模拟一款移动设备。学习目标项目实现智能导航界面案例7-3案例描述智能导航可利用现代技术来提供实时、精确的导航和交通信息。它通常结合了全球定位系统（GlobalPositioningSystem，GPS）、传感器、AI等技术，为用户提供更为智能和便捷的导航服务。本案例将运用CSS中常用的定位模式制作一个智能导航界面，其默认效果如图。案例描述当鼠标指针经过某一个定位坐标时，其背景图像会发生变化。图中所示为鼠标指针移至第一个定位坐标时的效果。知识引入掌握元素的定位，能够设置不同的定位模式。学习目标1.元素的定位知识引入制作网页时，如果希望网页元素出现在某个特定的位置，就需要使用定位属性来对标签进行精确定位。在进行精确定位时，需要设置“定位模式”和“边偏移”两部分。1.元素的定位定位模式边偏移知识引入在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下。1.元素的定位定位模式01选择器{position:属性值;}知识引入常用的position属性值有4个，具体如表。1.元素的定位定位模式01属性值描述static默认值。静态定位，元素按照标准文档流进行定位relative相对定位，元素相对于自身在标准文档流中的位置进行定位absolute绝对定位，元素相对于最近的已定位的祖先元素进行定位fixed固定定位，元素相对于浏览器窗口进行定位知识引入定位模式仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过边偏移属性top、bottom、left或right，可以精确定义元素的位置，取值为数值或百分比数值，具体如表。1.元素的定位边偏移02边偏移属性描述top顶端偏移量，定义元素相对于其定位参考元素上边线的距离bottom底端偏移量，定义元素相对于其定位参考元素下边线的距离left左侧偏移量，定义元素相对于其定位参考元素左边线的距离right右侧偏移量，定义元素相对于其定位参考元素右边线的距离知识引入掌握元素的定位模式，能够灵活运用静态定位、相对定位、绝对定位和固定定位。学习目标2.不同定位模式的特点知识引入元素的定位模式主要包括静态定位、相对定位、绝对定位和固定定位。静态定位相对定位绝对定位固定定位2.不同定位模式的特点知识引入静态定位是元素的默认定位模式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各元素在标准文档流中默认的位置。静态定位012.不同定位模式的特点任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不是说明该元素没有自己的位置，它会遵循默认值以静态定位显示。在静态定位模式下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。知识引入相对定位是元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以对元素进行相对定位。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在标准文档流中的位置仍然保留。相对定位02选择器{position:属性值;}2.不同定位模式的特点知识引入为了使初学者更好地理解相对定位，下面通过代码演示对元素设置相对定位的效果，如例example07.html。相对定位02<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>元素的定位</title>2.不同定位模式的特点知识引入相对定位02<style>body{margin:0px;

padding:0px;font-size:18px;font-weight:bold;}2.不同定位模式的特点知识引入相对定位02.father{margin:10pxauto;width:300px;height:300px;padding:10px;background:#ccc;border:1pxsolid#000;}2.不同定位模式的特点知识引入相对定位02.child01,.child02,.child03{width:100px;height:50px;line-height:50px;background:#ff0;border:1pxsolid#000;margin:10px0px;text-align:center;}2.不同定位模式的特点知识引入相对定位02.child02{position:relative;/*相对定位*/left:150px;/*距左边界150px*/top:100px;/*距上边界100px*/}</style></head>2.不同定位模式的特点知识引入相对定位02<body><divclass="father"><divclass="child01">child-01</div><divclass="child02">child-02</div><divclass="child03">child-03</div></div></body></html>2.不同定位模式的特点知识引入运行示例代码，效果如图。相对定位022.不同定位模式的特点知识引入绝对定位是将元素基于最近的已定位（绝对、固定或相对定位）的祖先元素进行定位，若所有祖先元素都没有定位，则设置绝对定位的元素会依据body元素进行定位，也可以理解为会依据浏览器窗口进行定位。当position属性的取值为absolute时，可以对元素进行绝对定位。绝对定位032.不同定位模式的特点知识引入下面在例example07.html的基础上，将child02元素的定位模式设置为绝对定位，即将第33行代码更改为如下代码。032.不同定位模式的特点position:absolute;保存文件并刷新页面绝对定位知识引入下面通过代码演示子标签基于其父标签进行精确定位，如例example08.html。03<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>子标签基于其父标签精确定位</title><style>body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}2.不同定位模式的特点绝对定位知识引入03

.father{

margin:10pxauto;

width:300px;

height:300px;

padding:10px;

background:#ccc;

border:1pxsolid#000;

position:relative;

/*相对定位，但不设置偏移量*/

}2.不同定位模式的特点绝对定位知识引入03

.child01,.child02,.child03{

width:100px;

height:50px;

line-height:50px;

background:#ff0;

border:1pxsolid#000;

border-radius:50px;

margin:10px0px;

text-align:center;

}2.不同定位模式的特点绝对定位知识引入03

.child02{

position:absolute;

/*绝对定位*/

left:150px;

/*距左边界150px*/

top:100px;

/*距上边界100px*/

}</style></head>2.不同定位模式的特点绝对定位知识引入03<body><divclass="father"><divclass="child01">child-01</div><divclass="child02">child-02</div><divclass="child03">child-03</div></div></body></html>2.不同定位模式的特点绝对定位知识引入运行示例代码，效果如图。032.不同定位模式的特点绝对定位如果仅为标签设置绝对定位，不设置边偏移属性，则标签的位置不变，但该标签不再占用标准文档流中的空间，会与上移的后续标签重叠。在定义多个边偏移属性时，如果left和right属性值冲突，以left属性值为准；如果top和bottom属性值冲突，以top属性值为准。知识引入2.不同定位模式的特点03绝对定位知识引入固定定位是绝对定位的一种特殊形式，标签以浏览器窗口为参照物来定位。当position属性的取值为fixed时，即可将标签的定位模式设置为固定定位。当为标签设置固定定位后，该标签将脱离标准文档流的控制，始终基于浏览器窗口来定义自己的显示位置。不论浏览器滚动条如何滚动，也不论浏览器窗口的大小如何变化，该标签始终显示在浏览器窗口中的固定位置。042.不同定位模式的特点固定定位知识引入掌握重叠顺序属性，能够灵活运用多个标签同时设置定位模式。学习目标3.重叠顺序属性知识引入当对多个标签同时设置定位模式时，定位标签有可能会重叠，如图。3.重叠顺序属性知识引入注意：z-index属性仅对定位标签有效。3.重叠顺序属性项目实现掌握元素的定位，能够运用CSS中常用的定位模式制作一个智能导航界面。学习目标项目实现鲜花驿站首页案例7-4案例描述在网页设计中，如果按照从上到下的默认方式进行排版，网页版面会显得单调、混乱。可以对页面进行布局，将各模块有序排列，使网页版面变得整齐、美观。本案例将结合给出的素材，运用浮动和定位的相关知识制作一个采用3列布局的鲜花网站首页，效果如图。知识引入熟悉单列布局方式，能够运用HTML+CSS搭建布局结构。学习目标1.单列布局知识引入单列布局是网页布局的基础，众多复杂的布局方式都是在其基础上演变而来的。下图展示了单列布局页面的结构示意。1.单列布局知识引入下面使用相应的HTML标签搭建页面结构，如例example09.html。1.单列布局<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>单列布局</title></head>知识引入1.单列布局<body><divid="top">头部</div>

<divid="nav">导航栏</div><divid="banner">焦点图</div><divid="content">内容</div><divid="footer">页面底部</div></body></html>知识引入搭建完页面结构后，下面书写相应的CSS样式，具体代码如下。1.单列布局body{margin:0;padding:0;font-size:24px;text-align:center;}div{width:980px;

margin:5pxauto;

background:#D2EBFF;}#top{height:40px;}

#nav{height:60px;}#banner{height:200px;}#content{height:200px;}#footer{height:90px;}知识引入熟悉两列布局方式，能够运用HTML+CSS搭建布局结构。学习目标2.两列布局知识引入单列布局虽然统一、有序，但常常会让人觉得呆板，在实际网页制作过程中，通常使用另一种布局方式——两列布局。两列布局和单列布局类似，只是内容被分为了左右两部分，通过这样的分割，打破了单列布局的呆板，让页面看起来更加活泼。下图展示了两列布局页面的结构示意。2.两列布局知识引入下面使用相应的HTML标签搭建页面结构，如例example10.html。2.两列布局<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>两列布局</title></head>知识引入2.两列布局<body><divid="top">头部</div>

<divid="nav">导航栏</div>

<divid="banner">焦点图</div><divid="content"><divclass="content_left">内容左部分</div><divclass="content_right">内容右部分</div></div><divid="footer">页面底部</div></body></html>知识引入搭建完页面结构后，下面书写相应的CSS样式。由于网页的内容模块被分为了左右两个部分，所以，只需在例example10.html中CSS样式的基础上，控制类名为“content_left”和“content_right”的两个小盒子的样式即可，具体代码如下。2.两列布局body{margin:0;padding:0;font-size:24px;text-align:center;}div{width:980px;

/*设置所有模块的宽度为980px、水平居中显示*/margin:5pxauto;background:#D2EBFF;}知识引入2.两列布局#top{height:40px;}

/*分别设置各个模块的高度*/#nav{height:60px;}#banner{height:200px;}#content{height:200px;}.content_left{

/*左侧小模块左浮动*/width:350px;height:200px;background-color:#CCC;float:left;margin:0;}知识引入2.两列布局.content_right{

/*右侧小模块右浮动*/width:625px;height:200px;background-color:#CCC;float:right;margin:0;}#footer{height:90px;}知识引入熟悉三列布局方式，能够运用HTML+CSS搭建布局结构。学习目标3.三列布局知识引入对于一些大型网站，特别是电商类网站，由于内容分类较多，通常需要采用三列布局这一布局方式。其实，这种布局方式是两列布局的演变，将内容模块分成了左、中、右3个部分。下图展示了三列布局页面的结构。3.三列布局知识引入下面使用相应的HTML标签搭建页面结构，如例。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>三列布局</title></head>3.三列布局知识引入<body><divid="top">头部</div>

<divid="nav">导航栏</div><divid="banner">焦点图</div><divid="content"><divclass="content_left">内容左部分</div><divclass="content_middle">内容中间部分</div><divclass="content_right">内容右部分</div></div></body></html>3.三列布局知识引入搭建完页面结构后，下面书写相应的CSS样式。由于内容模块被分为了左、中、右3个部分，所以，只需在例example11.html中CSS样式的基础上，修改左、右小盒子的宽度并单独控制类名为“content_middle”的小盒子的样式即可，具体代码如下。body{margin:0;padding:0;font-size:24px;text-align:center;}div{width:980px;

/*设置所有模块的宽度为980px、水平居中显示*/margin:5pxauto;background:#D2EBFF;}3.三列布局知识引入#top{height:40px;}

/*分别设置各个模块的高度*/#nav{height:60px;}#banner{height:200px;}#content{height:200px;}.content_left{

/*左侧小模块左浮动*/width:200px;height:200px;background-color:#CCC;float:left;margin:0;}3.三列布局知识引入.content_middle{

/*中间小模块左浮动*/width:570px;height:200px;background-color:#CCC;float:left;margin:0005px;}3.三列布局知识引入.content_right{

/*右侧小模块右浮动*/width:200px;background-color:#CCC;float:right;height:200px;margin:0;}#footer{height:90px;}3.三列布局知识引入为了网站的美观，网页中的一些模块（例如头部、导航栏、焦点图或页面底部等）经常需要通栏显示。在将模块设置为通栏显示后，无论页面放大或缩小，该模块都将横铺于浏览器窗口中。图“两列布局页面的结构示意”所示为通栏布局页面的结构示意。3.三列布局知识引入下面通过代码演示通栏布局的设置技巧，如例。3.三列布局<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>通栏布局</title></head>知识引入3.三列布局<body><divid="top">头部</div><divid="navbar">

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

温馨提示

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

最新文档

评论

0/150

提交评论