div骨架

Code
????<div?id="header">ss</div>
????<div?id="container">
????????<div?id="content">ss</div>
????????<div?id="side">ss</div>
????</div>
????<div?id="pagefooter">ss</div>

css樣式

1-2-1布局? 絕對定位法

Code
<style>
????div{}{
????????border:solid?1px?red;
????}
????#header,#container,#pagefooter{}{
????????margin:0?auto;
????????width:760px;
????}
????#container{}{
????????position:relative;
????}
????#content{}{
????????position:absolute;
????????top:0;
????????left:0;
????????width:500px;
????}
????#side{}{
????????margin:0?0?0?500px;
????}
</style>

1-2-1布局 浮動法

Code
<style>
????div{}{
????????border:solid?1px?red;
????}
????#header,#container,#pagefooter{}{
????????margin:0?auto;
????????width:760px;
????}
????#content{}{
????????float:left;
????????width:498px;
????}
????#side{}{
????????float:left;
????????width:258px;
????}
????#pagefooter{}{
????????clear:both;
????}
</style>

轉載于:https://www.cnblogs.com/zjm1126qqcom/archive/2009/02/19/1393809.html

總結

以上是生活随笔為你收集整理的css 一些 常用布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。