1网页样式(二)

总结
17 / 19
<div>标签“干净”，网页更小，打开更快 结构清晰，便于维护，利于SEO <div>标签更灵活，更好控制页面元素 样式与结构相分离，更好的结构重组 表现与内容相分离，利于分工协作
6 / 19
如何进行DIV+CSS网页布局
7 / 19
当当网首页
分为：
头部
顶部会员信息 LOGO 导航 …
主体部分
左中右三栏
….
脚部
快速链接栏 版权信息
案例分析
8 / 19
构造网页结构
table表格布局的方式
一列三行
DIV+CSS布局（推荐）
三个DIV容器
div id=“main”
div id=“footer”
演示示例： 网页基本结构
总体把握
div id=“header”
9 / 19
第二单元 《静态网页制作》
网页样式（二）
回顾和作业点评
CSS的引入方式有哪些？ CSS的浮动方式有哪些？定位方式呢？
2 / 19
本课任务
任务1：装饰网页的头部搜索部分
3 / 19
学完本次课程后，你能够：
掌握如何进行网页布局 了解网页布局的一些原则和注意细节
本课目标
wenku.baidu.com
4 / 19
如何进行网页布局
12 / 19
完善细节
对结构细节进行完善
采用图片处理工具（如Photoshop）确定元素的大小 和位置
利用盒子模型调整元素之间的位置，精确到1个像素
原则上是与UI效果图一致
对内容有预判处理
内容超出范围的自动隐藏或换行 图片大小或无图片情况处理 尽量采用自动适应的方式处理
13 / 19
自动网页居中代码
语法
选择器{ width：值； margin-left : auto; margin-right: auto;
}
网页自动居中
注意： （1）元素必须为块元素 （2）元素必须设定其宽度 （3） 元素的上下边距可自定义
演示示例： 网页结构自动居中
10 / 19
使块元素水平并排显示
语法
选择器-1{ width：值； float: left|right;
TABLE表格布局
优点
简单易懂、位置很规矩
缺点
加载速度慢、结构固定不灵活、不利于维护和SEO
框架布局
多页面加载在同一页面，如<iframe> 标签
DIV+CSS方式布局
HTML结构：<div>标签
目前最为流行、最合 理的布局方式
CSS样式：float浮动和盒子模型
5 / 19
为什么采用DIV+CSS
} 选择器-2{
width：值； float: left|right; } 选择器-3 {…
演示示例： 浮动布局
浮动布局
11 / 19
分区实现
分别实现每个区域的内容
重复对大区块下进行切分布局
浮动布局 自动居中布局 定位布局
相对定位属性和绝对定位属性相结合
确定采用适合的HTML标签
遵循语义性标签优先原则 结构性容器一般采用<DIV>标签 小图标、小部件一般采用内联元素<SPAN>标签 列表形式的内容一般采用<UL>、<OL>标签 表单、表格标签元素有针对性使用 合理运用<IMG>标签或背景图片
对制作的网页进行优化处理
多采用类选择器方式，减少CSS代码 压缩CSS文件代码，减小CSS文件大小 减少图片的请求 减少外部文件的引用
性能优化
14 / 19
需求说明
装饰网页的头部导航部分 要求：
采用DIV+CSS方式布局 CSS采用外部引用文件方式
案例分析
15 / 19
问题
网页布局的方式有哪些？ 如何使得网页总体居中？