仿京东移动端
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿京东移动端相关的知识，希望对你有一定的参考价值。
2016-11-19 23:52:51
第一次写博客，语言组织什么的不够成熟。可能写的不太好，有什么不足之处，希望可以提出并指导我一下，谢谢
最近在学习移动端。所以找了京东移动端http://m.jd.com/ 来模仿。
京东移动端开始
html页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <!-- 设置视口标签 让布局视口的大小等于手机设备的大小--> 6 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <link rel="stylesheet" href="css/base.css"> 8 <link rel="stylesheet" href="css/index.css"> 9 <title>Document</title> 10 </head> 11 <body> 12 <!-- 头部区域 --> 13 <header class="jd_header"> 14 <div class="left fl my_icons jd_icons_logo my_center"> 15 </div> 16 <a href="#" class="right fr">登录</a> 17 <div class="center my_icons jd_icons_search my_center_y"> 18 <input type="search" placeholder="家纺超级品类日，领券满799减400！"> 19 </div> 20 </header> 21 22 <!-- 焦点图区域 --> 23 <section class="course"> 24 <ul class="course_wrap"> 25 <li><a href="#"><img src="images/imgs/banner01.jpg" alt=""></a></li> 26 </ul> 27 <ol class="points_wrap"> 28 <li class="active"></li> 29 </ol> 30 </section> 31 32 <!-- 导航区域 --> 33 <nav class="jd_nav"> 34 <ul class="clearfix"> 35 <li class="w20 fl"> 36 <a href=""> 37 <img src="images/icons/nav01.png" alt=""> 38 <p>京东超市</p> 39 </a> 40 </li> 41 <li class="w20 fl"> 42 <a href=""> 43 <img src="images/icons/nav02.png" alt=""> 44 <p>全球购</p> 45 </a> 46 </li> 47 <li class="w20 fl"> 48 <a href=""> 49 <img src="images/icons/nav03.png" alt=""> 50 <p>服装城</p> 51 </a> 52 </li> 53 <li class="w20 fl"> 54 <a href=""> 55 <img src="images/icons/nav04.png" alt=""> 56 <p>京东生鲜</p> 57 </a> 58 </li> 59 <li class="w20 fl"> 60 <a href=""> 61 <img src="images/icons/nav05.png" alt=""> 62 <p>京东到家</p> 63 </a> 64 </li> 65 <li class="w20 fl"> 66 <a href=""> 67 <img src="images/icons/nav06.png" alt=""> 68 <p>充值中心</p> 69 </a> 70 </li> 71 <li class="w20 fl"> 72 <a href=""> 73 <img src="images/icons/nav07.png" alt=""> 74 <p>惠赚钱</p> 75 </a> 76 </li> 77 <li class="w20 fl"> 78 <a href=""> 79 <img src="images/icons/nav08.png" alt=""> 80 <p>领券</p> 81 </a> 82 </li> 83 <li class="w20 fl"> 84 <a href=""> 85 <img src="images/icons/nav09.png" alt=""> 86 <p>物流查询</p> 87 </a> 88 </li> 89 <li class="w20 fl"> 90 <a href=""> 91 <img src="images/icons/nav10.png" alt=""> 92 <p>我的关注</p> 93 </a> 94 </li> 95 </ul> 96 </nav> 97 98 <!-- 京东快报 --> 99 <section class="jd_news"> 100 <div class="jd_news_wrap"> 101 <div class="left fl"> 102 <img src="images/icons/jd-news-tit.png" alt=""> 103 </div> 104 <a href="#" class="right fr">| 更多</a> 105 <div class="center"> 106 <!-- 107 轮播的原理 108 （1）克隆第0个li元素 追加到scroll_news里面去 109 （2）添加一个index信号量 自动累加 110 （3）在过渡的结束的时候去判断当前的index值，如果超出最后一张，立马瞬移会第0张，同时设置index的值为0 111 --> 112 <ul class="scroll_news"> 113 <li class="one_txt_cut"><a href="#">抽洗碗机啦！好货低至5折！周末大回馈</a></li> 114 <li class="one_txt_cut"><a href="#">抽洗碗机啦！好货低至5折！周末大回馈</a></li> 115 <li class="one_txt_cut"><a href="#">抽洗碗机啦！好货低至5折！周末大回馈</a></li> 116 <li class="one_txt_cut"><a href="#">抽洗碗机啦！好货低至5折！周末大回馈</a></li> 117 </ul> 118 </div> 119 120 </div> 121 </section> 122 123 <!-- 京东秒杀 --> 124 <section class="jd_ms"> 125 <div class="jd_ms_t clearfix"> 126 <div class="fl jd_ms_txt my_icons jd_icons_clock my_center_y"> 127 <span>京东秒杀</span> 128 <div class="count_wrap my__center_y"> 129 <span>0</span> 130 <span>0</span> 131 <span>:</span> 132 <span>0</span> 133 <span>0</span> 134 <span>:</span> 135 <span>0</span> 136 <span>0</span> 137 </div> 138 </div> 139 <div class="fr jd_more">更多秒杀 ></div> 140 </div> 141 <div class="jd_ms_b"> 142 <ul class="jd_srcoll_product clearfix"> 143 <li class="fl"> 144 <a href="#"> 145 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 146 <p class="price new_price">￥69</p> 147 <p class="price old_price">￥170</p> 148 </a> 149 </li> 150 <li class="fl"> 151 <a href="#"> 152 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 153 <p class="price new_price">￥69</p> 154 <p class="price old_price">￥170</p> 155 </a> 156 </li> 157 <li class="fl"> 158 <a href="#"> 159 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 160 <p class="price new_price">￥69</p> 161 <p class="price old_price">￥170</p> 162 </a> 163 </li> 164 <li class="fl"> 165 <a href="#"> 166 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 167 <p class="price new_price">￥69</p> 168 <p class="price old_price">￥170</p> 169 </a> 170 </li> 171 <li class="fl"> 172 <a href="#"> 173 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 174 <p class="price new_price">￥69</p> 175 <p class="price old_price">￥170</p> 176 </a> 177 </li> 178 <li class="fl"> 179 <a href="#"> 180 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 181 <p class="price new_price">￥69</p> 182 <p class="price old_price">￥170</p> 183 </a> 184 </li> 185 <li class="fl"> 186 <a href="#"> 187 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 188 <p class="price new_price">￥69</p> 189 <p class="price old_price">￥170</p> 190 </a> 191 </li> 192 <li class="fl"> 193 <a href="#"> 194 <div class="product_item"><img src="images/imgs/sec01.jpg" alt=""></div> 195 <p class="price new_price">￥69</p> 196 <p class="price old_price">￥170</p> 197 </a> 198 </li> 199 </ul> 200 </div> 201 </section> 202 203 <!-- 会场入口 --> 204 <section class="jd_venue top_line"> 205 <div class="container clearfix"> 206 <div class="w33 fl"><a href="#"><img src="images/imgs/item01.jpg" alt=""></a></div> 207 <div class="w33 fl"><a href="#"><img src="images/imgs/item02.jpg" alt=""></a></div> 208 <div class="w33 fl"><a href="#"><img src="images/imgs/item03.jpg" alt=""></a></div> 209 </div> 210 </section> 211 212 <!-- 产品楼层 --> 213 <section class="floor"> 214 <div class="floor_container clearfix"> 215 <div class="fl w50 floor_items right_line"> 216 <div class="floor_txt"> 217 <h4>秒杀了</h4> 218 <p>快回家拿钱了！！</p> 219 </div> 220 <div class="floor_product_wrap fr"> 221 <img src="images/imgs/product01.jpg" alt=""> 222 </div> 223 </div> 224 <div class="fl w50 floor_items"> 225 <div class="floor_txt"> 226 <h4>秒杀了</h4> 227 <p>快回家拿钱了！！</p> 228 </div> 229 <div class="floor_product_wrap fr"> 230 <img src="images/imgs/product02.jpg" alt=""> 231 </div> 232 </div> 233 </div> 234 </section> 235 236 <!-- 产品楼层 --> 237 <section class="floor top_line"> 238 <div class="floor_container clearfix"> 239 <div class="fl w50 floor_items right_line"> 240 <div class="floor_txt"> 241 <h4>秒杀了</h4> 242 <p>快回家拿钱了！！</p> 243 </div> 244 <div class="floor_product_wrap fr"> 245 <img src="images/imgs/product01.jpg" alt=""> 246 </div> 247 </div> 248 <div class="fl w50 floor_items"> 249 <div class="floor_txt"> 250 <h4>秒杀了</h4> 251 <p>快回家拿钱了！！</p> 252 </div> 253 <div class="floor_product_wrap fr"> 254 <img src="images/imgs/product02.jpg" alt=""> 255 </div> 256 </div> 257 </div> 258 </section> 259 260 <!-- 产品楼层 --> 261 <section class="floor top_line"> 262 <div class="floor_container clearfix"> 263 <div class="fl w50 floor_items right_line"> 264 <div class="floor_txt"> 265 <h4>秒杀了</h4> 266 <p>快回家拿钱了！！</p> 267 </div> 268 <div class="floor_product_wrap fr"> 269 <img src="images/imgs/product01.jpg" alt=""> 270 </div> 271 </div> 272 <div class="fl w50 floor_items"> 273 <div class="floor_txt"> 274 <h4>秒杀了</h4> 275 <p>快回家拿钱了！！</p> 276 </div> 277 <div class="floor_product_wrap fr"> 278 <img src="images/imgs/product02.jpg" alt=""> 279 </div> 280 </div> 281 </div> 282 </section> 283 </body> 284 </html>
下面是css代码
1 /* 精灵图缩放 */ 2 .my_icons::before{ 3 content: ‘‘; 4 background: url(../images/icons/jd-sprites.png) 0 0 no-repeat; 5 -webkit-background-size: 200px 200px; 6 background-size: 200px 200px; 7 } 8 /* 水平垂直居中类 */ 9 .my__center,.my_center:before{ 10 position: absolute; 11 left: 50%; 12 top: 50%; 13 -webkit-transform: translate(-50%,-50%); 14 transform: translate(-50%,-50%); 15 } 16 /* 垂直居中类 */ 17 .my__center_y,.my_center_y:before{ 18 position: absolute; 19 top: 50%; 20 -webkit-transform: translateY(-50%); 21 transform: translateY(-50%); 22 } 23 /* 头部边框类 */ 24 .top_line{ 25 position: relative; 26 } 27 .top_line::before{ 28 content: ‘‘; 29 width: 100%; 30 height: 0; 31 border-top: 1px solid #eee; 32 position: absolute; 33 left: 0; 34 top: 0; 35 z-index: 99998; 36 } 37 /* 右边边框类 */ 38 .right_line{ 39 position: relative; 40 } 41 .right_line::before{ 42 content: ‘‘; 43 width: 0; 44 height: 100%; 45 border-right: 1px solid #eee; 46 position: absolute; 47 right: 0; 48 top: 0; 49 z-index: 99998; 50 } 51 52 /* icons的大小 */ 53 .jd_icons_logo::before{ 54 width: 56px; 55 height: 21px; 56 background-position: 0 -109px; 57 } 58 .jd_icons_search::before{ 59 width: 20px; 60 height: 20px; 61 background-position: -60px -110px; 62 left: 10px; 63 } 64 .jd_icons_clock::before{ 65 width: 17px; 66 height: 22px; 67 background-position: -84px -109px; 68 left: 10px; 69 } 70 /* 头部区域 */ 71 .jd_header{ 72 height: 40px; 73 overflow: hidden; 74 position: fixed; 75 width: 100%; 76 left: 0; 77 top: 0; 78 z-index: 99999; 79 } 80 .jd_header > .left{ 81 width: 75px; 82 height: 40px; 83 position: relative; 84 } 85 .jd_header > .right{ 86 width: 50px; 87 height: 40px; 88 line-height: 40px; 89 text-align: center; 90 color: #fff; 91 font-size: 16px; 92 } 93 .jd_header > .center{ 94 height: 30px; 95 margin: 4px 50px 0 75px; 96 position: relative; 97 } 98 .jd_header > .center > input[type=‘search‘]{ 99 width: 100%; 100 height: 30px; 101 background-color: #fff; 102 border-radius: 15px; 103 text-indent: 28px; 104 outline: none; 105 } 106 107 /* 焦点图区域 */ 108 .course{ 109 position: relative; 110 } 111 .points_wrap{ 112 width: 100%; 113 position: absolute; 114 bottom: 10px; 115 left: 0; 116 text-align: center; 117 } 118 .points_wrap li{ 119 width: 5px; 120 height: 5px; 121 border-radius: 50%; 122 display: inline-block; 123 border: 1px solid #fff; 124 } 125 .points_wrap li.active{ 126 background-color: #fff; 127 } 128 129 /* 导航区域 */ 130 .jd_nav{ 131 padding-top: 10px; 132 background-color: #F3F3F3; 133 } 134 .jd_nav li img{ 135 width: 40px; 136 height: 40px; 137 margin: 0 auto; 138 } 139 .jd_nav li p { 140 text-align: center; 141 line-height: 30px; 142 } 143 144 /* 京东快报 */ 145 .jd_news{ 146 padding: 0 7px 5px; 147 background-color: #F3F3F3; 148 } 149 .jd_news_wrap{ 150 height: 30px; 151 background-color: #fff; 152 border-radius: 10px; 153 } 154 .jd_news_wrap .left{ 155 width: 81px; 156 height: 30px; 157 } 158 .jd_news_wrap .left img{ 159 width: 73px; 160 height: 16px; 161 margin-top: 7px; 162 margin-left: 7px; 163 } 164 .jd_news_wrap .right{ 165 width: 40px; 166 height: 30px; 167 line-height: 30px; 168 text-align: center; 169 text-indent: -10px; 170 } 171 .jd_news_wrap .center{ 172 margin: 0 40px 0 81px; 173 height: 30px; 174 position: relative; 175 overflow: hidden; 176 } 177 .scroll_news{ 178 position: absolute; 179 width: 100%; 180 left: 0; 181 top: 0; 182 } 183 .scroll_news li{ 184 height: 30px; 185 line-height: 30px; 186 text-indent: 5px; 187 } 188 189 /* 京东秒杀 */ 190 .jd_ms{ 191 background-color: #fff; 192 } 193 .jd_ms_t{ 194 height: 32px; 195 position: relative; 196 } 197 .jd_ms_t > .jd_ms_txt > span{ 198 color: #ca1327; 199 letter-spacing: 5px; 200 font-size: 14px; 201 line-height: 32px; 202 padding-left: 36px; 203 } 204 .jd_ms_t .jd_more{ 205 line-height: 32px; 206 padding-right: 10px; 207 } 208 .count_wrap{ 209 width: 90px; 210 height: 22px; 211 left: 120px; 212 /* 给父级添加font-size: 0; 可以去掉行内块默认的边距*/ 213 font-size: 0; 214 text-align: center; 215 } 216 .count_wrap span{ 217 display: inline-block; 218 background-color: #000; 219 font-size: 12px; 220 width: 10px; 221 height: 20px; 222 color: #fff; 223 } 224 .count_wrap span:nth-child(3n+1){ 225 border-top-left-radius: 5px; 226 border-bottom-left-radius: 5px; 227 } 228 .count_wrap span:nth-child(3n+2){ 229 border-top-right-radius: 5px; 230 border-bottom-right-radius: 5px; 231 } 232 .count_wrap span:nth-child(3n){ 233 background-color: transparent; 234 color: #000; 235 } 236 /* 京东秒杀主体 */ 237 .jd_ms_b{ 238 overflow: scroll; 239 margin-top: 10px; 240 } 241 .jd_srcoll_product{ 242 width: 888px; 243 height: 125px; 244 } 245 .product_item{ 246 width: 90px; 247 height: 78px; 248 border-right: 1px solid #ccc; 249 padding: 0 10px; 250 } 251 .product_item > img{ 252 width: 68px; 253 height: 68px; 254 margin: 0 auto; 255 } 256 .jd_srcoll_product .price{ 257 text-align: center; 258 } 259 .jd_srcoll_product .new_price{ 260 font-size: 18px; 261 color: #F35353; 262 } 263 .jd_srcoll_product .old_price{ 264 font-size: 12px; 265 text-decoration: line-through; 266 } 267 268 /* 产品区域 */ 269 .floor_items{ 270 position: relative; 271 background-color: #fff; 272 padding: 10px; 273 -webkit-box-sizing: border-box; 274 box-sizing: border-box; 275 } 276 .floor_txt{ 277 position: absolute; 278 left: 10px; 279 top: 10px; 280 width: 55%; 281 } 282 .floor_product_wrap{ 283 width: 45%; 284 }
在这里base.css样式就在这边写了。
一些个人的感受：
1.尽量使用语义化标签
2.在一个整体的盒子里面在包裹一个大盒子。里面在写上自己元素，方便整体的移动。
3.把一些公共的以及常用的样式，单独设置样式。这样需要某一样式直接加类名即可，js中使用更加方便，直接添加移除类名即可。减少css代码冗余
4.css样式想写好真的不简单，看着简单的布局，写的时候就是各种坑
首页中有焦点轮播图和京东快报处的滚动以及秒杀倒计时就明天再写吧
希望可以给大家带来一点点帮助
以上是关于仿京东移动端的主要内容，如果未能解决你的问题，请参考以下文章