Web前端开发案例教程第9章课件

1、第9章 HTML5+CSS3布局网页 德才兼备 知行合一 理解元素的浮动属性； 掌握元素的各种定位方法； 掌握常用的HTML5+CSS3布局方式。第9章 HTML5+CSS3布局网页 德才兼备 知识准备案例实现2德才兼备 知行合一9.19.29.3案例：学院网站主页布局第9章 HTML5+CSS3布局网页 知识准备案例实现2德才兼备 知行合一9.199.1 案例：学院网站主页布局3德才兼备 知行合一第9章 HTML5+CSS3布局网页 9.1 案例：学院网站主页布局3德才兼备 根据学院网站主页效果图，对主页的布局进行划分。创建网页，对学院网站的主页进行布局。布局浏览效果如图所示。 9.1 案例

2、：学院网站主页布局4德才兼备 知行合一根据学院网站主页效果图，对主页的布局进行划分。创建网页，对学9.2 知识准备 5德才兼备 知行合一第9章 HTML5+CSS3布局网页 9.2 知识准备 5德才兼备 知行6德才兼备 知行合一 9.2.1 元素的浮动学院网站主页中的块，有的是水平排列，有的竖直排列。但默认情况下，网页中的块元素会以标准流的方式进行竖直排列，即将块元素从上到下一一罗列。但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。6德才兼备 知行合一 9.2.1 元素的浮动7德才兼备 知行合一 9.2.1 元素的浮动所谓元素的浮动是指设置了浮动属性的元素会脱离标

3、准流的控制，移动到指定位置。在CSS中，通过float属性来设置左浮动或右浮动。其语法格式如下。选择器float:left|right|none;注意：设为left或right，使浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止。若不设置float属性，则float属性值默认为none，即不浮动。7德才兼备 知行合一 9.2.1 元素的浮动8德才兼备 知行合一 9.2.1 元素的浮动例9-1 在网页中定义两个盒子，文件名：9-1.html，代码如下：#one /*定义第一个盒子的样式*/width: 300px;height: 200px;background-

4、color: #E08789;#two /*定义第二个盒子的样式*/width: 300px;height: 200px;background-color: #FF0000;此时浏览网页的效果图8德才兼备 知行合一 9.2.1 元素的浮动设置浮动属性后，盒子水平排列。浮动元素不再占用原文档流的位置，它会对页面中其他元素的排版产生影响。9德才兼备 知行合一 9.2.1 元素的浮动#one /*定义第一个盒子的样式*/width: 300px;height: 200px;background-color: #E08789;#two /*定义第二个盒子的样式*/width: 300px;height

5、: 200px;background-color: #FF0000;#one,#twofloat:left;若给两个盒子添加浮动属性，代码如下：添加浮动属性后的网页的效果图设置浮动属性后，盒子水平排列。浮动元素不再占用原文档流的位置10德才兼备 知行合一 9.2.1 元素的浮动例9-2 在网页中定义两个盒子，在盒子下面再显示一段段落文字。文件名：9-2.html。浏览网页时效果图如下所示。10德才兼备 知行合一 9.2.1 元素的浮11德才兼备 知行合一 9.2.1 元素的浮动这里是段落文字，这里是段落文字，这里是段落文字，这里是#one /*定义第一个盒子的样式*/width: 300px;

6、height: 200px;background-color: #E08789;#two /*定义第二个盒子的样式*/width: 300px;height: 200px;background-color: #F00;搭建HTML结构如下：CSS样式表代码如下：此时网页中的元素按标准流的方式自上而下排列。11德才兼备 知行合一 9.2.1 元素的浮12德才兼备 知行合一 9.2.1 元素的浮动若给两个盒子添加浮动属性，修改CSS样式表代码如下：#one /*定义第一个盒子的样式*/width: 300px;height: 200px;background-color: #E08789;#two

7、 /*定义第二个盒子的样式*/width: 300px;height: 200px;background-color: #F00;#one,#twofloat:left; /*设置左浮动*/此时网页浏览效果如下图所示：可以看出，块元素设置浮动属性后，会形成文字与块环绕的效果。若要清除浮动，则需要使用clear属性。12德才兼备 知行合一 9.2.1 元素的浮13德才兼备 知行合一 9.2.1 元素的浮动清除浮动属性对段落元素的影响，修改CSS样式表代码如下：#one /*定义第一个盒子的样式*/width: 300px;height: 200px;background-color: #E087

