web標(biāo)準(zhǔn)實(shí)戰(zhàn)css網(wǎng)頁(yè)布局-展示頁(yè)
2024-09-16 16:47本頁(yè)面
【正文】 大于右側(cè)。在 CSS 里面，一般習(xí)慣用中劃線法（如 mentlist）、下劃線法（如 ment_list）、駱駝命名法（如 mentList）和帕斯卡命名法（如 CommentList），我個(gè)人比較傾向于使用下劃線法。 二、基本布局代碼 參照 Yahoo! UI Lib Grids，我把上中下三行分別命名為 hd、 bd、 ft，是 header、 body 和 footer 的縮寫(xiě)。這直接影響到后面樣式表的寫(xiě)法。誰(shuí)有辦法請(qǐng)不吝告知。所以我把 img 和用戶(hù)名那一行寫(xiě)在一起。固定寬度（或高度） 是一件很危險(xiǎn)的事，除非你也固定了文字大小，不然當(dāng)文字被放大顯示后，很容易出錯(cuò)（不過(guò)用表格的話就不用考慮這么多）。另外如果兩欄都是百分比寬度，那么也好處理。除去頭尾，中間的兩欄，左欄是自適應(yīng)，右欄是固定寬度（ 350px）。本文《 Web 標(biāo)準(zhǔn)實(shí)戰(zhàn) CSS 網(wǎng)頁(yè)布局 豆瓣首頁(yè) 網(wǎng)頁(yè)制作 web 標(biāo)準(zhǔn)》關(guān)鍵詞：網(wǎng)頁(yè)制作 ,web 標(biāo)準(zhǔn) 前言 ◎ 下文中的例子以豆瓣用戶(hù)登錄后的頁(yè)面為基礎(chǔ)，各人顯示的內(nèi)容可能有所差別； ◎ 這次并不強(qiáng)求像素級(jí)的一致，特別是行距、間距部分可能有細(xì)微出入； ◎ 理解本文需要你對(duì) HTML 和 CSS 有所了解，最好能夠手寫(xiě) HTML 和 CSS 代碼； ◎ 詳細(xì)閱讀本文可能會(huì)花上你 15 分鐘以上時(shí)間； ◎ 本文遵循 Code for the best, fix for the rest 原則。 一、分析結(jié)構(gòu) 布局難點(diǎn) 豆瓣的首頁(yè)是典型的三行兩欄的布局，不過(guò)有特殊之處。這樣的布局，如果不考慮先加載哪部分內(nèi)容（及語(yǔ)義），有相當(dāng)簡(jiǎn)便的寫(xiě)法。不過(guò)事實(shí)是右欄的寬度是固定的（并且我計(jì)劃讓左欄先加載）。 其他難點(diǎn) ◎ 左欄的新評(píng) 論列表 ◎ 我覺(jué)得那是一個(gè)有序列表（ Ordered List），所以在代碼中用 ol 標(biāo)簽；也可以用 dl 或者直接寫(xiě) div ◎ 列表左側(cè)的圖片，是用戶(hù)的頭像而不是書(shū)的封面。 ◎ 右欄的豆瓣推薦和友鄰的樣式
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1