Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿京东商城（移动端）小案例
Blogger Information
Blog 145
fans 7
comment 7
visits 164524
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿京东商城（移动端）小案例
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1698 people have browsed it

一、分析JD商城移动端页面布局

1、布局拆分页眉（头部）、主体（内容区）、底部（页脚）
2、头部和尾部用绝对定位，固定
3、主题部分有内容撑开设置overflow属性auto;
4、主题可以分为幻灯片、导航区、商品展示区，基本上都可以通过flex设置自适应布局
5、css重置样式表、布局样式表、头部和尾部以及主题样式

二、实战案例

1、代码部分：
1.1、html代码：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>仿京东移动端案例</title>
  8.     <link rel="stylesheet" href="static/style/layout.css">
  9.     <link rel="stylesheet" href="static/font/iconfont.css">
  10.     <link rel="stylesheet" href="static/style/header.css">
  11.     <link rel="stylesheet" href="static/style/main.css">
  12.     <link rel="stylesheet" href="static/style/footer.css">
  13. </head>
  14. <body>
  15.     <header>
  16.         <span class="iconfont icon-category"></span>
  17.         <div class="search">
  18.             <span>JD</span>
  19.             <span class="iconfont icon-search"></span>
  20.             <input type="search" value="三星硬盘">
  21.         </div>
  22.         <span><a href="">登陆</a></span>
  23.     </header>
  24.     <main>
  25.         <div>
  26.             <div class="banner">
  27.                 <img src="static/images/banner.jpg" >
  28.             </div>
  29.         </div>
  30.         <div class="slider">
  31.             <img src="static/images/bgc%20(2).jpg" alt="">
  33.             <img src="static/images/bgc%20(1).jpg" alt="">
  34.             <img src="static/images/bgc%20(3).jpg" alt="">
  35.         </div>
  36.         <nav>
  37.             <div><img src="static/images/京东超市.png" alt=""><span>京东超市</span></div>
  38.             <div><img src="static/images/数码电器.png" alt=""><span>数码电器</span></div>
  39.             <div><img src="static/images/京东服饰.png" alt=""><span>京东服饰</span></div>
  40.             <div><img src="static/images/京东生鲜.png" alt=""><span>京东生鲜</span></div>
  41.             <div><img src="static/images/京东到家.png" alt=""><span>京东到家</span></div>
  42.             <div><img src="static/images/9.9元拼.png" alt=""><span>9.9元拼</span></div>
  43.             <div><img src="static/images/领卷.png" alt=""><span>领卷</span></div>
  44.             <!-- <div><img src="static/images/借钱.png" alt=""><span>借钱</span></div> -->
  45.             <div><img src="static/images/PLUS会员.png" alt=""/><span>PLUS会员</span></div>
  46.             <div><img src="static/images/充值缴费.png" alt=""><span>充值缴费</span></div>
  47.             <div><img src="static/images/领金贴.png" alt=""><span>领金贴</span></div>
  49.         </nav>
  50.         <div class="ms">
  51.             <div>
  52.                 <img src="static/images/products%20(3).jpg" alt="">
  53.                 <span>满499减150</span>
  54.                 <span>双旦礼遇季</span>
  55.             </div>
  56.             <div>
  57.                 <img src="static/images/products%20(4).jpg" alt="">
  58.                 <span>满499减150</span>
  59.                 <span>双旦礼遇季</span>
  60.             </div>
  61.             <div>
  62.                 <img src="static/images/products%20(3).jpg" alt="">
  63.                 <span>满499减150</span>
  64.                 <span>双旦礼遇季</span>
  65.             </div>
  66.             <div>
  67.                 <img src="static/images/products%20(4).jpg" alt="">
  68.                 <span>满499减150</span>
  69.                 <span>双旦礼遇季</span>
  70.             </div>
  71.         </div>
  72.         <div class="shop">
  73.             <img src="static/images/guess-like.png" alt="">
  74.             <div class="shop-detail">
  75.                 <div>
  76.                     <img src="static/images/products%20(2).jpg" alt="">
  77.                     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商</p>
  78.                     <div><span>&yen;89</span> <span>看相似</span></div>
  79.                 </div>
  80.                 <div>
  81.                     <img src="static/images/products%20(2).jpg" alt="">
  82.                     <p>商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  83.                     <div><span>&yen;89</span> <span>看相似</span></div>
  84.                 </div>
  85.                 <div>
  86.                     <img src="static/images/products%20(2).jpg" alt="">
  87.                     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品</p>
  88.                     <div><span>&yen;89</span> <span>看相似</span></div>
  89.                 </div>
  90.                 <div>
  91.                     <img src="static/images/products%20(2).jpg" alt="">
  92.                     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品</p>
  93.                     <div><span>&yen;89</span> <span>看相似</span></div>
  94.                 </div>
  95.                 <div>
  96.                     <img src="static/images/products%20(2).jpg" alt="">
  97.                     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</p>
  98.                     <div><span>&yen;89</span> <span>看相似</span></div>
  99.                 </div>
  100.                 <div>
  101.                     <img src="static/images/products%20(2).jpg" alt="">
  102.                     <p>商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商</p>
  103.                     <div><span>&yen;89</span> <span>看相似</span></div>
  104.                 </div>
  105.             </div>
  106.         </div>
  107.     </main>
  108.     <footer>
  109.         <a href=""><img src="static/images/icon%20(4).png" alt=""></a>
  110.         <a href=""><img src="static/images/icon%20(1).png" alt=""></a>
  111.         <a href=""><img src="static/images/icon%20(3).png" alt=""></a>
  112.         <a href=""><img src="static/images/icon%20(5).png" alt=""></a>
  113.         <a href=""><img src="static/images/icon%20(2).png" alt=""></a>
  114.     </footer>
  115. </body>
  116. </html>

