从11月份开始，自学前端开发，写静态页面中，经常用到一个大的div下包含三个小的div,平均分布div大小样式，写过多次，也多次忘记，每次都要现找资料，不想之后，在这么麻烦，索性今天自己记录一下，方便后面用的好找。
写出的效果如图：
html：
<div class="bigdiv">
<div class="top">
<h1>....</h1>
</div>
<div class="center">
<div class="centerall"><img src=".." /><h3>XXX</h3><p>XXXXXXX</p></div>
<div class="centerall"><img src=".." /><h3>XXX</h3><p>XXXXXXX</p></div>
<div class="centerall"><img src=".." /><h3>XXX</h3><p>XXXXXXX</p></div>
</div>
<div class="foot"><a href="..." target="_blank"></a></div>
</div>
Css:
.bigdiv{
width:1420px;
position:relative;
overflow:auto;
background: url(..);
text-align: center;
}
.centerall {
width: 33.33%;
float: left;
}
.top,.center,.foot{
text-align: center;
}
.center,.foot{
margin: 0 0 0 200px;
width: 1000px;
}
.centerall img{
width: 100px;
height: 100px;
}
这样就可以写出div下包含三个小div，平均分布的样式。
如图中的按钮，则是用a链接，换成块元素使用，直接定义a 的css样式
a{display: inline-block;background:url(..); border-style:none; width:124px; height:35px; background-repeat:no-repeat;}
a{margin:20px auto;text-align: center;}
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}
同一行文字，显示不同的字体大小和字体颜色，例如：
<p><span style="font-size:20px;color: #7d6e68;">通过紫鸟数据魔方</span><span style="font-size:30px;color: #7d6e68;">专属链接</span></p>
直接使用span标签，定义字体颜色和字体大小
