|
第八步
以下是讓元素們各就各位要增加的CSS：
#container {
background:url(images/background_main.jpg) no-repeat;
min-height:800px;
width:1000px;
position:relative;
}
/*
Logo / Menu / Panel Positioning
*/
#logo { position:absolute; top:58px; left:51px; }
#panel { position:absolute; top:165px; left:51px; }
ul#menu {
margin:0px; padding:0px;
position:absolute; top:145px; left:75px;
}
ul#right_menu {
margin:0px; padding:0px;
position:absolute; top:145px; right:75px;
}
我們再一次...一條一條看：
- 首先，你看到一段熟悉的代碼——container，這次多了兩行：width:1000px和position:relative。把position（位置）設(shè)為relative（相對的）很重要，這樣內(nèi)部元素的絕對定位就是相對于container標(biāo)簽的。這也意味著我可以在已知container寬為1000px的條件下來定位盒子里的元素，例如right_menu（右側(cè)菜單）。
- 接著，我用一句注釋來給這個(gè)新CSS分段。
- 給logo和panel絕對定位。我怎么知道定位屬性值該多大呢？很簡單，拿出原始PSD圖來量一下就行！你看，屬性定義一簡單，絕對定位也就很容易。
- 然后給兩個(gè)菜單絕對定位。這里我加了margin:0px; padding:0px;來清除無序菜單默認(rèn)的margin和padding。
- 接下來請注意，我指定right_menu的絕對定位為right:75px，讓它出現(xiàn)在距容器右邊界75px的位置。通常瀏覽器窗口被用作參照物，但前面我已將container設(shè)為position:relative，這就讓75px從<div id="container"></div>的右邊界開始算起了。
你這時(shí)可能會(huì)想：這有啥用？我用left屬性定位不就行了？當(dāng)然，你可以這么做，但如果你要給右側(cè)菜單增加選項(xiàng)，你就得一遍又一遍地重新定位好讓它距離右邊界75px。而用上right，選項(xiàng)就會(huì)自動(dòng)左移。試試看吧！
看看咱們干到哪兒了：
出處：譯言
責(zé)任編輯：bluehearts
上一頁 用CSS布局建站從零開始 [4] 下一頁 用CSS布局建站從零開始 [6]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 5 頁 用CSS布局建站從零開始 [5]
