总结:
结构:
- 流式版心 -
<div class="container-fluid"> - 投标项目:这里要额外给个盒子套起来让他除了lg屏幕一直居中
<div>
<h4>投标，更轻松</h4>
<p>海量投标，自定筛选</p>
<p>立即投标，一步到位</p>
</div>
样式css:
3.先写移动端优先,从小到大
4. 焦点图:背景只要给个高就可以了
5.焦点图的三个盒子都要居中那就
6.投标项目:这里一定要给高.不然定位auto不居中
.item-l {
position: relative;
height: 100%;
}
focus-l div {
display: inline-block;
/* 控制行内元素，行内块元素垂直对齐 */
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="bootstrap/js/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<script src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 流式版心 -->
<div class="container-fluid">
<!-- 顶部栏 -->
<div class="row top-bar">
<div class="logo col-sm-2 col-sm-offset-1">
<img src="./images/logo.png" alt="" />
</div>
<div class="zstz col-sm-2 visible-lg">掌上投资</div>
<a href="#" class="btn btn-default col-sm-1 col-sm-offset-5 hidden-xs"
>灰马首页</a
>
</div>
<!-- 焦点图 -->
<div class="row focus">
<div class="focus-l col-lg-4 col-lg-offset-2">
<h2>灰马创投手机客户端</h2>
<h3>投资任我掌控</h3>
<div class="download">
<a href="#"><img src="./images/android_download.png" alt="" /></a>
<br />
<a href="#"><img src="./images/apple_download.png" alt="" /></a>
</div>
<div>
<img src="./images/code.png" alt="" />
</div>
</div>
<div class="focus-r visible-lg col-lg-3">
<img src="./images/app_pic.png" alt="" />
</div>
</div>
<!-- 投标项目 -->
<div class="row item1">
<div class="item-l col-lg-4 col-lg-offset-2">
<div>
<h4>投标，更轻松</h4>
<p>海量投标，自定筛选</p>
<p>立即投标，一步到位</p>
</div>
</div>
<div class="visible-lg col-lg-3 col-lg-offset-1">
<img src="./images/picshow01.png" alt="" />
</div>
</div>
</div>
</body>
</html>
CSS
.top-bar {
height: 70px;
line-height: 70px;
background-color: #eee;
}
/* 先写移动端 */
.logo {
text-align: center;
}
.zstz {
height: 60px;
line-height: 60px;
margin-top: 5px;
font-size: 25px;
border-left: 1px solid #333;
}
.top-bar a {
width: 100px;
height: 30px;
line-height: 30px;
margin-top: 20px;
padding: 0;
}
/* 焦点图 */
.focus {
position: relative;
height: 440px;
background: url(../images/banner_bg.jpg);
}
.focus-l {
text-align: center;
color: #fff;
}
.focus-l h2 {
font-size: 40px;
margin-top: 50px;
}
.focus-l h3 {
font-size: 25px;
}
.focus-l div {
display: inline-block;
/* 控制行内元素，行内块元素垂直对齐 */
vertical-align: middle;
}
.download a img {
margin-bottom: 10px;
margin-right: 10px;
}
/* 投标项目 */
.item1 {
height: 380px;
background-color: #ccc;
}
.item-l {
position: relative;
height: 100%;
}
.item-l div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
}
.item-l div h4 {
font-size: 30px;
}
.item1 img {
margin-top: 35px;
}
/* 积分管理 */
.item2 {
height: 450px;
background-color: #666;
}
.item2 img {
margin-top: 15px;
}
.item-r {
margin-top: 160px;
text-align: center;
height: 100%;
}
.item-r div h4 {
font-size: 30px;
}
