div+css网站前台工程师设计之路必修

《div+css网站前台工程师设计之路必修》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、div+css网站前台工程师设计之路必修　文章来源：河南新华电脑学院這篇文章，算是我在CSS的學習中，一個段落的結束。其實CSS是非常有趣且多變的，多看看國內外一些利用CSS製作出來的優等網站，你就會了解CSS有多麼強大。這裡，我將以「樂多Blog」的版型製作，作為這篇文章的主題。在這之前，建議您先看看之前我所寫的CSS排版觀念系列文章。第一步了解頁面結構要化粧前，也得先知道自己的臉屬於何種性質；同理我們也得先掌握樂多的Blog的頁面結構(DOM)。檢視自己的樂多Blog首頁原始碼，你就可以看到以下的結構：每個色塊都是一個DIV，而這裡我

2、直接用CSS的表示法來標示DIV的ID。再來我們分析#content和#links，如下圖：一樣地，我用CSS表示法來標示每個區塊的CLASS屬性。#content就是我們的Blog記事區，而#links則是功能選單的集合體，這裡我們暫時不對細部的區塊作討論。第二步決定版型沒有適當的動線規劃及版面設計，再豐富的網站內容也是枉然。在決定我們的Blog要長什麼樣子之前，應該要思考如何讓瀏覽者能夠方便地操作你所提供的功能。另外，一個好的視覺設計也是必要的，除非你想標新立異，那麼舒服的色系及精緻的版面都是你應該要追求的。不過這裡我不多談如何設計這

3、些視覺上的效果，畢竟我並非設計系出身；相關的知識可以請教身邊有美術涵養的高手們，他們會給你很好的建議。這裡我決定實作全版面兩欄式的版型，其中#container及#content的寬度會隨著瀏覽視窗大小作動態調整，而#links則是固定寬度且靠在視窗右邊，如下圖：至於背景圖的部份，就請大家自行發揮天份製作囉。第三步用CSS製作初步的畫面首先，我們要把body和#container設定好，如下：html,body{margin:0;}#container{position:relative;width:100%;}首先我們將html和bod

4、y的邊界設為0，然後再把#container的寬度設為100%。(註：你可以在建構版型時，利用背景色來讓自己知道區塊跑到哪兒去了。)接下來，我們指定#banner的高度：#banner{height:80px;}這裡我假設背景圖的高度是80px，當然你可以視需要自行更改。然後我們利用浮動技巧，將#content放到左邊，#links放到右邊。我們不指定#content的寬度，因為它會變動。我們僅需要固定住#links的寬度即可(假設為200px)。#content{float:left;}#links{float:right;width:

5、200px;}咦？為什麼還是沒有效果？#links並沒有跑到#content的右邊？而是跑到#content的右下方去了：這是因為現在#content的內容區寬度是100%，所以#links被#content擠了下來。解決的方式是把#links的margin-left指定為負值，讓它往左拉回200px：#links{float:right;width:200px;margin-left:-200px;}好啦，現在版面變成這樣：呃...可是#content的內容和#links的內容疊在一起了，怎麼辦？很簡單，我們用padding-right

6、把#cotent的內容往左擠進來：#content{float:left;padding-right:200px;}#footer因為#content和#links浮動的關係，自動跑到上面來了。我們只要設定：#footer{clear:both;height:40px;}雖然IE不用設定就會正常(其實是不正常)，但是為了其他瀏覽器，一定要設定。好啦，現在實際上的完整版面會變成這樣了：#content的可視寬度其實是和#container的內容區寬度一樣為100%，虛線部份才是#content的內容區。有幾點要注意：1.#content的內

7、容寬度不可過長，不然會讓#links往下掉。2.#footer不一定會在#content下方出現，這要看#content和#links哪個元素較高而定。3.#banner、#content、#links、#footer屬於結構元素，所以除非必要，否則它們的margin、padding都應該要設成0px(DIV預設值)。1.如果要讓#links和#content左右對調，那麼就把#content和#links的float、padding和margin中之left改成right，right改成left。2.配合這篇，只要更動body和#con

8、tainer的樣式，你就可以讓這個版型置中囉。完整的CSS如下：html,body{margin:0;}#container{position:relative;width:100%;}#ba