HTML5+CSS3网页设计基础 第七章 网页布局设计

HTML5+CSS3网页设计基础
第7章 网页布局设计
第2页
本章的学习目标



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


2．相对定位 relative 相对定位是将元素相对于它本身的位置进行定位。对元素 设置相对定位后，可以通过边偏移属性改变元素的位置， 但是它在文档流中的位置仍然保留。 参考示例：7-2-7.html
HTML5+CSS3网页设计基础
HTML5+CSS3网页设计基础
第7章 网页布局设计
第27页
7.2.6 overflow
当盒子内的元素超出盒子自身的大小时，内容就会溢出， 规范溢出内容的显示方式，要使用overflow属性，其基本 语法格式如下。 overflow: visible| hidden| auto| scroll 参数： visible：溢出内容不会被修剪，会呈现在元素框之外(默认值) hidden：溢出内容会被修剪，并且被修剪的内容是不可见的 auto：在需要时产生滚动条，即自适应所要显示的内容。 scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。 参考示例：7-2-11.html
HTML5+CSS3网页设计基础
第7章 网页布局设计
第7页
7.1.3 页面结构标签

1．header元素
<header>标签用于定义文档的页眉（介绍信息），可以包 含所有通常放在页面头部的内容，一般用来放置整个页面或 页面内的一个内容区块的标题，也可以包含网站Logo图片 、搜素表单或者其他相关内容。其基本语法格式如下。 <header> <hn>网页主题</hn> … </header>
HTML5+CSS3网页设计基础
第7章 网页布局设计
第11页
7.1.3 页面结构标签
5．section元素 section元素用于对网站或应用程序中页面上的内容 进行分块，一个section元素通常由内容和标题组成 。 参考示例： 7-1-3.html

HTML5+CSS3网页设计基础
第7章 网页布局设计
HTML5+CSS3网页设计基础
第7章 网页布局设计
第10页
7.1.3 页面结构标签

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

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



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

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

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


【案例展示】使用盒模型的定位与浮动知识制作首页热销 产品布局页面。 【知识要点】定位属性、定位方式、浮动与清除浮动。 【学习目标】掌握使用盒模型的定位与浮动实现各种排版 需要
HTML5+CSS3网页设计基础
第7章 网页布局设计
第26页
7.2.5 定位方式

5．z - index层叠等级属性 当对多个元素同时设置定位时，定位元素之间有可能会发 生重叠，在CSS中，要想调整重叠定位元素的堆叠顺序， 可以对定位元素应用z-index层叠等级属性，其取值可为正 整数、负整数和0。z-index的默认属性值是0，取值越大， 定位元素在层叠元素中越居上。
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章 网页布局设计
第20页
7.2.4 定位属性
2．边偏移 定位模式（positon）仅仅用于定义元素以哪种方式定位，并 不能确定元素的具体位置。在CSS中，通过边偏移属性top、 bottom 、left或right来精确定义定位元素的位置，具体解释 如表7-2所示。
HTML5+CSS3网页设计基础
第7章 网页布局设计
第16页
7.2.2 元素的浮动


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

2．nav元素
nav元素用于定义导航链接，是HTML5新增的元素，该元 素可以将具有导航性质的链接归纳在一个区域中，使页面元 素的语义更加明确。其中的导航元素可以链接到站点的其他 页面，或者当前页的其他部分。 一个HTML页面中可以包含多个nav元素，作为页面整体 或不同部分的导航。
HTML5+CSS3网页设计基础
第7章 网页布局设计
第3页
主要内容
7. 1 网页布局标签 7. 2 浮动与定位
7. 3 典型的CSS布局
7. 4 实训 7. 5 本章小结
HTML5+CSS3网页设计基础
第7章 网页布局设计
第4页
7.1 网页布局标签
本节主要内容：

布局标签+CSS布局的优点


页面分块
第7章 网页布局设计
第24页
7.2.5 定位方式


3．绝对定位 absolute 绝对定位是将元素依据最近的已经定位（绝对、固定或相 对定位）的父元素进行定位,若所有父元素都没有定位，则 依据body根元素（浏览器窗口）进行定位。 参考示例：7-2-8.html, 7-2-9.html
HTML5+CSS3网页设计基础
第7章 网页布局设计
HTML5+CSS3网页设计基础
第19页
7.2.4 定位属性
1．定位模式 在CSS中， position属性用于定义元素的定位模式，其基本 语法格式如下: position: static| relative| absolute| fixed 参数： static：默认值。没有定位，元素出现在正常的流中。 relative：相对定位，相对于其原文档流的位置进行定位。 absolute：绝对定位，相对于其上一个已经定位的父元素进 行定位。 fixed：绝对定位，相对于浏览器窗口进行定位。
第7章 网页布局设计
第25页
7.2.5 定位方式



4．固定定位 fixed 固定定位是绝对定位的一种特殊形式，它以浏览器窗口作 为参照物来定义网页元素。 当对元素设置固定定位后，它将脱离标准文档流的控制， 始终依据浏览器窗口来定义自已的显示位置。不管浏览器 滚动条如何滚动，也不管浏览器窗口的大小如何变化，该 元素都会始终显示在浏览器窗口的固定位置。 参考示例：7-2-10.html
页面结构标签
HTML5+CSS3网页设计基础
第7章 网页布局设计
第5页
7.1.1 布局标签+CSS布局的优点

Div用于搭建网结结构，CSS用于创建网站表现，将表现 与内容分离，便于大型网站的协作开发和维护。 缩短了网站的改版时间，设计者只要简单地修改CSS文件 就可以轻松地改版网站。 强大的字体控制和排板能力，使设计者能够更好地控制页 面布局。 使用只包含结构化内容的HTML代替嵌套的标签，提高搜 索引擎对网页的索引效率。 用户可以将许多网页的风格格式同时更新。
第7章 网页布局设计
HTML5+CSS3网页设计基础
第17页
7.2.1 元素的浮动
参考示例： 7-2-1.html， 7-2-2.html， 7-2-3.html, 7-2-4.html

HTML5+CSS3网页设计基础
第7章 网页布局设计
第18页
7.2.3 清除浮动



在页面布局时，当容器的高度设置为auto且容器的内容中 有浮动元素时，容器的高度不能自动伸长以适应内容的高 度，使得内容溢出到容器外面导致页面出现错位，这个现 象被称 为浮动溢出。为了防止这个现象的出现而进行的CSS处理 ，就叫做清除浮动。 语法：clear：none|left|right|both 参数：none允许两边都可以有浮动对象，both不允许有浮 动对象，left不允许左边有浮动对象，right不允许右边有浮 动对象 参考示例：7-2-5.html
HTML5+CSS3网页设计基础
第7章 网页布局设计
第22页
7.2.5 定位方式

1．静态定位 static 所谓静态位置就是各个元素在HTML文档流中默认的位置 静态定位是元素的默认定位方式，position属性的取值为 satic。 在静态定位状态下，无法通过边偏移属性（top、bottom 、left或right）来改变元素的位置。 参考示例：7-2-6.html
第12页
7.1.3 页面结构标签

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

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


使用布局标签+CSS布局页面时，首先将页面在整体上用 页面结构布局标签分块，然后对各个块进行CSS定位，最 后再在各个块中添加相应的内容。 div以及新增的页面结构布局标签是可以被嵌套的，可以 实现更为复杂的页面排版。 参考示例：7-1-1.html, 7-1-2.html

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

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