《网页设计案例教程》ch04CSS美化及布局页面.ppt

第4章 CSS美化及布局页面  学习要点 掌握CSS样式美化页面技巧 理解Div与AP Div区别 掌握AP Div在页面中的应用 掌握CSS+Div页面布局 4.1 使用CSS美化页面 使用CSS＋Div布局页面主要优点有如下： 结构清晰，容易被搜索引擎搜索到。 缩短改版时间，只要修改CSS文件就可以重新设计页面。 表现与内容相分离，将设计部分分离出来放一个独立的样式文件中。 可方便将网页的风格格式同时更新。 CSS盒子模型 假设外边距上下边距为5个像素，左右外边距为10像素，内边距为5 个像素，无边框。如果希望这个盒子模型框达到120个像素宽，60像素高，就需要将内容的宽度设置为90像素，高度设置为40像素 margin属性 margin属性用于设置盒子的外边距，属性值的个数可设为1到4个，语法格式如下： margin:5px; 属性值只有一个时代表上、下、左、右外边距均为5px。 margin:5px 10px; 属性值有二个时，第一个值代表上、下边距值，第二个值代表左、右外边距值。 margin:5px 10px 20px; 属性值有三个时，第一个值代表上边距，第二个值代表左、右外边距，第三个值代表下边距值。 margin:5px 10px 15px 20px; 属性值有四个时，依次代表上、右、下、左边距值。 当边距值设为auto 时，表示宽度自动适应