职责没做到,继续来!因为刚才网糟糕,笔者辛劳打了很多洒洒一大堆都没了!

咱俩明天第一是说三个不难的由Bootstrap和HTML5结缘而成的小案例:

首先:由标题可查出,那是移动端,所以必要那样一串代码:

<meta
name=”viewport” content=”width=device-width,initial-scale=1″/>

然后说Bootstrap拟态框,就还要有诸如此类的插件:

    <link type =”text/css” href=”../dist/css/bootstrap.min.css”
rel=”stylesheet”>

  <script src=”../dist/js/bootstrap.js”></script>

下一场,有一点基础的都精通bootstrap,一定要和jquery一同利用,所以还要有jquery类库; 而且一定要放在bootstrap上边哦!各位亲们!

<script src=”../jquery-3.1.1.min.js”></script>

先来看1眼效果:有一点丑!不要提议,因为是PC端敲得!笔者动用浏览器WEB响应格式看的功用,见谅,见谅!

永利开户送38元体验金 1

下边再来看一眼,拟态框的效果:

永利开户送38元体验金 2

永利开户送38元体验金,作用正是那般!

插件都计划好了,大家来敲代码吧!

首先CSS的:在此间小提醒一下,笔者用的是谷歌(谷歌(Google))浏览器,CSS3的体制有个别低版本的浏览器是不包容的,所以就相比麻烦!更过几天自身在更有壹篇有关包容难题的!

  1 <style>
  2         body{
  3             margin: 0 auto;
  4             padding: 0;
  5         }
  6             nav{
  7                 width: 100%;
  8                 height: 35px;
  9             }
 10             article{
 11                 width: 100%;
 12                 background-color: #1983D1;
 13             }
 14             .div2{
 15                 width: 100%;
 16                 height: 30px;
 17                 line-height: 30px;
 18                 background-color: #1983D1;
 19             }
 20             .div2>input{
 21                 width: 78%;
 22                 height: 25px;
 23                 border: 0;
 24                 background-color: #2F8DD5;
 25                 /*border: 1px solid #2F8DD5;*/
 26                 border-radius: 5px;
 27                 margin-left: 1vw;;
 28             }
 29             /*改变输入框   提示字体颜色*/
 30             input::placeholder{
 31                 color: #8DC0E4;
 32             }
 33             .div2>button{
 34                 width: 9%;
 35                 height: 25px;
 36                 background-color: #1983D1;
 37                 border: 0;
 38                 font-size: 3vw;
 39                 color: white;
 40             }
 41             .section1>ul{
 42                 list-style: none;
 43                 display: flex;
 44                 justify-content:space-around;
 45                 align-items:center;
 46                 width: 100%;
 47                 height: 10vw;
 48                 margin-left: -30px;
 49             }
 50             .section1>ul>li{
 51                 width: 24%;
 52                     color: white;
 53                 font-size: 2.5vw;
 54                 text-align: center;
 55                 margin-top: 2px;
 56             }
 57             .section2{
 58                 background-color: white;
 59                 width: 100%;
 60             }
 61             
 62             .section2>ul{
 63                 
 64                 list-style: none;
 65                         display: flex;
 66                 justify-content:space-around;
 67                 align-items:center;
 68                 width: 100%;
 69                 height: 6rem;
 70                 margin-left: -30px;
 71             }
 72             .section2>ul>li{
 73                 width: 24%;
 74                     /*color: white;*/
 75                 font-size: 2vw;
 76                 text-align: center;
 77                   margin-top: 2px;
 78             }
 79             .section2>ul>li>span{
 80                 font-size: 2.5rem;
 81             }
 82             .section3{
 83                 width: 100%;
 84                 height: 90px;
 85                 line-height: 90px;
 86             }
 87             .section3 img{
 88                 width: 20%;
 89                 height: 90px;
 90                 margin-top: -10px;
 91                 margin-left: 2vw;
 92                 border-radius: 15px;
 93             }
 94             .section4{
 95                 margin-top: -4vw;
 96                 width: 100%;
 97                 height: 49vw;
 98             }
 99             .section4>img{
100                 width: 100%;
101                 height: 49vw;
102             }
103             footer>ul{
104                 width: 100%;
105                 height: 50px;
106                 /*line-height: 98px;*/
107                 list-style: none;
108                 display: flex;
109                 justify-content: space-between;
110                 margin-left: -1.5vw;
111             }
112             footer>ul>li{
113                 width: 24%;
114                 height: 48px;
115                 font-size: 3vw;
116                 text-align: center;
117                 color: #A9A9A9;
118                 margin-top: 3vw;
119             }
120         </style>        

CSS好了.

我们下边在敲一下HTML:

<body>
  <nav>
   <img src="1.png" style="width: 100%;height: 35px;" />
  </nav>
  <div class="div1"></div>
  <div class="div2">
   <input type="search" placeholder="   蚂蚁花呗" />
   <button></button>
   <button data-toggle="modal" data-target="#kuang" data-backdrop="true"></button>
  </div>
  <!--模态框-->
  <div class="modal fade modal-sm" id="kuang" style="width: 30%; margin-left: 65%;">
   <div class="modal-dialog modal-sm">
    <div class="modal-content">
     <!--体-->
     <div class="modal-body">
      <ul style="list-style: none; color:#6B6B6B;font-size: 2vw;">
       <li>  发起群聊</li>
       <li>  添加朋友</li>
       <li>  扫 一 扫</li>
       <li>  我要收款</li>
      </ul>
     </div>
    </div>
   </div>
  </div>
  <article>
   <section class="section1">
    <ul>
     <li>

      <div>扫一扫</div>
     </li>
     <li>

      <div>付款</div>
     </li>
     <li>

      <div>收钱</div>
     </li>
     <li>

      <div>卡包</div>
     </li>
    </ul>
   </section>

   <section class="section2">
    <ul>
     <li>

      <div>转账</div>
     </li>
     <li>

      <div>信用卡还贷</div>
     </li>
     <li>

      <div>充值中心</div>
     </li>
     <li>

      <div>红包</div>
     </li>
    </ul>
    <ul>
     <li>

      <div>地图</div>
     </li>
     <li>

      <div>理财产品</div>
     </li>
     <li>

      <div>免费无线</div>
     </li>
     <li>

      <div>安全须知</div>
     </li>
    </ul>
   </section>
  </article>
  <hr style="background-color: #C3C3C3;width: 100%; height: 10px;" />

  <section class="section3">
   <img src="2.png" class="img-responsive" />

  </section>
  <hr style="background-color: #C3C3C3;width: 100%; height: 10px;" />
  <section class="section4">
   <img src="3.png" class="img-responsive" />
  </section>
  <footer>
   <ul>
    <li style="color: #1983D1;">

     <div>支付宝</div>
    </li>
    <li>

     <div>朋友</div>
    </li>
    <li>

     <div>口碑</div>
    </li>
    <li>

     <div>我的</div>
    </li>
   </ul>
  </footer>

  <script src="../jquery-3.1.1.min.js"></script>
  <script src="../dist/js/bootstrap.js"></script>
 </body>

  HTML便是那般!

小编那中间还有二个响应布局的代码!是把rem全都转化成px的:

<script>
 (function(doc) {
  function changeSize() {
   var size = doc.documentElement.clientWidth / 320 * 10;
   doc.querySelector('html').style.fontSize = size + 'px';
  }
  window.onresize = changeSize;
  changeSize();
 })(document)
</script>

 好勒!那便是Bootstrap拟态框结合的支付宝首页!

有何不晓得的,接待研究里发问哦!小编看看会挨个解答的!

相关文章