第7章 网页布局设计
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计基础
第7章 网页布局设计
第1页
本章概述

传统网页是采用表格进行布局的，但这种方式已 经逐渐淡出设计舞台，取而代之的是符合Web标 准的DV+CSS布局方式，HTML5又新增了网页结 构布局标签，方便页面布局设计。本章将详细介 绍网页布局技术及实际应用。
HTML5+CSS3网页设计基础
第7章 网页布局设计
第7页
7.1.3 页面结构标签

1．header元素
<header>标签用于定义文档的页眉（介绍信息），可以包 含所有通常放在页面头部的内容，一般用来放置整个页面或 页面内的一个内容区块的标题，也可以包含网站Logo图片 、搜素表单或者其他相关内容。其基本语法格式如下。 <header> <hn>网页主题</hn> … </header>
HTML5+CSS3网页设计基础
第7章 网页布局设计
第3页
主要内容
7. 1 网页布局标签 7. 2 浮动与定位
7. 3 典型的CSS布局
7. 4 实训 7. 5 本章小结
HTML5+CSS3网页设计基础
第7章 网页布局设计
第4页
7.1 网页布局标签
本节主要内容：

布局标签+CSS布局的优点


页面分块
HTML5+CSS3网页设计基础
第7章 网页布局设计
第26页
7.2.5 定位方式

5．z - index层叠等级属性 当对多个元素同时设置定位时，定位元素之间有可能会发 生重叠，在CSS中，要想调整重叠定位元素的堆叠顺序， 可以对定位元素应用z-index层叠等级属性，其取值可为正 整数、负整数和0。z-index的默认属性值是0，取值越大， 定位元素在层叠元素中越居上。
HTML5+CSS3网页设计基础
第7章 网页布局设计
第10页
7.1.3 页面结构标签

4．aside元素
<aside>标签用来定义当前页面或者文章的附属信息部分。
aside元素的用法主要有两种，一种是被包含在article元素 中作为主要内容的附属信息部分，其中的内容可以是与当前 文章有关的相关资料、名次解释等。另一种是在article元素 之外使用作为页面或站点全局的附属信息部分。最典型的是 侧边栏，其中的内容可以使友情链接，博客中的其它文章列 表、广告单元等。
HTML5+CSS3网页设计基础
第7章 网页布局设计
第9页
7.1.3 页面结构标签

3．article元素
article元素代表文档、页面或者应用程序中与上下文相关的 独立部分，该元素经常被用于定义一篇日志、一条新闻或用 户评论等。article元素通常使用多个section元素进行划分 ，一个页面中article元素可以出现多次。
HTML5+CSS3网页设计基础
第7章 网页布局设计
第13页
7.1.3 页面结构标签


7．figure和figcaption标签
在HTML5中，figure标签用于定义独立的流内容（图像、 图表、照片、代码等），一般指一个单独的单元。 figure元素的内容应该与主内容相关，但如果被删除，也 不会对文档流产生影响。 figcaption标签用于为figure元素组添加标题，一个 figure元素内最多允许使用一个figcaption元素，该元素 应该放在figure元素的第一个或者最后一个子元素的位置 。 参考示例7-1-4.html
HTML5+CSS3网页设计基础
第7章 网页布局设计
第16页
7.2.2 元素的浮动


浮动（float）是使用率较高的一种定位方式。浮动元素可 以向左或向右移动，直到它的外边距边缘碰到包含块内边 距边缘或另一个浮动元素的外边距边缘为止。float属性定 义元素 在哪个方向浮动，任何元素都可以浮动，浮动元素会变成 一个块状元素。 语法：float：none| left| right 参数：none为对象不浮动，left为对象浮在左边，right为 对象浮在右边。 说明：该属性的值指出了对象是否浮动及如何浮动。
HTML5+CSS3网页设计基础
第7章 网页布局设计
第2页
本章的学习目标



理解布局标签+CSS的页面布局方式，掌握对页面进行分 块的技术 掌握结构元素的使用，使页面分区更明确 理解元素的浮动，能够为元素设置浮动样式 熟悉清除浮动的方法，使用不同方法清除浮动 掌握元素的定位，能够为元素设置常见的定位模式 掌握典型的CSS布局，能够使用CSS布局样式。
第12页
7.1.3 页面结构标签

