css入門(mén)教程之學(xué)習(xí)網(wǎng)頁(yè)布局(1)
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-31 22:20:56 作者：佚名 
我要評(píng)論
我要評(píng)論原文：http://jorux.com/archives/layout-1-if-you-love-css/
從本篇開(kāi)始講述如何用css實(shí)現(xiàn)網(wǎng)頁(yè)的布局，即如何用css控制網(wǎng)頁(yè)內(nèi)各個(gè)元素的顯示位置。如果你是一個(gè)初學(xué)者，很可能覺(jué)得做一個(gè)網(wǎng)頁(yè)的第一步就是布局。其實(shí)不然，css網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程可以參考分為以下幾步：
平
原文：http://jorux.com/archives/layout-1-if-you-love-css/
從本篇開(kāi)始講述如何用css實(shí)現(xiàn)網(wǎng)頁(yè)的布局，即如何用css控制網(wǎng)頁(yè)內(nèi)各個(gè)元素的顯示位置。如果你是一個(gè)初學(xué)者，很可能覺(jué)得做一個(gè)網(wǎng)頁(yè)的第一步就是布局。其實(shí)不然，css網(wǎng)頁(yè)的設(shè)計(jì)過(guò)程可以參考分為以下幾步：
平面設(shè)計(jì)—>頁(yè)面切割—>布局—>細(xì)節(jié)控制
-
平面設(shè)計(jì)是一個(gè)網(wǎng)頁(yè)的精髓所在，讀者直接面對(duì)的界面，在本站以后的文章中會(huì)涉及此方面內(nèi)容。也許你會(huì)認(rèn)為在腦子里形成一個(gè)網(wǎng)站的大概印象就可以了，那么這種想法直接就給你貼上業(yè)余的標(biāo)簽。推薦工具：Photoshop；
頁(yè)面切割其實(shí)可以劃分到布局里，因?yàn)槟愕捻?yè)面切割方式直接影響了布局方式，也體現(xiàn)了你是屬于表格布局陣營(yíng)還是css布局陣營(yíng)。它是布局(前)的關(guān)鍵步驟。將在本章重點(diǎn)講述。推薦工具：Photoshop；
如果把布局說(shuō)簡(jiǎn)單點(diǎn)，就先得把你的網(wǎng)頁(yè)簡(jiǎn)單化。簡(jiǎn)單到把你的網(wǎng)站分為header，content，sidebar，footer四個(gè)部分。
細(xì)節(jié)控制，將header，content，sidebar，footer的表現(xiàn)細(xì)節(jié)化。
本章將針對(duì)頁(yè)面切割講述一些Jorux的私人觀點(diǎn)與技術(shù)。
首先，我們要有一個(gè)被切割的對(duì)象，這里以Jorux.com的原始photoshop平面設(shè)計(jì)圖為例。如下（Fig.01）：
點(diǎn)擊查看大圖
如果使用表格布局的話，你可能就想到在photoshop里把頁(yè)面切割為無(wú)數(shù)個(gè)固定寬高的格子。但用css布局的話，你首先要明確的以下幾點(diǎn)是：
-
你是要橫著切，還是要豎著切；
第一次切割，只需要把網(wǎng)頁(yè)中的背景圖片切割出來(lái)(因?yàn)楸尘皥D片是在css里聲明的)；
切的的圖片要盡量小，然后讓css去做更多的事情；
設(shè)計(jì)比較復(fù)雜的部分，可以不分割，從而減少css編碼的難度；
讀者應(yīng)該根據(jù)自己的能力，找出哪些效果css可以輕松實(shí)現(xiàn)，而哪些效果用圖片更加簡(jiǎn)單而且size不大，仔細(xì)在3.4之間權(quán)衡利弊；
現(xiàn)在我們來(lái)看Fig.01, 最靠上的部分是個(gè)黑色的尺子，遮住了“Jorux記事本”，更遭的是它居然還有黑色的投影。等到要切割的時(shí)候，我才后悔當(dāng)初怎么能設(shè)計(jì)得如此復(fù)雜。但沒(méi)關(guān)系，一切都會(huì)好起來(lái)的?，F(xiàn)在跟著來(lái)重溫我的切割思路：
1. 整個(gè)網(wǎng)頁(yè)背景色大家應(yīng)該很清楚，就是深灰色#444，這無(wú)需圖片，在css里的body選擇器里聲明就好；
2. 這一步是最關(guān)鍵的一步，請(qǐng)讀者仔細(xì)體會(huì)。對(duì)于css布局的網(wǎng)頁(yè)，Jorux建議你首先給你的原始平面設(shè)計(jì)來(lái)兩個(gè)橫刀(紅色)，接著就來(lái)個(gè)豎刀(藍(lán)色)。實(shí)現(xiàn)如下效果(Fig.02)：
點(diǎn)擊查看大圖
一定要先橫再豎，即先把你的網(wǎng)頁(yè)分為top，mid，bottom三個(gè)部分，然后再把mid分為content和sidebar兩個(gè)部分。對(duì)于單欄樣式，只需要兩橫刀，而對(duì)于三欄樣式，可能就需要兩橫兩豎刀。
這樣你就得到header，content，sidebar，footer四個(gè)部分。現(xiàn)在來(lái)分析這四個(gè)部分的背景圖片需要如何切割。
#p#
3. header部分的圖片非常復(fù)雜，但要把那把尺子單獨(dú)分離出來(lái)幾乎是不可能的，而且是沒(méi)有必要的。因?yàn)槲覀冞€需用這把尺子實(shí)現(xiàn)回首頁(yè)的超級(jí)鏈接，因此它只能是在html文件中<img/>的圖片，而非背景，為了減少css編碼難度，我們可以把有投影的圓角也和尺子一起切下來(lái)以備用，如圖(Fig.03):
點(diǎn)擊查看大圖
那么剩下的稍淡的灰色，就是所需要header的背景，我們只需來(lái)兩豎刀(寬度在4-6px左右為宜)，得到下圖(Fig.04):
相信大家知道如何在css里用repeat-x來(lái)實(shí)現(xiàn)header的背景效果；
4. 接著就是content的背景，很容易看出就是那個(gè)帶投影的白色背景。馬上來(lái)上兩橫刀，高度同樣在4-6px為宜，如下圖(Fig.05)，在css里用repeat-y就能實(shí)現(xiàn)content背景；
點(diǎn)擊查看大圖
5. 還好，在本設(shè)計(jì)中sidebar無(wú)背景，直接繼承body的灰色背景就好；
6. footer背景比較簡(jiǎn)單，就是兩個(gè)圓角而已，我為了圖方便，把那個(gè)logo也切了下來(lái)，如下(Fig.06)：
點(diǎn)擊查看大圖
這樣我們就完成了第一次切割，并且把一切涉及布局的背景圖片切了下來(lái)。接著就是如何用css布局了，我們的目標(biāo)是實(shí)現(xiàn)以下效果圖(Fig.07)：
點(diǎn)擊查看大圖
那么現(xiàn)在就開(kāi)始編寫(xiě)html代碼。既然我們有了一清晰的布局效果圖，編寫(xiě)html代碼應(yīng)該是很簡(jiǎn)單的一件事情。但是越是簡(jiǎn)單的事，人們忽略的東西就越多。以下Jorux的觀點(diǎn)請(qǐng)一定仔細(xì)考量：
***對(duì)于DIV的使用，請(qǐng)一定從大到小，把那些能在一起的元素劃分到一個(gè)DIV，然后再在此DIV中繼續(xù)劃分小DIV。所以為實(shí)現(xiàn)(Fig.07)的效果圖，需要做以下幾步：
-
我們首先把header，content，sidebar，footer歸為一個(gè)DIV，ID=“AllWrap”；用其實(shí)現(xiàn)向左浮動(dòng)；
接著把header作為一個(gè)DIV，ID=“Header”；
把content和sidebar劃分在一個(gè)DIV，ID=“MidWrap”；然后在其內(nèi)繼續(xù)劃分為兩個(gè)DIV，ID分別為Content和Sidebar；
最后把footer作為一個(gè)DIV，ID=“Footer”；
最終得到Html代碼為：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>My layout</TITLE>
</HEAD>
<BODY>
<div id=”AllWrap”>
<div id=”Header”>Header</div>
<div id=”MidWrap”>
<div id=”Content”>Content</div>
<div id=”Sidebar”>Sidebar</div>
</div>
<div id=”Footer”>Footer</div>
</div>
</BODY>
</HTML>
給讀者留一個(gè)問(wèn)題，請(qǐng)有能力的朋友在留言中給出實(shí)現(xiàn)效果圖樣式的css代碼。有如下要求：
-
向左浮動(dòng)；
AllWrap寬為760px；Content寬為560px，高400px；Sidebar寬為200px，高400px；Footer高為80px，寬760px；
在800×600，1024×768，或是寬屏顯示器都能正常顯示；
在IE6/7, Opera, Firefox均能顯示正常；
本篇正文完(答案將在留言中討論，下篇將講述如何用css實(shí)現(xiàn)最終布局與背景顯示)
以上內(nèi)容涉及某些人的商業(yè)利益，出于某些原因大家都不善于把那些能轉(zhuǎn)化為利益的內(nèi)容泄露出來(lái)，于是那些教程總是讓人感到不得其所。
我的一個(gè)客戶(hù)曾跟我說(shuō)在他們的領(lǐng)域(PR)，大家不會(huì)免費(fèi)把任何有價(jià)值的東西告訴客戶(hù)，或是大眾。其實(shí)在任何領(lǐng)域都是一樣的，大部分人寧愿讓他的知識(shí)在腦中腐朽，也不會(huì)透露出半點(diǎn)來(lái)。
我知道的東西不多，但碰巧正是我的讀者所渴求的。所以，我決定把這些對(duì)于我最有價(jià)值的知識(shí)寫(xiě)出來(lái)，即使你們當(dāng)中會(huì)有一些成為我競(jìng)爭(zhēng)的對(duì)手。換一個(gè)角度，如果能成為合作伙伴，那是最好不過(guò)了。如果本教程沒(méi)有讓你的失望，還請(qǐng)繼續(xù)支持。
致歉：要對(duì)我的讀者說(shuō)聲抱歉，這篇教程整整晚了10天。如果一兩個(gè)星期更新不了一篇post，就有放那80個(gè)Readers鴿子的感覺(jué)，用一部分乖學(xué)生的話講就是和逃了一整天課一樣，頗感沉重。推遲的一個(gè)重要原因是因?yàn)槲以冢?
Moving to Ubuntu：
-
Ubuntu是一個(gè)讓我割舍不下的免費(fèi)系統(tǒng)，自從發(fā)現(xiàn)了hacked的iso免安裝方法后，它的優(yōu)勢(shì)是如此明顯：免費(fèi)，無(wú)盜版，免安裝，能讀取/寫(xiě)入windows分區(qū)的文件，無(wú)需分區(qū)格式化，1分鐘重裝，沒(méi)安驅(qū)動(dòng)就識(shí)別了我的ASUS laptop上除modem以外的所有硬件。
它有一個(gè)優(yōu)秀的替代Editplus的編程工具–Bluefish，我管它叫胖嘴藍(lán)魚(yú)。編代碼時(shí)有條胖魚(yú)陪著，氣氛能緩和很多。
老實(shí)說(shuō)Ubuntu是個(gè)嚴(yán)重依賴(lài)網(wǎng)絡(luò)的系統(tǒng)，如果你的上網(wǎng)條件不佳，建議不要嘗試。但一旦上了網(wǎng)，它就不得了了，以下這個(gè)信息就很Cool：
Firefox與其說(shuō)是個(gè)瀏覽器，還不如說(shuō)是個(gè)軟件庫(kù)，F(xiàn)TP上傳，離線寫(xiě)博，Gmail硬盤(pán)，截屏，取色，Debug，網(wǎng)頁(yè)收藏，多線程下載，F(xiàn)eed閱讀器(Sage)，屏幕取詞翻譯，Gmail郵件提醒；
Ubuntu Firefox Bluefish Mplayer 寬帶=實(shí)現(xiàn)了像我這種不玩游戲，不聊天，以design/coding為樂(lè)趣的，無(wú)聊80后的理性與感性需要。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇Html/Css(新手入門(mén)第一篇必看攻略)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-01
- css 入門(mén)基礎(chǔ)，適合剛開(kāi)始學(xué)習(xí)css的朋友，最好先有一定的html編寫(xiě)經(jīng)驗(yàn)。2010-01-17
- 結(jié)束了HTML學(xué)習(xí)，接下來(lái)我終于揭開(kāi)了css的真實(shí)面紗，在大學(xué)時(shí)代，一直忙碌去各處收集學(xué)習(xí)資料，記得當(dāng)時(shí)不知在那位大俠手里拷了有關(guān)css相關(guān)學(xué)習(xí)資料，代碼看了半天實(shí)在費(fèi)解2009-11-13
- 你是新學(xué)習(xí)CSS？在這個(gè)漂亮的學(xué)習(xí)語(yǔ)言的初始過(guò)程可能是一個(gè)有點(diǎn)驚人，有很多可以學(xué)習(xí)它有時(shí)很難找出哪里開(kāi)始。幸運(yùn)的是有寶貴的大量信息和資源，那里的網(wǎng)絡(luò)覆蓋，通過(guò)先進(jìn)2009-08-29
CSS 語(yǔ)法 學(xué)習(xí)css入門(mén)者看
CSS的定義是由三個(gè)部分構(gòu)成: 選擇符(selector)，屬性(properties)和屬性的取值(value)。 1.語(yǔ)法: selector {property: value} (選擇符 {屬性:值}) 說(shuō)明:2009-06-28學(xué)DIV CSS技術(shù),如何入門(mén)?
引用一本書(shū)中的一段文字：“當(dāng)我第一次開(kāi)始學(xué)習(xí)漢語(yǔ)時(shí)，我的家庭老師老王給了我一本漢英字典、一本漢語(yǔ)語(yǔ)法書(shū)和一本初級(jí)教程2008-10-17CSS入門(mén)教程:網(wǎng)頁(yè)首字下沉-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS入門(mén)教程:網(wǎng)頁(yè)首字下沉 :first-letter 版本：CSS2 兼容性：IE5.5 語(yǔ)法： Selector : first-letter { sRules } 說(shuō)明： 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的2008-10-17css是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了css是什么,小編覺(jué)得挺不錯(cuò)的，詳細(xì)的介紹了css的基本入門(mén)?，F(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-23