简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >仿京东商城（移动端）小案例

仿京东商城（移动端）小案例

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年12月25日 22:42:391692浏览

一、分析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、运行结果

上一条：(grid 属性) 演示过程下一条：CSS中弹性盒子flex的属性说明
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多