寫(xiě)到這里回看下,順帶改了改標(biāo)題變成《這將是一場(chǎng)革命》系列的第二篇關(guān)于CSS的文章算了。上面說(shuō)完不對(duì)的,下面給大家看看一個(gè)我最近剛接手的一個(gè)新版項(xiàng)目代碼段:
HTML片斷:
<div id="index_news" class="mode"> <h3 class="title">公益新聞</h3> <div class="content"> <ul> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li> <li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</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; }
大家可以看到模塊化思想的優(yōu)勢(shì)在于哪:
- 可以半自動(dòng)化的取用當(dāng)前已有的模塊來(lái)節(jié)省代碼開(kāi)發(fā)時(shí)間以及精力。
- 可以高度自由化的適應(yīng)任何產(chǎn)品經(jīng)理、任何老板的不同變態(tài)需求。
- 任何關(guān)于表現(xiàn)上面的修改不需要?jiǎng)佑玫介_(kāi)發(fā)人員,不需要功能測(cè)試。
- CE數(shù)據(jù)監(jiān)測(cè)綁定到id,不需要重新調(diào)整接口。
- 每個(gè)人擔(dān)任單個(gè)模塊的快速迭代開(kāi)發(fā)。
另外就代碼而言。標(biāo)題就是標(biāo)題,內(nèi)容就是內(nèi)容;總不會(huì)那種歪曲事實(shí)、自己打自己嘴巴的狀態(tài)。
引用內(nèi)容: 我有個(gè)怪癖。我很喜歡在面試的時(shí)候我總是要先考面試人XHTML。就好像以前師傅招收學(xué)徒一樣,能力和慧根屬其次,人品首當(dāng)其沖。 我以為,XHTML好比一個(gè)人的本質(zhì),CSS好比人的處事方式和態(tài)度,JS好比人做事的行為以及作風(fēng)。三者的分離再加上些周邊的SEO、人機(jī)交互也就是我們所說(shuō)的網(wǎng)站重構(gòu),也就是一個(gè)很不錯(cuò)的人。之前總是有一部分人認(rèn)為CSS就是網(wǎng)站的最主要的元素,其實(shí)自然而然的也就代表了一種人生觀。的確,一個(gè)人沒(méi)有好的處事方式和態(tài)度很難在現(xiàn)在的社會(huì)很好的存活;但是這個(gè)處事的方式和態(tài)度位置過(guò)于偏重了,就成了一個(gè)善于欺騙、做事不擇手段的人。
這個(gè)是一直想說(shuō)的,有了CSS你可以將左右順序變成右左順序,他就是一個(gè)網(wǎng)頁(yè)中的魔術(shù)師。你總不能把他亂用,去成了一個(gè)善于欺騙、做事不擇手段的人。
原文:http://www.twinsenliang.net/skill/20081129.html
本文鏈接:http://m.95time.cn/tech/web/2009/6479.asp
出處:twinsenliang.net
責(zé)任編輯:bluehearts
上一頁(yè) 語(yǔ)義化單單的限定在html么? [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|