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