web標(biāo)準(zhǔn)實(shí)戰(zhàn)css網(wǎng)頁(yè)布局-資料下載頁(yè)
2024-09-04 16:47本頁(yè)面
【導(dǎo)讀】?jī)?nèi)容可能有所差別；◎詳細(xì)閱讀本文可能會(huì)花上你15分鐘以上時(shí)間；◎本文遵循Codeforthebest,fixfortherest原則。豆瓣的首頁(yè)是典型的三行兩欄的布局，不過(guò)有特殊之處。另外如果兩欄都是百分比寬度，那么也好處理。的寬度是固定的。示后，很容易出錯(cuò)?！蛄斜碜髠?cè)的圖片，是用戶的頭像而不是書(shū)的封面。我把<img>和用戶名那一行寫(xiě)在一起。辦法，只能暫時(shí)限定高度。誰(shuí)有辦法請(qǐng)不吝告知。這直接影響到后面樣式表的寫(xiě)法。并且我的建議是，當(dāng)結(jié)。構(gòu)確定下來(lái)之后，不要輕易改動(dòng)。UILibGrids，我把上中下三行分別命名為#hd、#b. d、#ft，是#header、#body和#footer的縮寫(xiě)。關(guān)于id和class的命名，各自有各自的習(xí)慣。中間的兩欄我命名為#main和#sidebar。于是在HTML里面#main要寫(xiě)在#sidebar前面，如下：。的例子，可以給#ft設(shè)定clear:both;，或者為#bd進(jìn)行easyclearing。因?yàn)?main的寬度是自適應(yīng)的，#sidebar的寬度又固定為350px，為你不知道兩者的高度。根據(jù)屏幕寬度不同，有時(shí)候是#sidebar比較。個(gè)人習(xí)慣或者根據(jù)需要。反向浮動(dòng)的方法，可以參考上面布局的CSS寫(xiě)法）。
【正文】 ouble margin 的 Bug */ float: left。 textalign: center。 liststyle: none。 } .itemlst li img{ padding: 10px。 } .itemlst li div{ width: 100%。 height: 120px。 /* 這樣把圖像所處的塊高度統(tǒng)一在 120px */ } .itemlst li p{ float: left。 height: 6em。 /* 最多顯示四行文字，再放大就不行了 */ lineheight: 。 } 查看至今為止的效果（通過(guò) Strict 驗(yàn)證，不過(guò)沒(méi)什么意思 _） 五、其他 ◎ 因?yàn)? FF 和 IE 對(duì)于 border: 1px dotted DDD 顯示的效果不一致。所以一般我會(huì)用背景代 替（本例沒(méi)有這么做）。 ◎ 文字大小的控制，在 body 中設(shè)置基準(zhǔn)值 small，然后使用百分比控制其他所有的文字大小。具體可以參考 Bulletproof Web Design，中文版圖書(shū)也已經(jīng)上市。另，這只是習(xí)慣而已，在國(guó)內(nèi)制作網(wǎng)頁(yè)請(qǐng)根據(jù)實(shí)際情況量力而為。 ◎ 關(guān)于第四部分的寫(xiě)法，在另外的文章內(nèi)有說(shuō)明。 ◎ 在 CSS 的一開(kāi)始，設(shè)定 *{margin: 0。padding: 0}，統(tǒng)一各個(gè)瀏覽器的細(xì)微的差別。 ◎ 最后設(shè)置各部分的字體和元素間的間距，完成整個(gè)頁(yè)面的制作。 查看最終效果 IE 下會(huì)有些局部的差異，大家有興趣的話，可以研究一下，這里僅為 Firefox 服務(wù)。 六、我們學(xué)到了什么 ◎ 利用 float 進(jìn)行布局，特別是第二部分里面的第二種寫(xiě)法很常用； ◎ 利用 position: absolute。 和 position: relative。 進(jìn)行局部定位； ◎ 列表項(xiàng)（ li）的浮動(dòng)塊狀顯示； ◎ 在制作符合標(biāo)準(zhǔn)的頁(yè)面時(shí)，需要考慮 resizing window 和 change font size 的問(wèn)題。
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1