17-2 移动web开发响应式布局 bootstrap框架灰马创投项目_移动web开发 bootstrap 登录 rem-CSDN博客

本文链接：https://blog.csdn.net/weixin_48200589/article/details/107192323

总结:

结构:

流式版心 -<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;
}