1.2、css样式：

  1. /*重置样式*/
  2. *{
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;
  6.     border: none;
  7. }
  8. ul{
  9.     list-style: none;
  10. }
  11. a{
  12.     text-decoration: none;
  13. }
  14. html{
  15.     font-size: 10px;
  16. }
  17. body{
  18.     background-color: #f6f6f6;
  19. }
  21. /* 布局 */
  22. @import url("resetCSS.css");
  24. header{
  25.     height:5rem ;
  26.     background-color: #c72518;
  27.     color:#FFFFFF;
  28.     position: fixed;
  29.     top:0;
  30.     left: 0;
  31.     right:0;
  32. }
  34. footer{
  35.     height:5rem ;
  36.     background-color: #fff;
  37.     position: fixed;
  38.     bottom:0;
  39.     left: 0;
  40.     right:0;
  41. }
  43. main{
  44.     position: fixed;
  45.     top:5rem;
  46.     left:0;
  47.     right:0;
  48.     bottom: 5rem;
  49.     overflow: auto;
  50. }
  51. /* 头部样式 */
  52. @import url("resetCSS.css");
  54. header{
  55.     display: flex;
  56.     justify-content: space-between;
  57.     /* font-size: 1.6rem; */
  58.     align-items: center;
  59.     /* padding:0 0.8rem ; */
  60. }
  62. header > .search{
  63.     background-color: #fff;
  64.     height: 2.9rem;
  65.     border-radius: 2rem;
  66.     flex:8;
  67.     padding: 0 1.2rem;
  68. }
  70. header > span {
  71.     width: 5.5rem;
  72.     font-size: 1.4rem;
  73.     text-align: center;
  74.     flex: 1.3;
  75. }
  77. header > span.iconfont.icon-category{
  78.     font-size: 3rem;
  79.     flex: 1;
  81. }
  82. header > span > a{
  83.     color:white;
  84.     text-align: center;
  85. }
  87. header > .search{
  88.     display: flex;
  89.     align-items: center;
  90.     justify-content: space-around;
  91. }
  93. header > .search > span:first-child {
  94.     color:red;
  95.     font-size: 2rem;
  96.     font-weight: bold;
  97.     margin-right: 0.8rem;
  98. }
  99. header > .search > .iconfont.icon-search{
  100.     font-size: 2.2rem;
  101.     color:lightgrey;
  102.     border-left: 1px solid #D3D3D3;
  103.     padding: 0 .4rem;
  104. }
  105. header > .search > input{
  106.     border: none;
  107.     outline: none;
  108.     height: 2.9rem;
  109.     font-size: 1.6rem;
  110.     flex: 3;
  111.     color:#CCCCCC;
  112. }
  114. /* main主体样式 */
  115. @import url("resetCSS.css");
  116. main{
  117.     display: flex;
  118.     flex-flow: column nowrap;
  119. }
  120. main > div {
  121.     height: 20rem;
  122. }
  124. main> div >.banner{
  125.     background-color: #c72518;
  126.     height: 10rem;
  127.     text-align: center;
  128.     border: none;
  129.     border-bottom-right-radius:4rem;
  130.     border-bottom-left-radius: 4rem;
  132. }
  133. main> div >.banner> img{
  134.     height: 16rem;
  135.     width: 90vw;
  136.     border-radius: 1rem;
  137. }
  139. main > .slider{
  140.     margin-top: 5rem ;
  141.     width: 100vw;
  142.     display: flex;
  143.     justify-content: center;
  144. }
  145. main > .slider >img{
  146.     width: 33.333%;
  147. }
  148. main > nav {
  149.     width: 100vw;
  150.     display: flex;
  151.     flex-flow:row wrap;
  152.     justify-content: space-evenly;
  153. }
  154. main > nav > div {
  155.     width: 20vw;
  156.     display: flex;
  157.     flex-flow: column nowrap;
  158.     align-items: center;
  159.     column-rule: #999;
  160. }
  161. main > nav > div >img {
  162.     width: 16vw;
  163. }
  165. main > .ms {
  166.     margin-top: 1rem;
  167.     display: flex;
  168.     width: 100vw;
  169.     justify-content: space-evenly;
  170. }
  172. main > .ms > div {
  173.     display: flex;
  174.     flex-flow: column nowrap;
  175.     width: 22vw;
  176.     height: 12rem;
  177.     align-items: center;
  178.     justify-content: space-around;
  179.     color: white;
  180.     font-size: 1em;
  181.     background-color: #e6272f;
  182.     border-radius: 1rem;
  183. }
  185. main > .ms >div > img{
  186.     background-color: #fff;
  187.     border-radius: 1rem;
  188.     width: 18vw;
  189. }
  190. main > .ms >div > span:first-of-type{
  191.     background-color: #69a69f;
  192.     border-radius: 1rem;
  193.     width: 18vw;
  194.     font-size: 0.4em;
  195.     height: 2rem;
  196.     text-align: center;
  197.     line-height: 2rem;
  198.     position: relative;
  199.     top:-2rem;
  200. }
  201. main > .ms > div > span:last-of-type{
  202.     font-size: 1.4rem;
  203.     margin-top:-2.4rem;
  204. }
  206. main > .shop {
  207.     display: flex;
  208.     flex-flow:column nowrap;
  209.     align-items: center;
  210. }
  212. main > .shop > img {
  213.     width: 90vw;
  214.     margin-top:1rem;
  215. }
  218. main > .shop >.shop-detail {
  219.     display: flex;
  220.     flex-flow: row wrap;
  221.     /* width: 100vw; */
  222.     justify-content: space-evenly;
  223. }
  224. main > .shop >.shop-detail > div{
  225.     display: flex;
  226.     flex-flow: column nowrap;
  227.     width: 46vw;
  228.     margin-top: 1rem;
  229. }
  231. main >.shop > .shop-detail > div > img {
  232.     /* background-color: red; */
  233.     border-radius: 1rem;
  234. }
  236. main >.shop > .shop-detail > div > div{
  237.     display: flex;
  238.     justify-content: space-between;
  239. }
  240. main >.shop > .shop-detail > div > div >span:first-child{
  241.     color:red;
  242. }
  243. main >.shop > .shop-detail > div > div >span:last-child{
  244.     background-color: #969896;
  245.     border-radius: 0.8rem;
  246.     width: 4rem;
  247.     text-align: center;
  248. }
  250. /* 底部样式 */
  251. @import url("resetCSS.css");
  252. footer{
  253.     display: flex;
  254.     justify-content: space-evenly;
  255.     align-items: center;
  256. }
  257. footer>a>img{
  258.     width: 7rem;
  259. }

1.3、运行结果

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：知道自己很棒吗?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post