8、89;#two /*定义第二个盒子的样式*/width: 300px;height: 200px;background-color: #F00;#one,#twofloat:left; /*设置左浮动*/pclear:both; /*清除浮动的影响*/此时网页浏览效果如下图所示：13德才兼备 知行合一 9.2.1 元素的浮14德才兼备 知行合一 9.2.1 元素的浮动需要注意的是，clear属性只能清除元素左右两侧浮动的影响，但是在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响，下面举例说明。14德才兼备 知行合一

9、 9.2.1 元素的浮15德才兼备 知行合一 9.2.1 元素的浮动例9-3 在网页中定义一个大盒子，在其中包含两个子盒子。文件名：9-3.html，代码如下： #box /*定义大盒子的样式，不设置高度*/width: 700px;background: #9F0;#one /*定义子盒子的样式*/width: 300px;height: 200px;background-color: #E08789;float: left; /*设置左浮动*/margin: 10px;#two /*定义子盒子的样式*/width: 300px;height: 200px;background-color:

10、 #F00;float: left; /*设置左浮动*/margin: 10px;搭建HTML结构如下：CSS样式表代码如右：15德才兼备 知行合一 9.2.1 元素的浮16德才兼备 知行合一 9.2.1 元素的浮动浏览网页，效果如图所示。从上图可以看出，此时没有看到父元素。也就是说子元素设置浮动后，由于父元素没有设置高度，受子元素浮动的影响，所以父元素没有显示。16德才兼备 知行合一 9.2.1 元素的浮17德才兼备 知行合一 9.2.1 元素的浮动子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。那如何使父元素适应子元素的高，进行显示呢？最

11、简单的方法是使用overflow属性清除浮动。代码如下：17德才兼备 知行合一 9.2.1 元素的浮18德才兼备 知行合一 9.2.1 元素的浮动#two /*定义子盒子的样式*/width: 300px;height: 200px;background-color: #F00;float: left; /*设置左浮动*/margin: 10px;修改例9-3 中CSS样式表代码如下：#box /*定义大盒子的样式，不设置高度*/width: 700px;background: #9F0;overflow:hidden; /*清除浮动，使父元素适应子元素的高*/#one /*定义子盒子的样式*

12、/width: 300px;height: 200px;background-color: #E08789;float: left; /*设置左浮动*/margin: 10px;18德才兼备 知行合一 9.2.1 元素的浮19德才兼备 知行合一 9.2.1 元素的浮动此时浏览网页，效果如下图所示。可以看出，父元素又被子元素撑开，即子元素浮动对父元素的影响已经清除。19德才兼备 知行合一 9.2.1 元素的浮20德才兼备 知行合一 9.2.2 元素的定位浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。什么是定位？20德才兼备 知行合一

13、 9.2.2 元素的定21德才兼备 知行合一 9.2.2 元素的定位1、元素的定位属性（1）定位方式在CSS中，position属性用于定义元素的定位方式，其常用语法格式如下：选择器position:static|relative|absolute|fixed; 说明：static：静态定位，默认定位方式。relative：相对定位，相对于其原文档流的位置进行定位。absolute：绝对定位，相对于其上一个已经定位的父元素进行定位。fixed：固定定位，相对于浏览器窗口进行定位。21德才兼备 知行合一 9.2.2 元素的定22德才兼备 知行合一 9.2.2 元素的定位1、元素的定位属性（2）确

14、定元素位置position属性仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过left、right、top、bottom四个属性来精确定位元素的位置。left：定义元素相对于其父元素左边线的距离。right：定义元素相对于其父元素右边线的距离。top：定义元素相对于其父元素上边线的距离。bottom：定义元素相对于其父元素下边线的距离。22德才兼备 知行合一 9.2.2 元素的定23德才兼备 知行合一 9.2.2 元素的定位2、静态定位静态定位（static）是元素的默认定位方式，是各个元素按照标准流（包括浮动方式）进行定位。在静态定位状态下，无法通过left、rig

