|
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)槲以冢?/p>
Moving to Ubuntu：
- Ubuntu是一個(gè)讓我割舍不下的免費(fèi)系統(tǒng)，自從發(fā)現(xiàn)了hacked的iso免安裝方法后，它的優(yōu)勢是如此明顯：免費(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后的理性與感性需要。
本文鏈接：http://m.95time.cn/tech/web/2008/6044.asp 
出處：Jorux Notebook
責(zé)任編輯：moby
上一頁 css基礎(chǔ)教程布局篇之一 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 css基礎(chǔ)教程布局篇之一 [2]
