android京东流式布局,京东移动端首页流式布局 |
您所在的位置:网站首页 › 京东移动端布局 › android京东流式布局,京东移动端首页流式布局 |
流式布局京东移动端首页实践(流式布局即百分比布局) 主要知识点:meta视口标签&背景缩放&结构伪类选择器&定位&二倍精灵图 HTML结构 JD![]() ![]() 京东超市 京东超市 京东超市 京东超市 京东超市 京东超市 京东超市 京东超市 京东超市 京东超市 思路复盘 头部:一个大盒子里面装四个小盒子,给小盒子设置浮动和百分比宽度 search模块:*.search-wrap大盒子里放三个小盒子,大盒子设置固定定位,小盒子设置绝对定位和相对定位 *中间的.search盒子里又分为三个小盒子,前两个图标使用二倍精灵图制作,后跟一个input表单 nav模块:*.nav大盒子里放十个a,每个a里面放一个img和span *每个a的宽度设置为20%并给浮动 bottom-nav模块:固定定位,a里面放img CSS代码 body { margin: 0 auto; width: 100%; max-width: 750px; min-width: 320px; background: #fff; font-size: 14px; font-family: -apple-system, sans-serif; line-height: 1.5; color: #666; box-sizing: border-box; } img { vertical-align: middle; } /* 头部 */ .app { height: 45px; } .app div { float: left; color: #fff; line-height: 45px; text-align: center; } .app div:nth-child(1) { width: 8%; } .app div:nth-child(1) img { width: 12px; vertical-align: middle; } .app div:nth-child(2) { width: 10%; } .app div:nth-child(2) img { width: 30px; vertical-align: middle; } .app div:nth-child(3) { width: 57%; } .app div:nth-child(-n+3) { background-color: #333; } .app div:nth-child(4) { width: 25%; background-color: #f63515; } /* 搜索模块 */ .search-wrap { position: fixed; overflow: hidden; height: 44px; width: 100%; max-width: 750px; min-width: 320px; } .search-wrap .search-btn { position: absolute; top: 0; left: 0; } .search-wrap .search-btn::before { content: ""; display: block; width: 20px; height: 18px; background: url(../img/s-btn.png) no-repeat; background-size: 20px 18px; margin: 14px 0 0 15px; } .search-wrap .search-logion { position: absolute; top: 0; right: 0; color: #fff; width: 40px; height: 40px; line-height: 40px; } .search-wrap .search { position: relative; margin: 7px 50px 0 50px; background-color: #fff; border-radius: 15px; text-align: center; height: 30px; } .search-wrap .search .jd-icon { position: absolute; top: 7px; left: 10px; width: 20px; height: 15px; border-right: 1px solid #ddd; padding-right: 4px; background: url(../img/jd-sprites.png) no-repeat; background-position: 0 0; background-size: 200px auto; } .search-wrap .search .sou { position: absolute; top: 7px; left: 35px; width: 18px; height: 15px; background: url(../img/jd-sprites.png) no-repeat; background-size: 200px; background-position: -80px 0; } .search-wrap .search input { position: absolute; top: 6px; left: 65px; outline: none; border: none; color: #666; display: inline-block; text-transform: none; } /* focus 模块 */ .focus img { width: 100%; } /* brand模块 */ .brand { border-radius: 15px 15px 0 0; overflow: hidden; } .brand>div { width: 33.33%; float: left; } .brand>div img { width: 100%; } /* nav模块 */ nav { padding-top: 5px; } nav a { width: 20%; display: block; text-decoration: none; float: left; color: #666; } nav a img { width: 40px; padding-left: 15px; margin: 5px 0; } /* news模块 */ .news a:nth-child(1) { width: 50%; } .news a:nth-child(n+2) { width: 25%; border-left: 1px solid #ddd; } .news a { float: left; margin-top: 5px; box-sizing: border-box; } .news a img { width: 100%; } /* bottom-nav模块 */ .bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; } .bottom-nav a { width: 20%; float: left; } .bottom-nav a img { width: 100%; } 知识点浅解 二倍精灵图:*将精灵图缩放为原来的一半background-size *给x、y位置的时候也写为原本位置的一半backgroun-position input表单外边框的去除:outline:none;& border:none; 效果展示(手机模型为iPhone8) |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |