网页设计与制作HTML5+CSS3

任务10

首页导航栏板块的设计与制作

任务本任务使用浮动布局完成“学习党的二十大精神专题网”首页导航栏效果，要求熟练掌握浮动属性的使用，以及清除浮动影响的方法。网页效果如图10-1所示。任务10首页导航栏板块的设计与制作图10-1首页导航栏板块效果

任务10首页导航栏板块的设计与制作知识目标技能目标素质目标（1）掌握浮动布局的特性。（2）掌握浮动属性及其含义。（3）掌握清除浮动影响的方法。（1）能够使用浮动属性进行页面布局。（2）能够灵活运用清除浮动属性。（1）提升逻辑思维能力及实践能力。（2）培养分析和解决问题的能力。（3）培养学生的团队协作意识。

浮动布局清除浮动任务实现任务10首页导航栏板块的设计与制作

1.浮动布局1.1网页布局方式1.2浮动属性float1.3浮动布局的特性任务10首页导航栏板块的设计与制作

1.1网页布局方式在制作网页的过程中，有一个重要的环节就是网页的布局方式，即HTML元素如何进行排列顺序。CSS中默认的布局方式是普通流布局，也称之为标准流布局，也是最基本的布局方式。所谓的标准流就是指元素按默认方式排列。包括以下特点：（1）块状元素独占一行，可以设置宽度和高度，在没有设置大小的情况下块元素宽度撑满父元素、高度由内容大小决定。默认的排列方式是按照在HTML里的顺序从上到下排列，而垂直方向相邻外边距会合并。（2）行内元素的宽度和高度与内容一致，不可以设置宽度和高度。默认从左到右顺序排列，当碰到父元素边缘时则自动换行到下一行。1.浮动布局

1.1网页布局方式【案例10-1】example10-1.html演示了标准流中块元素的自动排列顺序，代码如下：1.浮动布局!DOCTYPEhtmlhtmlheadmetacharset=utf-8title标准流/titlestyletype=text/css.wrapper{border:1pxsolid#f00;padding:5px;width:500px;}.box{border:1pxsolid#333;margin-bottom:5px;}

1.1网页布局方式1.浮动布局.box1{ height:50px;}.box2{ width:300px; height:40px;}.box3{ width:260px;}/style/head

1.1网页布局方式1.浮动布局bodydivclass=wrapperdivclass=boxbox1div1/divdivclass=boxbox2div2/divdivclass=boxbox3div3/div/div/body/html图10-2标准流布局【注意】1.有些网页布局标准流不能实现，可以利用浮动来实现，因为浮动可以改变标签元素默认的排列方式。2.浮动布局的主要用法是为了让块状元素在一行中显示（列级布局），或者让文字在图片的周围显示。

1.2浮动属性float1.浮动布局在CSS中，浮动布局是通过float属性来实现的。float属性定义元素向哪个方向浮动。应用了浮动后元素会脱离标准文档流的控制，移动到器父元素中指定的位置。语法格式如下：float:left|right|none;属性值的含义如表10-1所示：值描述left元素向左浮动right元素向右浮动none默认值，元素不浮动，并会显示在其在文本中出现的位置表10-1float的属性值及其含义

1.3浮动布局的特性1.浮动布局任何元素都可以设置浮动，当元素设置了浮动时，它会按指定方向向左或向右移动，直到它的外边缘碰到父元素包含框或另一个浮动框的边框为止。元素浮动后具有以下特性：（1）脱离标准流元素浮动后成为浮动框，会脱离标准流的控制，移动到指定位置。这个浮动框不再占据原来所占据的位置。块状元素浮动后不再独占一行，行内元素浮动后变成一个块状元素，可以指定宽高。（2）浮动元素会影响后面的元素浮动元素会影响在处于它后面的标准流元素，不会影响前面的标准流元素。包括元素的背景、边框、内边距、外边距，唯独内容不会受影响。

1.3浮动布局的特性1.浮动布局任何元素都可以设置浮动，当元素设置了浮动时，它会按指定方向向左或向右移动，直到它的外边缘碰到父元素包含框或另一个浮动框的边框为止。元素浮动后具有以下特性：（1）脱离标准流元素浮动后成为浮动框，会脱离标准流的控制，移动到指定位置。这个浮动框不再占据