CSS平铺图片
.main_bg{ /*中部框架背景图片*/
background:url(../img/bg.png) repeat #2c3947;
}
.business{ /*中部框架顶部框架*/
/*
font-weight:设置文本字体的粗细
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。*/
width:70%;
padding:1% 1%;
margin:0 auto;
background:#2c3947;
color:red;
font-weight:bold;
/*表格边框:solid 实线 1px */
border-left:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
}
.grids_1_of_3{ /*中部框架底部框架设计*/
padding: 1.5% 0;
text-align:center;
background:#2c3947;
margin:0 auto;
border:1px solid red;
}
.grid_1_of_3{ /*中部框架底部框架显示*/
float:left;
}
.grid_1_of_3:first-child {
margin-left: 0;
}
.images_1_of_3 {
width: 20%;
background:url(../img/right.jpg) no-repeat right;
/*
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-repeat 属性设置是否及如何重复背景图像。
*/
}
<!-- start mian -->
<div class="main_bg"> <!-- 中部框架背景图片 -->
<div class="business"> <!-- 中部框架顶部框架 -->
业务领域 BUSINESS
</div>
<div class="wrap w_72">
<div class="grids_1_of_3"> <!-- 中部框架底部框架 -->
<div class="grid_1_of_3 images_1_of_3">
<img src="img/pic1.png">
</div>
<div class="grid_1_of_3 images_1_of_3">
<img src="img/pic2.png">
</div>
<div class="grid_1_of_3 images_1_of_3">
<img src="img/pic3.png">
</div>
<div class="grid_1_of_3 images_1_of_3">
<img src="img/pic4.png">
</div>
<div class="grid_1_of_3 images_1_of_3">
<img src="img/pic5.png">
</div>
<div class="clear"></div> <!-- 清除浮动 -->
</div>
</div>
</div>
<!-- start mian -->