一个div，包含三个小的div,平均分布的样式

从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标签，定义字体颜色和字体大小