2013年9月5日最新DIV+CSS基础培训课件.pptVIP

4.2 布局中的主要样式 font line-height color margin padding border text-align background width Height float Clear display 1、字体：font, font-size, font-family, font-weight, text-decoration, line-height A. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。B. font-size定义文字的大小。C. font-family定义字体。D. font-weight定义文字的粗细。E. text-decoration定义文字的装饰。F. line-height定义行高。 4.2 布局中的主要样式 2、文本：text-indent, vertical-align, text-align A. text-indent，设置对象的缩进。B. vertical-align，设置对象的上下对齐方式。C. text-align，设置对象的左右对齐方式。  4.2 布局中的主要样式 3、背景：background, background-color, background-image, background-position, background-repeat A. background定义背景的一个复合属性。和上面的font一样，可以把后面这几个属性的值都放在font里面用。B. background-color定义的是背景的颜色。C. background-image定义的是背景的图片。D. background-position定义背景的位置。E. background-repeat定义背景的是否平铺。 4.2 布局中的主要样式 4、尺寸：width, heightA. width定义对象的宽度。B. height定义对象的高度。 4.2 布局中的主要样式 伪类：:link, :visited, :hover, :active :link定义链接未被点击时候的样式。:visited定义链接点击之后的样式。:hover定义鼠标移动到链接上的样式。:active定义链接被激活时候的样式。伪类只讲这四个，因为这四个用的最多，而且很多人容易出错，这里强调一个地方，书写顺序。在CSS里面写这四个伪类的时候，就按上面的顺序来写，不要颠倒顺序，否则可能达不到我们想要的效果。 4.2 布局中的主要样式 4.3 浮动与清除 4.3.1 为什么需要float浮动属性 float属性脱离常规文档流而表现为向右或向左浮动 float属性的取值 right left none .cat, .sidebar { float:left; width:20%; height:100%; } .content { float:left; width:60%; height:100%; } 4.3 浮动与清除 4.3.2 为什么需要clear清除属性 style type=”text/css” !– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} . clear{clear:both;} – /style div id=”layout” div id=”left”Left/div div id=”right”Right/div p class=”clear” /p /div 5.1 实例 6.1 Div+CSS常见错误总结 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 2. 检查CSS是否正确 3. 确定错误发生的位置 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属性 　　IE下如果对