15、ht、top、bottom 4个属性来改变元素的位置。例9-4 静态定位示例。在网页中定义一个大盒子，在其中包含三个子盒子。文件名：9-4.html，浏览效果如下：23德才兼备 知行合一 9.2.2 元素的定24德才兼备 知行合一 9.2.2 元素的定位 one two three#box /*定义大盒子的样式*/width: 400px;height: 400px;background: #CCC;#one, #two, #three /*定义子盒子的样式*/width: 100px;height: 100px;background-color:#5BE93F;border: 1px sol

16、id #333;搭建HTML结构如下：CSS样式表代码如下：在上面代码中，所有元素都采用静态定位，即按标准流的方式定位。24德才兼备 知行合一 9.2.2 元素的定25德才兼备 知行合一 9.2.2 元素的定位3、相对定位采用相对定位的元素会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。其中，水平方向的偏移量由left或right属性指定；竖直方向的偏移量由top和bottom属性指定。例9-5 相对定位示例。在网页中定义一个大盒子，在其中包含三个子盒子，对第二个盒子进行相对定位。文件名称为9-5.html，代码如下。25德才兼备 知行合一 9.2.2 元素的定26德才兼备 知行合一

17、 9.2.2 元素的定位 one two three#box /*定义大盒子的样式*/width: 400px;height: 400px;background: #CCC;#one, #two, #three /*定义子盒子的样式*/width: 100px;height: 100px;background-color: #0FF;border: 1px solid #333;#two position: relative; /*设置相对定位*/left: 30px;top: 30px;搭建HTML结构如下：CSS样式表代码如下：26德才兼备 知行合一 9.2.2 元素的定27德才兼备 知行

18、合一 9.2.2 元素的定位在上面代码中，第二个子元素采用相对定位，可以看出该元素相对于其自身原来的位置，向下向右各偏移了30个像素。但是它在文档流中的位置仍然保留。浏览网页，效果如图所示。27德才兼备 知行合一 9.2.2 元素的定28德才兼备 知行合一 9.2.2 元素的定位4、绝对定位采用绝对定位的元素是将元素依据最近的已经定位（相对或绝对定位）的父元素进行定位，若所有父元素都没有定位，则依据body元素（浏览器窗口）进行定位。例9-6 绝对定位示例。在网页中定义一个大盒子，在其中包含三个子盒子，对第二个盒子进行绝对定位。文件名称为9-6.html，代码如下。28德才兼备 知行合一 9.

19、2.2 元素的定29德才兼备 知行合一 9.2.2 元素的定位 one two three#box /*定义大盒子的样式*/width: 400px;height: 400px;background: #CCC;position: relative; /*设置相对定位, 但不设置偏移量*/#one, #two, #three /*定义子盒子的样式*/width: 100px;height: 100px;background-color: #0FF;border: 1px solid #333;#two /*定义第二个子盒子的样式*/position: absolute; /*设置绝对定位*/r

20、ight: 0; /*离父元素的右边缘是0*/bottom: 0; /*离父元素的下边缘是0*/搭建HTML结构如下：CSS样式表代码如下：29德才兼备 知行合一 9.2.2 元素的定30德才兼备 知行合一 9.2.2 元素的定位在例9-6中，对父元素设置相对定位，但不对其设置偏移量，同时，对子元素two设置绝对定位，并通过right和bottom属性设置其精确位置。这种方法在实际网页制作中被经常使用。如果在例9-6中，去掉box盒子的position:relative属性设置，那么子元素two将相对于浏览器窗口进行定位，将位于浏览器窗口的右下角。绝对定位的元素从标准流中脱离，不再占用标准文档

21、流中的空间。浏览网页，效果如图所示。30德才兼备 知行合一 9.2.2 元素的定31德才兼备 知行合一 9.2.2 元素的定位例9-7 绝对定位应用。使用绝对定位给第7章通知公告块案例中添加超链接“更多”字样，如图9-13所示。文件名称为9-7.html。此处可以对“更多”字样所在的span标记使用绝对定位。标题行h1作为父元素，设置相对定位，“更多”元素作为其中的子元素，设置绝对定位。31德才兼备 知行合一 9.2.2 元素的定32德才兼备 知行合一 9.2.2 元素的定位.notice h1 /*设置标题行的样式*/height: 38px;line-height: 38px;width:

