您當(dāng)前位置：首頁 > 互聯(lián)網(wǎng) > css+html簡單布局demo

css+html簡單布局demo

來源：程序員人生發(fā)布時(shí)間：2014-09-29 08:00:01 閱讀次數(shù)：1970次

在html中引入css樣式，可以改變html的塊布局方式，使得界面的布局更加美觀。接下來看一個(gè)基礎(chǔ)布局的小例子：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>margin布局</title> </head> <style type="text/css"> #container{ width: 1002px; background: gray; } #header{ height: 120px; background: orange; } #main{ background: green; height: 600px; } #lside{ width: 700px; height: 600px; float: left; background: pink; } .four{ width: 130px; height: 280px; float: left; margin: 10px; background: black; } #rside{ width: 302px; height: 600px; background: purple; float: right; } #footer{ height: 120px; background: blue; } </style> <body> <div id="container"> <div id="header"></div> <div id="main"> <div id="lside"> <div class="four"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> </div> <div id="rside"></div> </div> <div id="footer"></div> </div> </body> </html>

效果如下：

在上面的布局中，我們主要使用margin屬性來對div進(jìn)行布局，在實(shí)際中，感覺margin屬性主要適用于塊與塊之間的布局，當(dāng)我們要對盒子中的內(nèi)容進(jìn)行布局的時(shí)候，我們可以使用盒子的另一個(gè)屬性：padding，這個(gè)屬性可以布局盒子內(nèi)部的距離：

例如，我們加入padding屬性，并在四個(gè)div中加入一些文字內(nèi)容：