web標準實戰(zhàn)css網(wǎng)頁布局(編輯修改稿)
2024-10-10 16:47 本頁面
【文章內(nèi)容簡介】 th: 350px。 float: left。 /* 如果 float right，在 IE 下有問題，這里 fix 一下 */ marginleft: 60px。 /* 欄間距，即 gutter */ marginright: 410px。 /* 這一句很重要 */ } 查看至今為止的效果 如果我們在 HTML 里面先寫固定寬度的 sidebar，那么 CSS 相當(dāng)簡單了，只需將 sidebar 浮動到右邊，然后 main 再 marginright: 410px。 就可以了，很 solid。這樣 main 的寬度也自適應(yīng)了。 CSS 如下（實際項目中我會采用這種寫法，本例不是）： Example Source Code []sidebar{ float: right。 /* 注意在 HTML 里面 sidebar 寫在 main 前面 */ width: 350px。 } main{ marginright: 410px。 } 三、左欄新評論列表 剛才說了，這里可以用 dl、 ul、 ol 或者 div，用什么是個人習(xí)慣或者根據(jù)需要。我在這里用 ol，其他的寫法都可以由此擴展。 HTML 結(jié)構(gòu)代碼如下： Example Source Code []ol li h3這里是評論的標題 /h3 ! Logo 和各部分的大標題已經(jīng)使用了 h1 和 h2 p評論的作者頭像 img和其他信息 /p p評論的摘要 /p /li ... /ol 這里的圖片是用戶的頭像，所以我覺得應(yīng)該和用戶名放在一起。那么這種寫法，用絕對定位簡便一些。再提一下，如果使用浮動，必須給浮動的對象設(shè)置寬度，不然其寬度就會根據(jù)內(nèi)容計算，這里的 h3 就不大方便用反向浮動的方法，因為它需要自適應(yīng)寬度（如果用反向浮動的方法，可以參考上面布局的 CSS 寫法）。 好了，基本問題解釋清楚，我們開始寫這里的樣式（注意要清除 ol 的 margin）： Example Source Code [].ment{ lists
公司管理相關(guān)推薦
鄂ICP備17016276號-1