1.网页样式(二)素材.ppt

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