<body> <nav> <img src="1.png" /> </nav> <div></div> <div> <input type="search" placeholder=" 蚂蚁花呗" /> <button><span></span></button> <button data-toggle="modal" data-target="#kuang" data-backdrop="true"><span></span></button> </div> <!--模态框--> <div> <div> <div> <!--体--> <div> <ul> <li><span></span> 发起群聊</li> <li><span></span> 添加朋友</li> <li><span></span> 扫 一 扫</li> <li><span></span> 我要收款</li> </ul> </div> </div> </div> </div> <article> <section> <ul> <li> <span></span> <div>扫一扫</div> </li> <li> <span></span> <div>付款</div> </li> <li> <span></span> <div>收钱</div> </li> <li> <span></span> <div>卡包</div> </li> </ul> </section> <section> <ul> <li> <span></span> <div>转账</div> </li> <li> <span></span> <div>信用卡还贷</div> </li> <li> <span></span> <div>充值中心</div> </li> <li> <span></span> <div>红包</div> </li> </ul> <ul> <li> <span></span> <div>地图</div> </li> <li> <span></span> <div>理财产品</div> </li> <li> <span></span> <div>免费无线</div> </li> <li> <span></span> <div>安全须知</div> </li> </ul> </section> </article> <hr /> <section> <img src="2.png" /> <span></span> </section> <hr /> <section> <img src="3.png" /> </section> <footer> <ul> <li> <span></span> <div>支付宝</div> </li> <li> <span></span> <div>朋友</div> </li> <li> <span></span> <div>口碑</div> </li> <li> <span></span> <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拟态框结合的支付宝首页!
有什么不明白的,欢迎评论里提问哦!我看到会一一解答的!
相关文章
精彩导读
热门资讯
关注我们
