css+html简单的布局demo
于html介绍css作风。可以改变html块状布局，局更加美观。接下来看一个基础布局的小样例：
<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进行布局。在实际中。感觉margin属性主要适用于块与块之间的布局，当我们要对盒子中的内容进行布局的时候，我们能够使用盒子的还有一个属性：padding，这个属性能够布局盒子内部的距离：
比如。我们增加padding属性，并在四个div中增加一些文字内容：
效果图：
注意，这里在实际做的时候，由于增加了padding值，导致了div最后不能并排显示在父div中。这里还改动了div的宽度值，使第四个div不至于被挤到以下去。
感觉增加css样式后。近期做的小demo跟曾经仅仅用html做的demo比起来，不仅布局上更加灵活多变，并且样式设置也比較简单了。
版权声明：本文博主原创文章，博客，未经同意不得转载。
