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