简体中文（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

博客列表 >仿京东商城移动端网页

仿京东商城移动端网页

xosing的博客
xosing的博客原创
2020年12月24日 02:49:061542浏览

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="Zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="css/styles.css">
  8.     <title>仿京东商城移动端网页</title>
  9. </head>
  11. <body>
  12.     <header>
  13.         <div class="tubiao iconfont icon-liebiao2"></div>
  14.         <div class="search">
  15.             <div class="logo">JD</div>
  16.             <div class="search_icon iconfont icon-sousuo"></div>
  17.             <input class="search_input" type="text" value="OPPO手机">
  18.         </div>
  19.         <a href="" class="login">登录</a>
  20.     </header>
  21.     <main>
  22.         <div class="banner">
  23.             <div class="banner_bg"></div>
  24.             <img src="images/banner.jpg">
  25.         </div>
  26.         <div class="nav">
  27.             <li>
  28.                 <a href=""><img src="images/1.png" alt=""></a>
  29.                 <a href="">京东国际</a>
  30.             </li>
  31.             <li>
  32.                 <a href=""><img src="images/2.png" alt=""></a>
  33.                 <a href="">京东拍卖</a>
  34.             </li>
  35.             <li>
  36.                 <a href=""><img src="images/3.png" alt=""></a>
  37.                 <a href="">唯品会</a>
  38.             </li>
  39.             <li>
  40.                 <a href=""><img src="images/4.png" alt=""></a>
  41.                 <a href="">玩3C</a>
  42.             </li>
  43.             <li>
  44.                 <a href=""><img src="images/5.png" alt=""></a>
  45.                 <a href="">沃尔玛</a>
  46.             </li>
  47.             <li>
  48.                 <a href=""><img src="images/6.png" alt=""></a>
  49.                 <a href="">美妆馆</a>
  50.             </li>
  51.             <li>
  52.                 <a href=""><img src="images/7.png" alt=""></a>
  53.                 <a href="">京东旅行</a>
  54.             </li>
  55.             <li>
  56.                 <a href=""><img src="images/8.png" alt=""></a>
  57.                 <a href="">拍拍二手</a>
  58.             </li>
  59.             <li>
  60.                 <a href=""><img src="images/9.png" alt=""></a>
  61.                 <a href="">物流查询</a>
  62.             </li>
  63.             <li>
  64.                 <a href=""><img src="images/10.png" alt=""></a>
  65.                 <a href="">全部</a>
  66.             </li>
  67.         </div>
  68.         <div class="chaoliu">
  69.             <h2 class="chaoliu_title">来电好货 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 国潮风尚</h2>
  70.             <div class="chaoliu_sp">
  71.                 <li>
  72.                     <a href="">正品直邮</a>
  73.                     <a href=""><img src="images/chao1.png" alt=""></a>
  74.                 </li>
  75.                 <li>
  76.                     <a href="">3C大放价</a>
  77.                     <a href=""><img src="images/chao2.png" alt=""></a>
  78.                 </li>
  79.                 <li>
  80.                     <a href="">国货正当时</a>
  81.                     <a href=""><img src="images/chao3.png" alt=""></a>
  82.                 </li>
  83.                 <li>
  84.                     <a href="">都是你爱的</a>
  85.                     <a href=""><img src="images/chao4.jpg" alt=""></a>
  86.                 </li>
  87.             </div>
  88.         </div>
  89.         <h2 class="title">猜你喜欢</h2>
  90.         <div class="hot">
  91.             <li class="item">
  92.                 <a href=""><img src="images/1.webp" alt=""></a>
  93.                 <p>义婕秋冬装2020新款修身网纱针织连衣裙件套毛衣女套装裙A18-6507 黑色 S</p>
  94.                 <div class="price">
  95.                     <div class="iconfont icon-rmb">130</div>
  96.                     <div>看相似</div>
  97.                 </div>
  98.             </li>
  99.             <li class="item">
  100.                 <a href=""><img src="images/2.webp" alt=""></a>
  101.                 <p>羽绒服女中长款女士外套2020新品秋冬绒加厚 17米白色 L（建议115斤-125斤）</p>
  102.                 <div class="price">
  103.                     <div class="iconfont icon-rmb">598 <span>满减</span></div>
  104.                     <div>看相似</div>
  105.                 </div>
  106.             </li>
  107.             <li class="item">
  108.                 <a href=""><img src="images/3.webp" alt=""></a>
  109.                 <p>义婕秋冬装2020新款修身网纱针织连衣裙长款假两件套毛衣女套装裙A18-6507 黑色 S</p>
  110.                 <div class="price">
  111.                     <div class="iconfont icon-rmb">130 <span>满减</span></div>
  112.                     <div>看相似</div>
  113.                 </div>
  114.             </li>
  115.             <li class="item">
  116.                 <a href=""><img src="images/4.webp" alt=""></a>
  117.                 <p>羽绒服女中长款女士外套2020新品秋冬季亮面冬装派克服新款 17米白色 L（</p>
  118.                 <div class="price">
  119.                     <div class="iconfont icon-rmb">598</div>
  120.                     <div>看相似</div>
  121.                 </div>
  122.             </li>
  123.             <li class="item">
  124.                 <a href=""><img src="images/5.webp" alt=""></a>
  125.                 <p>义婕秋冬装2020新款修身网纱针织连衣裙长款假两件套毛衣女套装裙A18-6507 黑色 S</p>
  126.                 <div class="price">
  127.                     <div class="iconfont icon-rmb">130 <span>满减</span></div>
  128.                     <div>看相似</div>
  129.                 </div>
  130.             </li>
  131.             <li class="item">
  132.                 <a href=""><img src="images/6.webp" alt=""></a>
  133.                 <p>羽绒服女中长款女士外套2020新品秋冬季真毛领白鸭绒加厚装派克服新款 17米白色</p>
  134.                 <div class="price">
  135.                     <div class="iconfont icon-rmb">598</div>
  136.                     <div>看相似</div>
  137.                 </div>
  138.             </li>
  139.             <li class="item">
  140.                 <a href=""><img src="images/7.webp" alt=""></a>
  141.                 <p>义婕秋冬装2020新款修身网纱针织连衣裙长款假两件套毛衣女套装裙A18-6507 黑色 S</p>
  142.                 <div class="price">
  143.                     <div class="iconfont icon-rmb">130</div>
  144.                     <div>看相似</div>
  145.                 </div>
  146.             </li>
  147.             <li class="item">
  148.                 <a href=""><img src="images/8.webp" alt=""></a>
  149.                 <p>羽绒服女服大码亮面冬装派克服新款 17米白色 L（建议115斤-125斤）</p>
  150.                 <div class="price">
  151.                     <div class="iconfont icon-rmb">598 <span>满减</span></div>
  152.                     <div>看相似</div>
  153.                 </div>
  154.             </li>
  155.         </div>
  156.     </main>
  157.     <footer>
  158.         <div>
  159.             <div class="iconfont icon-home2"></div>
  160.             <span>主页</span>
  161.         </div>
  162.         <div>
  163.             <div class="iconfont icon-liebiao"></div>
  164.             <span>分类</span>
  165.         </div>
  166.         <div>
  167.             <div class="iconfont icon-31huiyuan"></div>
  168.             <span>京喜</span>
  169.         </div>
  170.         <div>
  171.             <div class="iconfont icon-cart"></div>
  172.             <span>购物车</span>
  173.         </div>
  174.         <div>
  175.             <div class="iconfont icon-31wodexuanzhong"></div>
  176.             <span>未登录</span>
  177.         </div>
  178.     </footer>
  179. </body>
  181. </html>

