商院官网：盒子的美化
来自CloudWiki
要点
学了盒子的内外边距之后，再设计网页，应注意以下几点：
- 盒子的width属性实际表示的是盒子内容的宽度
- 盒子的width ,padding ,margin 几个值加起来等于盒子的总宽度
- 盒子有了实际内容之后，父盒子和子盒子的高度一般设计为auto，以自适应内容长度。
源代码
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>山东商职</title>
<style type="text/css">
*{ margin:0;padding:0;}
.head{
width:100%;
height:100px;
background:#069;
}
.main{
width:100%; height:auto; background:#FC0;
}
.m1{
width:25%; height:auto; background:#093; float:left;
margin:2%;padding:2%;
}
.m2{
width:25%; height:auto; background:#F90; float:left;
margin:2%;padding:2%;
}
.m3{
width:25%; height:auto; background:#666; float:left;
margin:2%;padding:2%;
}
.clear{ clear:both; }
.footer{ width:100%; height:100px; background:#F60; }
</style>
</head>
<body>
<div class="head"></div>
<div class="main">
<div class="m1">
<h2>院部简讯</h2>
<p>图书馆举行校友捐书仪式暨励志专题讲座 10-26</p>
<p>食品药品学院党总支举行“学先进模范… 10-26</p>
<p>智能制造与服务学院举行2018-2019学年… 10-26</p>
</div>
<div class="m2">
<h2>院部简讯</h2>
<p>图书馆举行校友捐书仪式暨励志专题讲座 10-26</p>
<p>食品药品学院党总支举行“学先进模范… 10-26</p>
<p>智能制造与服务学院举行2018-2019学年… 10-26</p>
</div>
<div class="m3">
<h2>院部简讯</h2>
<p>图书馆举行校友捐书仪式暨励志专题讲座 10-26</p>
<p>食品药品学院党总支举行“学先进模范… 10-26</p>
<p>智能制造与服务学院举行2018-2019学年… 10-26</p>
</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
