css入門教程之學(xué)習(xí)網(wǎng)頁布局(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/
從本篇開始講述如何用css實(shí)現(xiàn)網(wǎng)頁的布局，即如何用css控制網(wǎng)頁內(nèi)各個(gè)元素的顯示位置。如果你是一個(gè)初學(xué)者，很可能覺得做一個(gè)網(wǎng)頁的第一步就是布局。其實(shí)不然，css網(wǎng)頁的設(shè)計(jì)過程可以參考分為以下幾步：
平
3. header部分的圖片非常復(fù)雜，但要把那把尺子單獨(dú)分離出來幾乎是不可能的，而且是沒有必要的。因?yàn)槲覀冞€需用這把尺子實(shí)現(xiàn)回首頁的超級(jí)鏈接，因此它只能是在html文件中<img/>的圖片，而非背景，為了減少css編碼難度，我們可以把有投影的圓角也和尺子一起切下來以備用，如圖(Fig.03):
點(diǎn)擊查看大圖
那么剩下的稍淡的灰色，就是所需要header的背景，我們只需來兩豎刀(寬度在4-6px左右為宜)，得到下圖(Fig.04):
相信大家知道如何在css里用repeat-x來實(shí)現(xiàn)header的背景效果；
4. 接著就是content的背景，很容易看出就是那個(gè)帶投影的白色背景。馬上來上兩橫刀，高度同樣在4-6px為宜，如下圖(Fig.05)，在css里用repeat-y就能實(shí)現(xiàn)content背景；
點(diǎn)擊查看大圖
5. 還好，在本設(shè)計(jì)中sidebar無背景，直接繼承body的灰色背景就好；
6. footer背景比較簡單，就是兩個(gè)圓角而已，我為了圖方便，把那個(gè)logo也切了下來，如下(Fig.06)：
點(diǎn)擊查看大圖
這樣我們就完成了第一次切割，并且把一切涉及布局的背景圖片切了下來。接著就是如何用css布局了，我們的目標(biāo)是實(shí)現(xiàn)以下效果圖(Fig.07)：
點(diǎn)擊查看大圖
那么現(xiàn)在就開始編寫html代碼。既然我們有了一清晰的布局效果圖，編寫html代碼應(yīng)該是很簡單的一件事情。但是越是簡單的事，人們忽略的東西就越多。以下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è)問題，請(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)容泄露出來，于是那些教程總是讓人感到不得其所。
我的一個(gè)客戶曾跟我說在他們的領(lǐng)域(PR)，大家不會(huì)免費(fèi)把任何有價(jià)值的東西告訴客戶，或是大眾。其實(shí)在任何領(lǐng)域都是一樣的，大部分人寧愿讓他的知識(shí)在腦中腐朽，也不會(huì)透露出半點(diǎn)來。
我知道的東西不多，但碰巧正是我的讀者所渴求的。所以，我決定把這些對(duì)于我最有價(jià)值的知識(shí)寫出來，即使你們當(dāng)中會(huì)有一些成為我競爭的對(duì)手。換一個(gè)角度，如果能成為合作伙伴，那是最好不過了。如果本教程沒有讓你的失望，還請(qǐng)繼續(xù)支持。
致歉：要對(duì)我的讀者說聲抱歉，這篇教程整整晚了10天。如果一兩個(gè)星期更新不了一篇post，就有放那80個(gè)Readers鴿子的感覺，用一部分乖學(xué)生的話講就是和逃了一整天課一樣，頗感沉重。推遲的一個(gè)重要原因是因?yàn)槲以冢?
Moving to Ubuntu：
-
Ubuntu是一個(gè)讓我割舍不下的免費(fèi)系統(tǒng)，自從發(fā)現(xiàn)了hacked的iso免安裝方法后，它的優(yōu)勢(shì)是如此明顯：免費(fèi)，無盜版，免安裝，能讀取/寫入windows分區(qū)的文件，無需分區(qū)格式化，1分鐘重裝，沒安驅(qū)動(dòng)就識(shí)別了我的ASUS laptop上除modem以外的所有硬件。
它有一個(gè)優(yōu)秀的替代Editplus的編程工具–Bluefish，我管它叫胖嘴藍(lán)魚。編代碼時(shí)有條胖魚陪著，氣氛能緩和很多。
老實(shí)說Ubuntu是個(gè)嚴(yán)重依賴網(wǎng)絡(luò)的系統(tǒng)，如果你的上網(wǎng)條件不佳，建議不要嘗試。但一旦上了網(wǎng)，它就不得了了，以下這個(gè)信息就很Cool：
Firefox與其說是個(gè)瀏覽器，還不如說是個(gè)軟件庫，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(新手入門第一篇必看攻略)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-01
- css 入門基礎(chǔ)，適合剛開始學(xué)習(xí)css的朋友，最好先有一定的html編寫經(jīng)驗(yàn)。2010-01-17
- 結(jié)束了HTML學(xué)習(xí)，接下來我終于揭開了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í)語言的初始過程可能是一個(gè)有點(diǎn)驚人，有很多可以學(xué)習(xí)它有時(shí)很難找出哪里開始。幸運(yùn)的是有寶貴的大量信息和資源，那里的網(wǎng)絡(luò)覆蓋，通過先進(jìn)2009-08-29
- CSS的定義是由三個(gè)部分構(gòu)成: 選擇符(selector)，屬性(properties)和屬性的取值(value)。 1.語法: selector {property: value} (選擇符 {屬性:值}) 說明:2009-06-28
- 引用一本書中的一段文字：“當(dāng)我第一次開始學(xué)習(xí)漢語時(shí)，我的家庭老師老王給了我一本漢英字典、一本漢語語法書和一本初級(jí)教程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è)置對(duì)象內(nèi)的第一個(gè)字符的2008-10-17css是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了css是什么,小編覺得挺不錯(cuò)的，詳細(xì)的介紹了css的基本入門。現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-23