仿京东移动端

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样式想写好真的不简单,看着简单的布局,写的时候就是各种坑

首页中有焦点轮播图和京东快报处的滚动以及秒杀倒计时就明天再写吧

希望可以给大家带来一点点帮助

  
 
 

 

以上是关于仿京东移动端的主要内容,如果未能解决你的问题,请参考以下文章

仿京东开放平台框架,开发自己的开放平台(包含需求,服务端代码,SDK代码)

仿京东手机端搜索框

0189 案例:仿京东放大镜效果

仿京东放大镜效果的实现

微信小程序--仿京东UI样式顶部导航栏

ElasticSearch仿京东搜索实战