|
第七步
解決了footer部分，現(xiàn)在我們來給主container區(qū)域加入更多內(nèi)容。首先我們需要兩張來自PSD圖檔的新圖片。
注意，我使用了圖片來表現(xiàn)文本塊。一般說來，直接用文字是最好的，這樣能讓網(wǎng)頁更容易被搜索到同時(shí)也被實(shí)踐證明是比較好的做法。但如果要用文字實(shí)現(xiàn)圖中的效果我們必須使用一些難得多的Flash和SIRr技術(shù)。既然本文是篇簡明易懂的教程，我還是寧愿用一副大圖片。:-）
下面是一小段HTML代碼，只有container部分的：
<div id="outside_container">
<div id="container">
<a href="#"><img src="images/logo.jpg" id="logo" /></a>
<ul id="menu">
<li><a href="#">Retouching</a></li>
<li><a href="#">Digital Effects</a></li>
<li><a href="#">Web Work</a></li>
</ul>
<ul id="right_menu">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<img src="images/panel_home.jpg" id="panel" />
<div id="content">
<!-- THE CONTENT GOES IN HERE -->
</div>
</div>
</div>
在container區(qū)域我們加了五項(xiàng)內(nèi)容：
- 我們的logo：加了鏈接，點(diǎn)擊可到達(dá)首頁，id=“l(fā)ogo”
- 主菜：很簡單的一個(gè)無序列表，id="menu"
- 右側(cè)菜單：除了id="right_menu"外，和前一個(gè)菜單沒兩樣
- 大文本圖片：這是我們主要的頭部文本，存成了圖片, id="panel"
- Content（內(nèi)容） Div：我們待會(huì)兒要把頁面的所有內(nèi)容放在這里。但現(xiàn)在我只寫了一句HTML注釋，先讓它留空。
在我們開始設(shè)計(jì)樣式前，現(xiàn)在的頁面值得一看，所有的內(nèi)容像這樣堆在一起：
你也看見了，我們得來個(gè)乾坤大挪移好讓一切歸位。你還應(yīng)該想起來，我們要用絕對(duì)定位來簡單快捷地完成這個(gè)任務(wù)。
出處：譯言
責(zé)任編輯：bluehearts
上一頁 用CSS布局建站從零開始 [3] 下一頁 用CSS布局建站從零開始 [5]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 4 頁 用CSS布局建站從零開始 [4]
