在块内进行布局,无非是实现横向布局以及实现纵向布局;无论是纵向布局还是横向布局需要将块内容器的position属性设置为relative;即相同块的容器进行布局设置,实现横向布局的CSS示例:
//===================布局容器层========================
.div-top{
width: 80%;
height: 100px;
line-height: 100px;
margin: 0px;
margin-left: auto;
margin-right: auto;
top: 0;
right: 0;
left: 0;
position: fixed;
padding: 0;
background: -webkit-repeating-linear-gradient(#00FF00, #9AFF9A, #90EE90); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(#00FF00, #9AFF9A, #90EE90); /* Opera 11.1 - 12.0 */
background: -moz-repeating-linear-gradient(#00FF00, #9AFF9A, #90EE90); /* Firefox 3.6 - 15 */
background: repeating-linear-gradient(#00FF00, #9AFF9A, #90EE90); /* 标准的语法(必须放在最后) */
z-index: 1;
}
//============容器内坐标部分的层样式=========================
.span-contianer{
width: 20%;
height: 70px;
line-height: 70px;
margin: 0px;
left:0px;
position: relative;
float: left;
}
//==================容器内中间部分的样式=====================
.menu-contianer{
width: 50%;
height: 70px;
line-height: 70px;
margin: 0px;
padding: 0px;
left: 0px;
position: relative;
float: left;
}
//============容器内右边部分的样式========================
.fun-contianer{
width: 30%;
height: 70px;
line-height: 70px;
margin: 0px;
left:0px;
position: relative;
float: left;
}
以上三部分布局,通过设置width的占比,实现不同部分的左、中、右布局;
html代码如下示例:
<div class="div-top">
<div class="span-contianer">
<span>系统名称</span>
</div>
<div class="menu-contianer">
<ul class="listico">
<li><a href="#" target="_blank" class="ico1">话费</a></li>
<li><a href="#" target="_blank" class="ico2">机票</a></li>
<li><a href="#" target="_blank" class="ico3">彩票</a></li>
<li><a href="#" target="_blank" class="ico4">游戏</a></li>
</ul>
</div>
<div class="fun-contianer">
</div>
</div>
</div>
布局如图示意:
纵向容器层样式:
div .menuitem{
width: 80px;
height: 80px;
left: 0px;
float: left;
border: #CFCFCF 1px solid ;
margin: 5px;
position: relative;
border-radius: 5px;
text-align: center;
}
第一行内容部分样式:
div.menuitem li.leftli{
float:left;
color: black;
margin-left: 3px;
font-family: 微软雅黑;
font-size:x-small;
}
纵向布局中的中间部分容器层样式:
<!--宽度需要设置为100%,纵向居中(vertical-align: middle;)-->
div .centerfont{
width: 100%;
height: 30px;
vertical-align: middle;
horiz-align:center;
position: relative;
float: inherit;
top: 0px;
}
li.Centerli{
color: black;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
font-family: 微软雅黑;
font-size: larger;
}
<!--字体样式-->
div.menuitem li.rightli{
float:right;
color: black;
margin-right: 3px;
font-family: 微软雅黑;
font-size:x-small;
}
html部分示例代码: