3Div+CSS布局.ppt

DIV+CSS布局 要点回顾 * 1.什么是CSS？ 2.CSS基本语法结构？ 3.CSS样式有哪几种类型？ 4.CSS选择符有哪几种类型？ 5.创建、编辑 和应用CSS样式表 * DIV+CSS布局 1 常用基本布局类型 2 3 4 布局元素DIV TIPS * 在符合Web标准的网页布局中，首选的就是DIV元素。而DIV元素在XHTML中最大的作用，就是在布局设计时作为其他对象的容器。 DIV标签属于块级元素，每一个DIV标签都独立的占据一行，要使指定的几个DIV标签列为一行，需要在CSS中对其float属性进行定义。 3.1　布局元素DIV * 是最简单、最基本的布局类型，也是各种布局类型的基础。 1. 单行单列式固定宽度布局： 　 3.2　常用基本布局类型 #single{ width:300px; height:200px; margin:0 auto; color:#FF0; text-align:center; background:#2A1FAA; } * 运行效果： 　 3.2　常用基本布局类型 * 与前者最大的不同就是它会随着窗口的宽度而改变自身的宽度。 2. 单行单列式自适应宽度布局： 　 3.2　常用基本布局类型 #single{ width:75%; height:200px; margin:0 auto; color:#FF0; text-align:center; background:#2A1FAA; } * 运行效果： 　 3.2　常用基本布局类型 * 可以看作是两个单行单列布局的有机组合，运行效果如下： 3. 单行双列式固定宽度布局： 　 3.2　常用基本布局类型 * 如果单纯地修改固定宽度值为百分比，运行效果： 4. 单行双列式自适应宽度布局： 　 3.2　常用基本布局类型 * 分析原因：IE依据四舍五入的原则计算宽度。 解决方法：将#right的clear属性设置为right。运行效果： 　 3.2　常用基本布局类型 * 通常左右两侧元素样式相同，中间较宽，设计者可依据需要来定义。运行效果： 5. 单行三列式固定宽度布局： 　 3.2　常用基本布局类型 * 运行效果： 6. 单行三列式自适应宽度布局： 　 3.2　常用基本布局类型 * 下图可以看作是三个单行单列式布局，中间的一行嵌套了一个单行三列式布局。运行效果： 7. 多种布局类型的综合运用： 　 3.2　常用基本布局类型 * TIPS 使整个网页居中的方法： 将最外层ID为main的margin属性设置为0 auto；即上下外边距为0，左右外边距为自动值。 * TIPS 2. 常用尺寸标准： 由IAB(Internet Advertising Bureau，国际广告局 )1997年推出一系列网络广告宣传物的标准尺寸。 本节要点 掌握常用布局类型 掌握布局元素DIV的常用属性设置 能够熟练运用DIV嵌套进行整个页面布局 * 结 束