常用網站布局css執行個體

來源:互聯網
上載者:User
這裡列出的是常用的例子,而非研究之用,對一每個盒子,都沒有設定margin,padding,boeder等屬性。

單行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; } 
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 

兩行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center;} 
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

三行一列
以下是引用片段:
body { margin: 0px; padding: 0px; text-align: center; } 
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 

單行兩列
以下是引用片段:
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } 
#bodycenter #dv1 {float: left;width: 280px;} 
#bodycenter #dv2 {float: right;width: 410px;} 

兩行兩列
以下是引用片段:
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} 
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 
#bodycenter #dv1 { float: left; width: 280px;} 
#bodycenter #dv2 { float: right;width: 410px;}

三行兩列
以下是引用片段:
#header{ width: 700px;margin-right: auto; margin-left: auto; } 
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; } 
#bodycenter #dv1 { float: left;width: 280px;} 
#bodycenter #dv2 { float: right; width: 410px;} 
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 

單行三列
絕對位置
以下是引用片段:
#left { position: absolute; top: 0px; left: 0px; width: 120px; } 
#middle {margin: 20px 190px 20px 190px; } 
#right {position: absolute;top: 0px; right: 0px; width: 120px;} 

float定位一
xhtml:
以下是引用片段:
<div id="warp"> 
<div id="column"> 
<div id="column1">這裡是第一列</div> 
<div id="column2">這裡是第二列</div> 
<div class="clear"></div> 
</div> 
<div id="column3">這裡是第三列</div> 
<div class="clear"></div> 
</div> 

CSS:
以下是引用片段:
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;} 

float定位二
xhtml:
以下是引用片段:
<div id="center" class="column"> 
<h1>This is the main content.</h1> 
</div> 
<div id="left" class="column"> 
<h2>This is the left sidebar.</h2> 
</div> 
<div id="right" class="column"> 
<h2>This is the right sidebar.</h2> 
</div> 

CSS:
以下是引用片段:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;} 
.column {position: relative;float: left;} 
#center {width: 100%;} 
#left {width: 180px; right: 240px;margin-left: -100%;} 
#right {width: 130px;margin-right: -100%;} 

兩行三列
xhtml:
以下是引用片段:
<div id="header">這裡是頂行</div> 
<div id="warp"> 
<div id="column"> 
<div id="column1">這裡是第一列</div> 
<div id="column2">這裡是第二列</div> 
<div class="clear"></div> 
</div> 
<div id="column3">這裡是第三列</div> 
<div class="clear"></div> 
</div> 

CSS:
以下是引用片段:
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;} 

三行三列
xhtml:

以下是引用片段:
<div id="header">這裡是頂行</div> 
<div id="warp"> 
<div id="column"> 
<div id="column1">這裡是第一列</div> 
<div id="column2">這裡是第二列</div> 
<div class="clear"></div> 
</div> 
<div id="column3">這裡是第三列</div> 
<div class="clear"></div> 
</div> 
<div id="footer">這裡是底部一行</div> 

CSS:
以下是引用片段:
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;} 
#footer{width:100%; height:auto;} 

PS:這裡列出的是常用的例子,而非研究之用,對一每個盒子,都沒有設定margin,padding,boeder等屬性!



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。