22、 430px;/*这个宽度是440PX-10PX*/border-bottom: 2px solid #1a4aa7;font-size: 20px;font-weight: bold;padding-left: 10px;/*使文字向右移动10PX*/position: relative;/*设置相对定位,但不设置偏移量*/.notice h1 span /*更多文字的样式*/font-size: 12px;font-weight: normal;position: absolute;/*设置绝对定位*/right: 10px;/*离h1右边的距离是10px*/top: 0;/*离h1上边的

23、距离是0px*/关键样式表代码如下。32德才兼备 知行合一 9.2.2 元素的定33德才兼备 知行合一 9.2.2 元素的定位5、固定定位固定定位是绝对定位的一种特殊形式，它总是以浏览器窗口作为参照物来定位网页元素。当对元素设置固定定位后，它将脱离标准流的控制，始终依据浏览器窗口来定位元素，总是显在浏览器窗口的固定位置。譬如，学院网站中二维码的显示就是固定定位的图像元素。其代码为：上面的代码中，二维码图像以固定定位的方式显示在了离浏览器窗口上方200px，离浏览器右边为0px的位置。该行代码中还用到了z-index属性，下面对该属性进行介绍。33德才兼备 知行合一 9.2.2 元素的定34德才

24、兼备 知行合一 9.2.2 元素的定位6、z-index属性当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。要想调整定位元素的堆叠顺序，可以对定位元素应用z-index属性，其取值可为正整数、负整数和0。z-index的默认属性值为0，取值越大，定位元素在层叠元素中越居上。注意：z-index属性仅对定位元素有效。34德才兼备 知行合一 9.2.2 元素的定35德才兼备 知行合一 9.2.3 元素的overflow属性在9.2.1节中已经提到过overflow属性，利用该属性对父元素设置值为“hidden”时，可以清除子元素浮动对父元素的影响，使父元素的高度适应子元素的高度。但该属性

25、的另外的作用是规范元素内溢出的内容。其基本语法格式如下。选择器overflow:visible|hidden|auto|scroll说明：visible：对元素内溢出内容不做处理，内容可能会超出容器。hidden：溢出内容会被修剪，并且被修剪的内容是不可见的。auto：在需要时产生滚动条，即自适应所要显示的内容。scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。35德才兼备 知行合一 9.2.3 元素的o36德才兼备 知行合一例9-8 overflow属性应用。文件名称为9-8.html。 9.2.3 元素的overflow属性36德才兼备 知行合一例9-8 overf37德才兼备 知

26、行合一关键样式表代码如下。 9.2.3 元素的overflow属性#box width: 200px;height: 100px;background: #2ACBE5;overflow: visible;/*溢出内容显示在元素框之外*/若将overflow属性定义为其它三个值，则浏览效果分别如图9-159-17所示。37德才兼备 知行合一关键样式表代码如下。 38德才兼备 知行合一HTML5+CSS3布局首先将页面在整体上进行分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。常用的HTML5+CSS3布局方式有单列布局、二列布局、三列布局和通栏布局等。网页的主体内容宽度现在一

27、般采用1000到1200像素。下面通过示例分别对常用网页的布局方式进行介绍。 9.2.4 HTML5+CSS3布局38德才兼备 知行合一HTML5+CSS3布39德才兼备 知行合一无序列表三列布局通栏布局 二列布局 单列布局 9.2.4 HTML5+CSS3布局将页面上的块从上到下依次排列，即谓单列布局。例9-9 将页面进行单列布局，效果图如 图9-18所示。文件名：9-9.html。39德才兼备 知行合一无序列表三列布局通栏布40德才兼备 知行合一 9.2.4 HTML5+CSS3布局页面头部导航焦点图内容页面底部/* CSS Document */body margin: 0; paddi

28、ng: 0; font-size: 24px; text-align: center;#header /*页面头部*/ width: 1000px; height: 120px; background-color: #ccc; margin: 0 auto; /*居中显示*/#nav /*导航*/ width: 1000px; height: 30px; background-color: #ccc; margin: 5px auto; /*居中显示，且上下外边距为5px*/#banner /*焦点图*/ width: 1000px; height: 80px; background-colo