CSS代码

  1. @import '../iconfont/iconfont.css';
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. li {
  9.     list-style: none;
  10. }
  12. a {
  13.     color: #7b7b7b;
  14.     text-decoration: none;
  15. }
  17. body {
  18.     background-color: #F6F6F6;
  19. }
  21. html {
  22.     font-size: 10px;
  23. }
  25. @media screen and (min-width: 480px) {
  26.     html {
  27.         font-size: 12px;
  28.     }
  29. }
  31. @media screen and (min-width: 640px) {
  32.     html {
  33.         font-size: 14px;
  34.     }
  35. }
  37. @media screen and (min-width: 720px) {
  38.     html {
  39.         font-size: 16px;
  40.     }
  41. }
  43. @media screen and (min-width: 960px) {
  44.     html {
  45.         font-size: 18px;
  46.     }
  47. }
  49. @media screen and (min-width: 1024px) {
  50.     html {
  51.         font-size: 20px;
  52.     }
  53. }
  54. header {
  55.     background-color: #C82519;
  56.     height: 4.5rem;
  57.     position: fixed;
  58.     left: 0;
  59.     right: 0;
  60.     display: flex;
  61.     justify-content: space-between;
  62.     align-items: center;
  63.     z-index: 100;
  64. }
  66. header .tubiao {
  67.     flex: 0 1 5rem;
  68.     color: white;
  69.     font-size: 2.2rem;
  70.     text-align: center;
  71. }
  73. header .search {
  74.     flex: 10;
  75.     color: white;
  76.     display: flex;
  77.     text-align: center;
  78.     background-color: white;
  79.     border-radius: 3rem;
  80.     padding: 0.3rem;
  81.     align-items: center;
  82. }
  84. header .search .logo {
  85.     flex: 0 1 4rem;
  86.     color: #E93B3D;
  87.     font-size: 1.4rem;
  88. }
  90. header .search .search_icon {
  91.     flex: 0 1 3rem;
  92.     color: #666;
  93.     font-size: 1.25rem;
  94.     border-left: 1px solid #eee;
  95. }
  97. header .search .search_input {
  98.     flex: auto;
  99.     border: none;
  100.     outline: none;
  101.     color: #aaa;
  102. }
  104. header .login {
  105.     flex: 0 1 5rem;
  106.     color: white;
  107.     font-size: 1.4rem;
  108.     text-align: center;
  109. }
  111. footer {
  112.     box-shadow: 10px 10px 15px #888888;
  113.     background-color: #fff;
  114.     height: 6rem;
  115.     position: fixed;
  116.     bottom: 0;
  117.     left: 0;
  118.     right: 0;
  119.     color: #8B8B8B;
  120. }
  122. footer {
  123.     display: flex;
  124.     justify-content: space-around;
  125.     align-items: center;
  126. }
  128. footer>div {
  129.     display: flex;
  130.     flex-flow: column nowrap;
  131.     align-items: center;
  132. }
  134. footer>div>.iconfont {
  135.     font-size: 2rem;
  136. }
  138. footer>div>span {
  139.     font-size: 1rem;
  140. }
  142. main {
  143.     min-height: 120vh;
  144.     padding: 4.5rem 0;
  145. }
  147. main .banner {
  148.     display: flex;
  149.     flex-flow: column nowrap;
  150. }
  152. main .banner .banner_bg {
  153.     background-color: #C82519;
  154.     border-radius: 0 0rem 2rem 2em;
  155.     height: 10rem;
  156.     position: relative;
  157. }
  159. main .banner img {
  160.     width: 90%;
  161.     position: absolute;
  162.     top: 5rem;
  163.     left: 2rem;
  164.     right: 2rem;
  165.     margin: auto;
  166.     border-radius: 1rem;
  167. }
  169. main .nav {
  170.     margin-top: 8rem;
  171.     display: flex;
  172.     flex-wrap: wrap;
  173. }
  175. main .nav li {
  176.     width: 20%;
  177.     display: flex;
  178.     flex-flow: column nowrap;
  179.     align-items: center;
  180.     font-size: 1.3rem;
  181. }
  183. main .nav li img {
  184.     width: 5rem;
  185. }
  187. main .chaoliu {
  188.     height: 12rem;
  189.     background-color: white;
  190.     margin: 2rem 0;
  191. }
  193. main .chaoliu .chaoliu_title {
  194.     text-align: center;
  195.     font-size: 1.8rem;
  196.     padding: 0.5rem 0;
  197. }
  199. main .chaoliu .chaoliu_sp {
  200.     display: flex;
  201.     justify-content: center;
  202. }
  204. main .chaoliu .chaoliu_sp li {
  205.     display: flex;
  206.     flex-flow: column wrap;
  207.     align-items: center;
  208.     width: 25vw;
  209.     font-size: 1.2rem;
  210.     font-weight: 650;
  211.     color: #000000;
  212. }
  214. main .chaoliu .chaoliu_sp li img {
  215.     width: 6rem;
  216. }
  218. .title {
  219.     height: 4rem;
  220.     color: #555;
  221.     font-weight: 500;
  222.     text-align: center;
  223.     line-height: 4rem;
  224.     margin: 1rem 0;
  225.     background-color: #e7e7e7;
  226. }
  228. main .hot {
  229.     font-size: 1rem;
  230.     display: flex;
  231.     flex-wrap: wrap;
  232.     margin-bottom: 1.5rem;
  233. }
  235. main .hot .item {
  236.     flex: 1 1 calc(50% - 2rem);
  237.     background-color: #fff;
  238.     overflow: hidden;
  239.     display: flex;
  240.     flex-flow: column nowrap;
  241.     margin-left: 1rem;
  242.     margin-bottom: 1rem;
  243.     padding-bottom: 1rem;
  244.     border-radius: 1rem;
  245. }
  247. main .hot .item p {
  248.     font-size: 1.2rem;
  249.     color: #555;
  250. }
  252. main .hot .item img {
  253.     width: 100%;
  254.     height: 100%;
  255. }
  257. main .hot .item {
  258.     padding: 1rem;
  259. }
  261. main .hot .item .price {
  262.     display: flex;
  263.     justify-content: space-between;
  264. }
  266. main .hot .item .price div:first-of-type {
  267.     color: red;
  268. }
  270. main .hot .item .price div:first-of-type span {
  271.     border: 1px solid red;
  272.     border-radius: 0.5rem;
  273.     padding: 0.2rem;
  274.     font-size: 1.1rem;
  275. }
  277. main .hot .item .price div:last-of-type {
  278.     color: #666;
  279.     background-color: #f6f6f6;
  280.     border-radius: 1rem;
  281.     padding: 0.7rem 1rem;
  282. }

上一条：仿京东移动端首页下一条：CSS 弹性盒子（flexbox）常用的的容器属性与项目属性介绍
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多