????????????????????????????????????????????????????????????大話CSS樣式表速成????

?

??????????程序和美工一直是相輔相成的，一個好的Web項目需要不僅僅是程序的完美，同樣一個好的用戶使用頁面，也可以

吸引一大部分用戶。往往在傳統(tǒng)的概念里，程序和美工總是被分開來說。一方面，這兩者的確有很大的不同。而且美工的門

檻會低一點，一般有一些美術(shù)素養(yǎng)的人，可以通過熟練使用標簽和工具，制作出非常美觀的頁面和圖片。總體上二者是相輔

相成，聯(lián)系緊密的。
??????????我覺得一個技術(shù)人員，如果能在技術(shù)穩(wěn)步前進的同時，學(xué)上點美工，一定是如虎添翼的。同樣也可以讓我們體會到

生活的美。

?

??????????我這篇文章其實主要的面對人群是技術(shù)人員，而并不是美工人員。因為這是一篇技術(shù)速成貼，所謂速成自然不會扣

那么細，我在這篇文章里要把一個頁面成品（做完后，可以上線的優(yōu)良網(wǎng)頁）的制作過程剖析開來，讓更多的技術(shù)人員走進

美工世界，體會生活之美。

?

?????????今天介紹的是百度空間上的一個個人主頁。主題比較女性化一些，色調(diào)以粉色系為主的。主頁網(wǎng)址：

http://hi.baidu.com/xinmemory/這個頁面是我搜東西時偶爾看到的，因為覺得這個頁面挺好看的。無論

是構(gòu)圖還是css的運用都是比較成功的。所以我打算借這個頁面發(fā)揮一下自己的一點點美工基礎(chǔ)，把這個頁面

照樣做下來再加上我的一點點改動。

?

??????????我也是很久沒做頁面了，大概二個多月吧，所以手生了，美工最重要的是熟練。

?

??????????做美工細心很重要，往往1像素的差距，頁面可能就亂了。我用的技術(shù)是純div+css，也就是說基本

是把table標簽的使用完全取代了。這樣CSS也就有了最大限度的發(fā)揮。div+css技術(shù)可以做一切靜態(tài)網(wǎng)頁。

這個頁面我做了一整天。因為他涉及到很多細微之處。包括div層的重疊等等。不過如果知道原理，做頁面也

只是力氣活兒而已。

?

???????? 下面是頁面部分截圖：

?????

?

?

??????????不過我建議你先看一下整個頁面，因為要做一個頁面首先要有大局觀。這樣才可以把頁面的構(gòu)造拿捏

的準。一般網(wǎng)頁都是三部分，這個也是。這樣就首先確定了三個層，然后需要把頁面里的所有圖片元素（一般

是背景圖片）下載下來，不能下載的為了省事，例如按鈕之類的，就截圖。尺寸很重要，要格外精確。然后觀

察頁面背景圖案大概有幾種，是如何層疊排列的。在把中間部分分解成左右兩個層，這樣一個基本的構(gòu)造就

?完成了。再者就是細微的劃分每一個版塊。例如這個頁面里的“文章列表”“個人檔案”“最新照片”“友情

鏈接”“我的愛好”“留言板”......接下來把每個版塊做成一個大層，套入在左右兩個層之中。然后細分每一個

版塊的每一個圖，每一段話。在分別嵌套小層。為了完全做到用CSS排版，所以每一個頁面元素都要有層囊括。

然后層層嵌套。有人可能覺得這樣很麻煩，但是為了臨摹的準確，所以每一個元素都要盡量精確的定義margin。

不要嫌麻煩，細心很重要。層基本劃分好以后，就可以寫CSS了，這個頁面的源文件我沒有看，也不知道大概有

幾行。我所有代碼手寫用了一天的時間。其中Html頁面的代碼量有230幾行，我寫的有點擁擠，如果按標準排代

碼。應(yīng)該會有更多行，不過可讀性一點也不差。CSS樣式表手寫了70行左右。雖然DW提供個很多的方便手段，但