6．footer元素
<footer>标签用于定义一个页面或者区域的底部，它可以包 含所有通常放在页面底部的内容。在html5开发中使用 footer标签时，把它当作普通div标签对待即可，只不过一般 用于网站底部布局。 一个页面中可以包含多个footer元素，但最好只使用一次 footer即可。同时，也可以在article元素或者section元素中 添加footer元素。

HTML5+CSS3网页设计基础 第7章 网页布局设计
第20页
7.2.4 定位属性
2．边偏移 定位模式（positon）仅仅用于定义元素以哪种方式定位，并 不能确定元素的具体位置。在CSS中，通过边偏移属性top、 bottom 、left或right来精确定义定位元素的位置，具体解释 如表7-2所示。

HTML5+CSS3网页设计基础
第7章 网页布局设计
第21页
7.2.4 定位属性

表7-1边偏移设置方式
边偏移属性 描述 顶端偏移量，定义元素相对于其父元素上边线的距离 top 底部偏移量，定义元素相对于其父元素下边线的距离 bottom 左侧偏移量，定义元素相对于其父元素左边线的距离 left 右侧偏移量，定义元素相对于其父元素右边线的距离 right
第7章 网页布局设计



HTML5+CSS3网页设计基础
第14页
7.2 浮动与定位
本节主要内容：

案例分析 元素的浮动 清除浮动 定位属性 定位方式 Overflow

案例制作
第7章 网页布局设计
HTML5+CSS3网页设计基础
第15页
7.2.1 案例分析


【案例展示】使用盒模型的定位与浮动知识制作首页热销 产品布局页面。 【知识要点】定位属性、定位方式、浮动与清除浮动。 【学习目标】掌握使用盒模型的定位与浮动实现各种排版 需要
第7章 网页布局设计
HTML5+CSS3网页设计基础
第19页
7.2.4 定位属性
1．定位模式 在CSS中， position属性用于定义元素的定位模式，其基本 语法格式如下: position: static| relative| absolute| fixed 参数： static：默认值。没有定位，元素出现在正常的流中。 relative：相对定位，相对于其原文档流的位置进行定位。 absolute：绝对定位，相对于其上一个已经定位的父元素进 行定位。 fixed：绝对定位，相对于浏览器窗口进行定位。
第7章 网页布局设计
第24页
7.2.5 定位方式


3．绝对定位 absolute 绝对定位是将元素依据最近的已经定位（绝对、固定或相 对定位）的父元素进行定位,若所有父元素都没有定位，则 依据body根元素（浏览器窗口）进行定位。 参考示例：7-2-8.html, 7-2-9.html
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计基础
第7章 网页布局设计
第22页
7.2.5 定位方式

1．静态定位 static 所谓静态位置就是各个元素在HTML文档流中默认的位置 静态定位是元素的默认定位方式，position属性的取值为 satic。 在静态定位状态下，无法通过边偏移属性（top、bottom 、left或right）来改变元素的位置。 参考示例：7-2-6.html
HTML5+CSS3网页设计基础
第7章 网页布局设计
第23页
7.2.5 定位方式

பைடு நூலகம்
2．相对定位 relative 相对定位是将元素相对于它本身的位置进行定位。对元素 设置相对定位后，可以通过边偏移属性改变元素的位置， 但是它在文档流中的位置仍然保留。 参考示例：7-2-7.html
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计基础
第7章 网页布局设计
第6页
7.1.2 页面分块


使用布局标签+CSS布局页面时，首先将页面在整体上用 页面结构布局标签分块，然后对各个块进行CSS定位，最 后再在各个块中添加相应的内容。 div以及新增的页面结构布局标签是可以被嵌套的，可以 实现更为复杂的页面排版。 参考示例：7-1-1.html, 7-1-2.html
HTML5+CSS3网页设计基础
第7章 网页布局设计
第11页
7.1.3 页面结构标签
5．section元素 section元素用于对网站或应用程序中页面上的内容 进行分块，一个section元素通常由内容和标题组成 。 参考示例： 7-1-3.html