移动Web-03-流式布局

it2022-05-05 157

移动端布局核心 1.水平方向不能出现滚动条(禁止缩放，元素宽度超过视口的宽度) 2.需要适配宽度，高度使用固定值（高度允许出现滚动条）

百分比布局（流式布局）：宽度使用百分比，高度使用px 3.移动端盒子模型使用内减模型： box-sizing: border-box; 避免由于border和padding导致的水平滚动条的问题

拓展: 手机端的a标签会有背景颜色解决方法:给a标签添加如下代码

-webkit-tap-highlight-color: transparent;

京东首页-练习案例

html

<!DOCTYPE html> <html lang="zh-CN"> <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>京东首页</title> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> </head> <body>  <div class="container">  <div class="top-bar"> <a href="" class="menu"></a> <input type="text" placeholder="商品名称"> <a href="" class="login">登录</a> </div>  <div class="banner"> <img src="images/slide.png" alt=""> </div>  <div class="nav-bar"> <ul class="clearfix"> <li><a href=""><img src="images/nav01.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav02.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav03.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav04.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav05.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav06.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav07.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav08.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav09.png" alt=""><span>京东超市</span></a></li> <li><a href=""><img src="images/nav10.png" alt=""><span>京东超市</span></a></li> </ul> </div>  <div class="jd-news"> <span><span>热门 </span>价格太贵买不起</span> <a href="">更多</a> </div>  <div class="adv-list clearfix"> <a href=""><img src="images/adv01.jpg" alt=""></a> <a href=""><img src="images/adv02.jpg" alt=""></a> <a href=""><img src="images/adv03.jpg" alt=""></a> </div>  <div class="good-list"> <div class="good-title"><img src="images/goods_title.jpg" alt=""></div> <div class="good-list01 clearfix"> <a href="" class="clearfix"> <span>二手寻宝</span> <span>跳蚤市场逛一逛</span> <img src="images/goods.jpg" alt=""> <img src="images/goods.jpg" alt=""> </a> <a href="" class="clearfix"> <span>二手寻宝</span> <span>跳蚤市场逛一逛</span> <img src="images/goods.jpg" alt=""> <img src="images/goods.jpg" alt=""> </a> </div> <div class="good-list02 clearfix"> <a href=""> <span>爱是一道光</span> <span>绿到你发慌</span> <img src="images/goods.jpg" alt=""> </a> <a href=""> <span>爱是一道光</span> <span>绿到你发慌</span> <img src="images/goods.jpg" alt=""> </a> <a href=""> <span>爱是一道光</span> <span>绿到你发慌</span> <img src="images/goods.jpg" alt=""> </a> <a href=""> <span>爱是一道光</span> <span>绿到你发慌</span> <img src="images/goods.jpg" alt=""> </a> </div> </div>  <div class="bottom-bar clearfix"> <a href=""><img src="images/icon_index.png" alt=""></a> <a href=""><img src="images/icon_category.png" alt=""></a> <a href=""><img src="images/icon_center.png" alt=""></a> <a href=""><img src="images/icon_shopping.png" alt=""></a> <a href=""><img src="images/icon_mime.png" alt=""></a> </div> </div> </body> </html>

c’ss

/* 版心 */ .container{ width: 100%; /* 限制pc端版心范围 */ min-width: 320px; max-width: 750px; margin: 0 auto; } /* 1-搜索栏 */ .top-bar{ /* 固定定位相对于页面，想要居中显示也要限制版心范围 */ min-width: 320px; max-width: 750px; position: fixed; top:0; width: 100%; height: 44px; background-color: #E72E27; padding: 0px 50px; } .top-bar .menu{ position: absolute; left: 14px; top:14px; width: 20px; height: 18px; background: url(../images/jd_icons.png) no-repeat; background-size: 250px 200px; } .top-bar input{ width: 100%; height: 30px; margin-top: 7px; padding-left: 10px; border-radius: 15px; } .top-bar .login{ position: absolute; top: 0px; right: 0px; margin: 12px 12px auto; color: #fff; } /* 2-banner栏 */ .banner{ width: 100%; /* 注意点：固定定位fixed会脱标解决方案：设置元素margin撑开脱标的高度 */ margin-top: 44px; } .banner img{ width: 100%; } /* 3.导航栏 */ .nav-bar{ width: 100%; height: 175px; } .nav-bar ul{ width: 100%; } .nav-bar ul>li{ float: left; width: 20%; text-align: center; } .nav-bar ul>li img{ display: block; width: 40px; height: 40px; margin: 10px auto 5px; } /* 4.京东快报 */ .jd-news{ width: 100%; height: 16px; background: url(../images/jd_icons.png) no-repeat 8px -22px; background-size: 250px 200px; text-align: center; } .jd-news>span>span{ color: red; } .jd-news a{ float: right; padding: 0px 5px; border-left: 1px solid #E0E0E0; } /* 5.活动列表 */ .adv-list{ width: 100%; margin: 10px 0px; } .adv-list a{ display: block; float: left; width: 50%; padding: 0px 5px; } .adv-list a:nth-child(n+2){ width: 25%; border-left: 1px solid #e0e0e0; } .adv-list a img{ width: 100%; } /* 6.商品列表 */ .good-list{ width: 100%; /* 解决底部栏固定定位脱标问题 */ margin-bottom: 44px; } /* 商品头部 */ .good-list .good-title{ width: 100%; height: 35px; background-color: #F5F5F5; } .good-list .good-title img{ display: block; height: 100%; margin: 0 auto; } /* 商品列表01 */ .good-list .good-list01{ width: 100%; } .good-list .good-list01 a{ display: block; float: left; width: 50%; text-align: center; } .good-list .good-list01 a:nth-child(2){ border-left: 1px solid #e0e0e0; } .good-list .good-list01 a span{ display: block; } .good-list .good-list01 a span:nth-child(1){ font-size: 16px; } .good-list .good-list01 a span:nth-child(2){ color: #779CFF; } .good-list .good-list01 a img{ float: left; width: 50%; padding: 5px; } /* 商品列表02 */ .good-list .good-list02{ width: 100%; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; } .good-list .good-list02 a{ display: block; float: left; width: 25%; text-align: left; padding: 5px; } .good-list .good-list02 a:nth-child(n+2){ border-left: 1px solid #e0e0e0; } .good-list .good-list02 a span{ display: block; } .good-list .good-list02 a span:nth-child(1){ font-size: 16px; } .good-list .good-list02 a span:nth-child(2){ color: green; } .good-list .good-list02 a img{ width: 100%; } /* 7.底部栏 */ .bottom-bar{ position: fixed; bottom: 0px; width: 100%; height: 44px; background-color: #fff; } .bottom-bar a{ float: left; width: 20%; } .bottom-bar a img{ width: 44px; height: 44px; display: block; margin: 0 auto; }

专利

最新回复(0)