29、r: #ccc; margin: 0 auto;搭建HTML结构如下：创建外部样式表，代码如下：注意：通常给块定义ID名称时，都会遵循一些常用的命名规范。示例中的命名便是按照命名规范而起的名字。#content /*内容*/ width: 1000px; height: 300px; background-color: #ccc; margin: 5px auto;#footer /*页面底部*/ width: 1000px; height: 80px; background-color: #ccc; margin: 0 auto;40德才兼备 知行合一 9.2.4 HTML41德才兼备 知行

30、合一无序列表三列布局通栏布局 二列布局 单列布局 9.2.4 HTML5+CSS3布局一列布局虽然统一、有序，但会让人觉得呆板，所以实际网页制作中，会采用二列布局。二列布局实际上是将中间内容分成左、右两部分。例9-10 将页面进行二列布局，效果如图9-19所示。文件名称为9-10.html。41德才兼备 知行合一无序列表三列布局通栏布42德才兼备 知行合一 9.2.4 HTML5+CSS3布局页面头部导航焦点图 左侧内容 右侧内容页面底部搭建HTML结构如下：从图可以看出，中间内容块被分成了左、右两部分，布局时应将左、右两个块放在中间的大块中，然后对左、右两个块分别设置浮动。42德才兼备 知行

31、合一 9.2.4 HTML43德才兼备 知行合一 9.2.4 HTML5+CSS3布局body margin: 0;padding: 0;font-size: 24px;text-align: center;#header /*页面头部*/width: 1000px;height: 120px;background-color: #ccc;margin: 0 auto;#nav /*导航*/width: 1000px;height: 30px;background-color: #ccc;margin: 5px auto;#banner /*焦点图*/width: 1000px;height:

32、 80px;background-color: #ccc;margin: 0 auto;#content /*内容*/width: 1000px;height: 300px;margin: 5px auto;overflow: hidden; /*清除子元素浮动对父元素的影响*/#left /*左侧内容*/width: 290px;height: 300px;background-color: #ccc;float: left; /*左浮动*/#right /*右侧内容*/width: 700px;height: 300px;background-color: #ccc;float: righ

33、t; /*右浮动*/#footer /*页面底部*/width: 1000px;height: 80px;background-color: #ccc;margin: 0 auto;创建外部样式表，代码如下：43德才兼备 知行合一 9.2.4 HTML44德才兼备 知行合一 9.2.4 HTML5+CSS3布局注意：上面代码中，右边的块#right块设置了右浮动，实际上也可以设置左浮动，但设置左浮动的话，就需要设置margin-left属性使其与左边的块#left间隔一定的距离，最终效果是一样的。读者可以自行尝试。44德才兼备 知行合一 9.2.4 HTML45德才兼备 知行合一无序列表三列布

34、局通栏布局 二列布局 单列布局 9.2.4 HTML5+CSS3布局对于内容比较多的网站，有时需要采用三列布局。三列布局实际上是将中间内容分成左中右三部分。例9-11 将页面进行三列布局，效果如图9-20所示。文件名称为9-11.html。45德才兼备 知行合一无序列表三列布局通栏布46德才兼备 知行合一 9.2.4 HTML5+CSS3布局页面头部导航栏焦点图 左侧内容 中间内容 右侧内容页面底部搭建HTML结构如下：从图中可以看出，中间内容块被分成了左、中、右三部分，布局时应将左、中、右三个小块放在中间的大块中，然后对左、中、右三个块分别设置浮动。46德才兼备 知行合一 9.2.4 HTM

35、L47德才兼备 知行合一 9.2.4 HTML5+CSS3布局body margin: 0;padding: 0;font-size: 24px;text-align: center;#header /*页面头部*/width: 1000px;height: 120px;background-color: #ccc;margin: 0 auto;#nav /*导航*/width: 1000px;height: 30px;background-color: #ccc;margin: 5px auto;#banner /*焦点图*/width: 1000px;height: 80px;background-color: #ccc;margin: 0 auto;#content /*内容*/width: 1000px;height: 300px;margin: 5px auto;overflow: hidden; /*清除子元素浮动对父元素的影响*/#left /*左侧内容*/width: 200px;height: 300px;background-color: #ccc;f