Head: need to set the width and height to 100%; --overflow:hidden;
body{
width:100%;
min-height: 100%;
/* height:auto;*/
position: relative
}
.container-fuild{
background-size: 100% 100%;
height:100%;
margin: 0;
padding: 0;
}
.second{
background-image: url(../images/erjiBG_02.jpg);
background-repeat: no-repeat;
width:100%;
min-height: 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
每块内容的包裹的大div
*****.second .row{
width:100%;
}
.second .tiao{
background-image: url(../images/title_bg.png);
background-repeat: no-repeat;
width:100%;
margin-top: 50px;
-webkit-background-size: 100% auto;
background-size: 100% auto;
height:92px;
position: relative;
}
.second .yingyuan{
position: absolute;
right:260px;
top:-10px;
width:260px;
}
.second .back{
position: absolute;
top:-10px;
right:100px;
width:90px;
}
html:<div class="row logowrap ">
<!-- 左右各一个空的div各占一份 -->
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<img src="images/logo.png" class="logo"/>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>
When there are six buttons in the middle: specify the fixed width of each button respectively,
<div class="col-lg-2 col-md-4 col-sm-4 col-xs-6">
<img src="images/index001a.png" alt="" class="f_btn yingyuan1 yingyuan">
</div>
Independent large picture: Make the width of this picture fixed
<div class="row mapwrap ">
<!-- 左右各一个空的div各占一份 -->
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<img src="images/map.png" class="map"/>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>
Three contents in one line: specify the fixed width of box_wrap
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="box_wrap">
<div class="boxImg"></div>
<p>一体机 国际交流</p>
<span class="btn1">开启</span>
<span class="btn2">关闭</span>
</div>
</div>
***The text above and below the image is wrapped in a large div
.five .boxImg{
width: 120px;
height: 120px;
background-image: url(../img/10.png);
background-repeat: no-repeat;
background-color: #fdf8de;
background-position: center;
border-radius: 10%;
**margin: 0 auto;
}
.five .box_wrap{
width:300px;
text-align: center;
margin: 0 auto;
}
.five .box_wrap p{
font-size: 22px;
color:#ffd699 ;
margin-top: 15px;
padding-bottom: 10px;
}
For some buttons or content, the sizes displayed on different screens are different, so you need to set the size of the screen display for each size?
@media (min-width: 320px){
.five{
background-image: url(../img/erjiBG_02.jpg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
}
.five .content_dier>div{
margin-top: 30px;
}
.five .dier{
position: absolute;
right:100px;
top:-8px;
width:100px ;
}
.five .name_module{
margin-bottom: 10px;
}
.five .dier_name{
font-size: 20px;
color:#ffd699 ;
display: inline-block;
text-align: left;
width: 80px;
}
.five .back{
position: absolute;
right:40px;
top:-10px;
width:40px ;
}
}
@media (min-width: 768px){
.five{
background-image: url(../img/erjiBG_02.jpg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
}
.five .content_dier>div{
margin-top: 60px;
}
.five .name_module{
margin-bottom: 10px;
}
.five .dier_name{
font-size: 20px;
color:#ffd699 ;
display: inline-block;
text-align: left;
width: 80px;
}
.five .dier{
position: absolute;
right:180px;
top:-10px;
width:200px ;
}
.five .back{
position: absolute;
right:60px;
top:-10px;
width:73px ;
}
}
@media (min-width: 996px){
.five{
background-image: url(../img/erjiBG_02.jpg);
background-repeat: no-repeat;
width: 100%;
background-size: cover;
min-height: 100%;
}
.five .content_dier>div{
margin-top: 60px;
}
.five .dier{
position: absolute;
right:260px;
top:-10px;
width:260px ;
}
.five .name_module{
margin-bottom: 10px;
}
.five .dier_name{
font-size: 20px;
color:#ffd699 ;
display: inline-block;
text-align: left;
width: 80px;
}
.five .back{
position: absolute;
right:100px;
top:-10px;
width:90px ;
}
}
@media (min-width: 1200px){
.five{
min-height: 100%;
}
body{
*****overflow: hidden;
}
.five .dier{
position: absolute;
right:260px;
top:-10px;
width:260px ;
}
.five .back{
position: absolute;
right:100px;
top:-10px;
width:90px ;
}
}