是一般做美工的還是會手寫，因為也不慢，而且方便調(diào)試。這樣頁面的制作就只差CSS了，也是最重要的一環(huán)。CSS

里的命名也有一套標準，但是我比較懶，沒有查，我寫的一般以英文的譯名或位置、類型做名。也很容易讀懂。CSS

也有一套優(yōu)化標準，但是我也沒有仔細弄了，兼容性沒考慮太多，反正IE下的效果很不錯。

?

??????????我用了一部分的CSS寫代碼技巧。精簡一部分代碼。比起原頁面，我的成品里有一些不同，首先是色彩搭配，

我覺得這個原頁面粉色系色彩很淡，所以我用了紫色來搭配粉色，是頁面更加有跳躍性。一些文字內(nèi)容稍作變動，總

不能照抄原文吧，不過文字基本是圍繞我的。

?

下面是我做的頁面的部分截圖：

?

??????????這個頁面制作過程就介紹到這，CSS樣式非常多，建議下載一個CSS2.0手冊看看。

??????????不過既然說速成了，那就當(dāng)然要有點實際的東西，給技術(shù)人員更直觀的東西。

???????????我決定發(fā)放我的頁面源碼。我覺得還是直接看源碼，對比效果學(xué)的快些。如果想要一份的話，

就留下郵箱地址，不過考慮到一些偶然因素，可能不會給所有回復(fù)郵箱地址的人都發(fā)，所以也請見諒。

收到的朋友麻煩回復(fù)說已收到，以證明真實性，源碼僅供學(xué)習(xí)參考。

?

下面貼出文章列表版塊層的源碼：

?

?

<!--------文章--------->
????????????????<div>
????????????????????<div?class="left_image"><img?src="image/dz.gif"?/></div>
????????????????????<div?class="left_content_title"><a?href=""><font?color="#FF66CC"><b>施楊de編程世界</b></font></a></div>
????????????????????<div?class="left_image2"><img?src="image/lz.gif"?/></div>
????????????????????<div?class="left_time">2008-8-21?00:00</div>
????????????????????<div?class="left_content">
????????????????????????<div?class="left_text">
????????????????????????????歡迎訪問我的博客！！！這里有我的技術(shù)積累，希望可以與大家多交流！！！謝謝大家關(guān)注我的博客！
????????????????????????????
????????????????????????</div>
????????????????????</div>
????????????????????<div?class="left_readall"><a?href=""><img?src="image/an2.JPG"?/></a></div>
????????????????????<div?class="left_content2">
????????????????????<a?href=""><font?color="#FF66CC">類別：技術(shù)</font></a>
????????????????????|<a?href=""><font?color="#FF66CC">評論(0)</font></a>
????????????????????|<a?href=""><font?color="#FF66CC">瀏覽(0)</font></a>
????????????????????</div>
????????????????????<div?class="left_image3"></div>
????????????????</div>
????????????<!------------------->

?

?

配上CSS代碼：

?

.left_image{?margin-top:10px;?margin-left:-700px;}
.left_content_title{?font-size:14px;?margin-left:-550px;?margin-top:10px;}
.left_image2{?margin-top:30px;}
.left_time{?font-size:14px;?color:#999999;?margin-top:30px;}
.left_content{?border:#FF66FF?thin?dashed?;?width:700px;?height:300px;?background-color:#FFFFFF;?margin-top:10px;}
.left_readall{?margin-top:20px;?margin-left:-500px;}
.left_content2{?color:#FF66CC;?font-size:12px;?margin-top:20px;?margin-left:-550px;}
.left_image3{?background:url(image/bl.gif)?repeat-x?center;?width:720px;?margin-top:20px;}
.left_text{?color:#990066;?font-size:15px;?padding-top:20px;?padding-left:20px;?margin-left:-100px;?width:500px;}

?

?顯示效果如下：

?

?

?

這里我補充了一個版塊的源碼，舉個例子，為了證明我的代碼的工整性。整個頁面我都是以這種

搭配形式完成的，沒有js代碼，也沒有多余標簽。

?

?

施楊出品！！！

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的(原创分享，改进版)CSS样式表速成！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。