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