写到这里回看下,顺带改了改标题变成《这将是一场革命》系列的第二篇关于CSS的文章算了。上面说完不对的,下面给大家看看一个我最近刚接手的一个新版项目代码段:
HTML片断:
<div id="index_news" class="mode"> <h3 class="title">公益新闻</h3> <div class="content"> <ul> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> <li><a href="#">新闻标题,新闻标题,新闻标题,新闻标题</a></li> </ul> </div> <a class="more" href="#">更多</a> </div>
CSS片断:
.mode{ position:relative; float:left; font-size:12px; } .mode h3.title, .mode h4.title{ color:#234C00; padding:5px 10px; font-size:14px; } .mode .more{ top:5px; right:10px; font-size:12px; color:#4282ab; position:absolute; } .mode .content{ clear:both; } .mode .content:after { content:""; display:block; height:0; line-height:0; clear:both; visibility:hidden; } #index_news.mode, #index_bbs.mode, #index_area.mode{ background:url(small_gray_grid.png) repeat-y -400px bottom; width:200px; margin:5px 0 5px 5px; } #index_news.mode h3.title, #index_bbs.mode h3.title{ background:url(small_gray_grid.png) no-repeat -200px top; } #index_news.mode .content, #index_bbs.mode .content, #index_area.mode .content{ background:url(small_gray_grid.png) no-repeat -600px bottom; display:table; }
大家可以看到模块化思想的优势在于哪:
- 可以半自动化的取用当前已有的模块来节省代码开发时间以及精力。
- 可以高度自由化的适应任何产品经理、任何老板的不同变态需求。
- 任何关于表现上面的修改不需要动用到开发人员,不需要功能测试。
- CE数据监测绑定到id,不需要重新调整接口。
- 每个人担任单个模块的快速迭代开发。
另外就代码而言。标题就是标题,内容就是内容;总不会那种歪曲事实、自己打自己嘴巴的状态。
引用内容: 我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。就好像以前师傅招收学徒一样,能力和慧根属其次,人品首当其冲。 我以为,XHTML好比一个人的本质,CSS好比人的处事方式和态度,JS好比人做事的行为以及作风。三者的分离再加上些周边的SEO、人机交互也就是我们所说的网站重构,也就是一个很不错的人。之前总是有一部分人认为CSS就是网站的最主要的元素,其实自然而然的也就代表了一种人生观。的确,一个人没有好的处事方式和态度很难在现在的社会很好的存活;但是这个处事的方式和态度位置过于偏重了,就成了一个善于欺骗、做事不择手段的人。
这个是一直想说的,有了CSS你可以将左右顺序变成右左顺序,他就是一个网页中的魔术师。你总不能把他乱用,去成了一个善于欺骗、做事不择手段的人。
原文:http://www.twinsenliang.net/skill/20081129.html
本文链接:http://www.blueidea.com/tech/web/2009/6479.asp
出处:twinsenliang.net
责任编辑:bluehearts
上一页 语义化单单的限定在html么? [1] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|