CSS无难事-浮动float right的应用和li的高度问题.docx

更多 新闻中心 2011-06-20 承接美莱氏时尚网网站承接美莱氏时尚网网站承接美莱氏时尚网网站承接美莱氏时尚网网站承接美莱氏时尚网网站 2011-06-20 承接美莱氏时尚网网站 2011-06-20 承接美莱氏时尚网网站 2011-06-20 承接美莱氏时尚网网站 2011-06-20 承接美莱氏时尚网网站 2011-06-20 承接美莱氏时尚网网站 2011-06-20 承接美莱氏时尚网网站 这是相关的CSS代码：/*start 新闻中心*/.newsCen .hd height:29px; background:url(./images/portlet_bg.gif) repeat-x; color:#000; .newsCen .hd a display:block; float:right; color:#000; padding:9px 15px 0px 0px; font-size:13px; .newsCen .hd a:hover color:#006; text-decoration:underline;color:#006; text-decoration:underline;.newsCen .hd font, .newsCen .hd img display:block; float:left;.newsCen .hd img padding:1px 0px 0px 4px;.newsCen .hd font padding:9px 0px 0px 3px; font:bold 13px 宋体;.newsCen width:358px; height:210px; margin-left:10px;.newsCen .bd width:340px; height:155px; padding:12px 5px 0px 5px;.newsCen .bd li height:23px; font-size:0px; text-indent:18px; background:url(./images/li_dian.gif) 8px 7px no-repeat; overflow:hidden; line-height:23px; .newsCen .bd li a width:260px; font-size:12px; color:#000; overflow:hidden;.newsCen .bd li a:hover color:#ea0706; text-decoration:underline;.newsCen .bd li span float:right; font:normal 12px 宋体; color:#666; line-height:19px;.newsCen .bd .newIco position:absolute; margin-left:8px; display:inline;/*end 新闻中心*/整观这个CSS结构，还有进一步优化的地方。这个样式定义，遵循雅虎的hd、bd原则。html结构中，hd部分有不合理的地方，比如，头部模块的img小图标就不应该这样写死在页面，通过img方式引入不明智。今 天所要谈论的是bd部分的内容哦。注意bd部分的li标签中，包括了一个span标签，存放日期。大家发现 span的排序比li的a标签要前，而页面显示却日期在a标签内容的后面哦。这是因为span标签的定义了float:right;属性，而a标签没有定 义任何的浮动属性。效果就是这样起作用的。另外，在 .newsCen .bd li 定义了li元素的高度和文字大小为0。行高line-height刚好为li的高度值，就要li里面的元素起到垂直居中的作用。 比如定义一个div容器的高度为50px，那么这个div里面的文字如果想要垂直居中，那么定义line-height行高的值为50px即可。这里这样 做的目的是，固定li元素的高度和行高，兼容各个浏览器。如果li的高度不固定，用padding或者margin定义相邻li元素的间距的话，不同浏览 器会出现不同的间距哦，比如ie6，ie7和火狐间距就不同，要写很多的CSS hack来针对不同浏览器定义，这样就麻烦了。这里定义了li的文字大小为0，而在a标签再重新定义字体大小，用意是为了li内在元素的统一。看一下效果图，大家发现第一条记录的宽度特别长，而且被截断了，原因是当文字title太长的时候，固定li中的a标签的宽度，用overflow:hidden;隐藏超出的内容。这里没有加.的截断痕迹，这不是本文讨论范畴哦。font-weight:normal; font-size:12px; font-family:宋体; 的简写为 font:normal 12px 宋体; 同理，padding-top:3px; padding-right:4px; padding-bottom:6px; padding-left:8px; 的简写为 padding:3px 4px 6px 8px; 表示4个参数分别是上右下左的顺时针方向上的边距。总结：1. 在文章类型的title排版中，将span存放的日期内容，放在a标签的前面，span定义为float:right; 页面结果就会显示出a标签内的内容在前，span标签的内容在后的结果。2. 大量使用.hd、.bd的雅虎命名规则，可以减少css文件中伪类的命名次数，比如.newsList .hd, .product .hd 。等，相同的结构，定义的书写可以合并。3. 文章的a标签的最大宽度最好固定一下，如果你用css截断的技术，也是需要固定长度和overflow:hidden参与的。这样做的目的是碰到较长的title时，隐藏超出的内容，让模块外观破坏减少到最低程度。4. 排版li结构的文字内容时，固定一下li的高度和行高，可以省去一些li相邻元素间距定义的麻烦，如果用padding或者margin定义li元