web標準實戰(zhàn)css網頁布局-在線瀏覽
2024-11-07 16:47本頁面
【正文】 ◎ 我們常見的是固定高度的塊依次浮動排列，但是這里書名的長度不一、圖片大小不一且底部對齊，浮動塊的高度未知，我沒辦法，只能暫時限定高度。 在分析結構的時候，我們一定要知道，我們需要先 寫什么，然后再寫什么。并且我的建議是，當結構確定下來之后，不要輕易改動。關于 id 和 class 的命名，各自有各自的習慣。 中間的兩欄我命名為 main 和 sidebar。于是在 HTML 里面 main 要寫在 sidebar 前面，如下： Example Source Code []div id=hd/div div id=bd div id=main/div div id=sidebar/div /div div id=ft/div 樣式表怎么寫呢？ hd、 ft 可以先不管， bd 因為其內部有浮動，不能自適應高度，所以需要清除浮動，方法有很多。本文的例子，可以給 ft 設定 clear: both。 因為 main 的寬度是自適應的， sidebar 的寬度又固定為 350px，在 HTML 里面又是 main 在前，所以不能用簡單的浮動（浮動的元素必須設定寬度，否則會根據內容取寬度），也不能用絕對定位，因為你不知道兩者的高度。所以我用了一種 不常用的辦法（我不太喜歡這種負值 margin 的寫法），如下： Example Source Code []bd{ paddingright: 410px。 float: left。 float: left。 /* 欄間距，即 gutter */ marginright: 410px。 就可以了，很 solid。 CSS 如下（實際項目中我會采用這種寫法，本例不是）： Example Source Code []sidebar{ float: right。 } main{ marginright: 410px。我在這里用 ol，其他的寫法都可以由此擴展。那么這種寫法，用絕對定位簡便一些。 好了，基本問題解釋清楚，我們開始寫這里的樣式（注意要清除 ol 的 margin
公司管理相關推薦
鄂ICP備17016276號-1