div+css布局网页技巧.ppt

Chapter 回顾与作业点评 常用的HTML标签有哪些？ 表格布局适用于什么场合？ 预习检查 简述XHTML使用的基本规范 什么是盒子模型？ 盒子属性包括哪些？ 如何设置浮动？ 如何清除浮动？ 本章任务 制作一个符合W3C相关标准的页面 完成贵美首页的整体布局 本章目标 掌握如何开发符合W3C标准的Web页 使用盒子模型实现DIV+CSS整体布局 什么是W3C标准 W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护Web行业标准 W3C标准包括一系列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：DOM 页面交互方面：ECMAScript …… W3C提倡的Web结构4-1 XHTML负责内容组织 div span p h1，h2，h3，h4，h5，h6 ol，ul dl-dt-dd W3C提倡的Web结构4-2 CSS负责页面样式 字体大小 字体颜色 背景 显示位置 ... W3C提倡的Web结构4-3 W3C提倡的Web结构4-4 XHTML使用的基本规范 Web页面开发注意问题 淘汰的标签 img /标签的alt属性 样式和内容分离 表单的name和id 使用DIV+CSS布局 页面的兼容性 小结 什么是符合W3C标准的页面？ XHTML使用的基本规范是什么？ WEB页面开发需要注意哪些问题？ 网页实际上是由一个个盒子模型组成的 盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left border属性 border-color border-width border-style padding属性 padding padding-top padding-right padding-bottom padding-left 如何利用盒子模型实现如下首页的布局？ 总结 盒子模型有哪些属性？各属性又分别包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？ 作业 参考网站： / / border边框 border-top border-right border-bottom border-left border border-left … 修饰属性 四个方向 缩写形式 border属性 每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置 border-style: none; border: 1px solid red; border-right: 5px dotted blue; 以下属性各代表什么含义？ padding内边距  padding-left : 5px; padding: 5px 10px 20px 40px; padding: 5px 10px; 四个边可以一次设置，也可以分别设置 padding 以下属性各代表什么含义？ 简单首页布局2-1 顶部 主体 底部 #container { width:980px; margin:0px auto; } #header { width:100%; height:150px; border:1px #F00 solid; } #main { width:100%; height:400px; border:1px #F00 solid; } #footer { width:100%; height:100px; border:1px #F00 solid; } 简单首页布局2-2 div id=container div id=header顶部（header）/div div id=main主体部分（main）/div div id=footer底部（footer）/div /div 页面HTML结构 整体内容居中显示 演示示例3：贵美首页布局 div id=container div id=header顶部（header）/div div id=main div class=cat商品分类(cat)/div div class=content内容(content)/div div class=sidebar右侧(sidebar)/div