search

博客列表 >京东app首页练习

京东app首页练习

咸鱼老爷
咸鱼老爷原创
2021年02月26日 17:28:32724浏览

效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>首页</title>
  8.     <link rel="stylesheet" href="css/jd.css">
  9.     <link rel="stylesheet" href="font/iconfont.css">
  10. </head>
  12. <body>
  13.     <header>
  14.         <div class="menu iconfont icon-caidan"></div>
  15.         <div class="search">
  16.             <div class="logo">JD</div>
  17.             <div class="zoom iconfont icon-sousuo"></div>
  18.             <input type="text" class="words" value="鼠标">
  19.         </div>
  20.         <a href="" class="login">登录</a>
  21.     </header>
  22.     <main>
  23.         <ul class="nav">
  24.             <li>
  25.                 <a href=""><img src="images/dh/nav-1.png" alt=""></a>
  26.                 <a href="">京东超市</a>
  27.             </li>
  28.             <li>
  29.                 <a href=""><img src="images/dh/nav-2.png" alt=""></a>
  30.                 <a href="">京东超市</a>
  31.             </li>
  32.             <li>
  33.                 <a href=""><img src="images/dh/nav-3.png" alt=""></a>
  34.                 <a href="">京东超市</a>
  35.             </li>
  36.             <li>
  37.                 <a href=""><img src="images/dh/nav-4.png" alt=""></a>
  38.                 <a href="">京东超市</a>
  39.             </li>
  40.             <li>
  41.                 <a href=""><img src="images/dh/nav-5.png" alt=""></a>
  42.                 <a href="">京东超市</a>
  43.             </li>
  44.             <li>
  45.                 <a href=""><img src="images/dh/nav-6.png" alt=""></a>
  46.                 <a href="">京东超市</a>
  47.             </li>
  48.             <li>
  49.                 <a href=""><img src="images/dh/nav-7.png" alt=""></a>
  50.                 <a href="">京东超市</a>
  51.             </li>
  52.             <li>
  53.                 <a href=""><img src="images/dh/nav-8.png" alt=""></a>
  54.                 <a href="">京东超市</a>
  55.             </li>
  56.             <li>
  57.                 <a href=""><img src="images/dh/nav-9.png" alt=""></a>
  58.                 <a href="">京东超市</a>
  59.             </li>
  60.             <li>
  61.                 <a href=""><img src="images/dh/nav-10.png" alt=""></a>
  62.                 <a href="">京东超市</a>
  63.             </li>
  64.         </ul>
  65.         <div class="ms">
  66.             <div class="ms-top">
  67.                 <div class="left">
  68.                     <div class="title">京东秒杀</div>
  69.                     <div class="notic">
  70.                         <div class="tips">22点专场</div>
  71.                         <div class="time">01:11:22</div>
  72.                     </div>
  73.                 </div>
  74.                 <div class="right"><a href="">更多秒杀</a></div>
  75.             </div>
  76.             <ul class="ms-body">
  77.                 <li class="item">
  78.                     <a href=""><img src="images/ms/ms-1.jpg" alt=""></a>
  79.                     <div>￥338</div>
  80.                     <div>￥558</div>
  81.                 </li>
  82.                 <li class="item">
  83.                     <a href=""><img src="images/ms/ms-2.jpg" alt=""></a>
  84.                     <div>￥338</div>
  85.                     <div>￥558</div>
  86.                 </li>
  87.                 <li class="item">
  88.                     <a href=""><img src="images/ms/ms-3.jpg" alt=""></a>
  89.                     <div>￥338</div>
  90.                     <div>￥558</div>
  91.                 </li>
  92.                 <li class="item">
  93.                     <a href=""><img src="images/ms/ms-4.jpg" alt=""></a>
  94.                     <div>￥338</div>
  95.                     <div>￥558</div>
  96.                 </li>
  97.             </ul>
  98.         </div>
  99.         <h3 class="title">猜你喜欢</h3>
  100.         <ul class="tj">
  101.             <li class="item">
  102.                 <a href=""><img src="images/sp/sp-1.webp" alt=""></a>
  103.                 <a href="" class="ttitle">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</a>
  104.                 <div class="price">
  105.                     <div>￥203</div>
  106.                     <div>看相似</div>
  107.                 </div>
  108.             </li>
  109.             <li class="item">
  110.                 <a href=""><img src="images/sp/sp-2.webp" alt=""></a>
  111.                 <a href="" class="title">商品介绍</a>
  112.                 <div class="price">
  113.                     <div>￥203</div>
  114.                     <div>看相似</div>
  115.                 </div>
  116.             </li>
  117.             <li class="item">
  118.                 <a href=""><img src="images/sp/sp-3.webp" alt=""></a>
  119.                 <a href="" class="title">商品介绍</a>
  120.                 <div class="price">
  121.                     <div>￥203</div>
  122.                     <div>看相似</div>
  123.                 </div>
  124.             </li>
  125.             <li class="item">
  126.                 <a href=""><img src="images/sp/sp-4.webp" alt=""></a>
  127.                 <a href="" class="title">商品介绍</a>
  128.                 <div class="price">
  129.                     <div>￥203</div>
  130.                     <div>看相似</div>
  131.                 </div>
  132.             </li>
  133.         </ul>
  134.     </main>
  135.     <footer>
  136.         <div>
  137.             <div class="iconfont icon-shouye"></div>
  138.             <a href="">主页</a>
  139.         </div>
  140.         <div>
  141.             <div class="iconfont icon-fenlei"></div>
  142.             <a href="">分类</a>
  143.         </div>
  144.         <div>
  145.             <div class="iconfont icon-gouwuche"></div>
  146.             <a href="">购物车</a>
  147.         </div>
  148.         <div>
  149.             <div class="iconfont icon-shebei
  150.             icon-iconfonticon-shebei"></div>
  151.             <a href="">惊喜</a>
  152.         </div>
  153.         <div>
  154.             <div class="iconfont icon-yonghu"></div>
  155.             <a href="">未登录</a>
  156.         </div>
  157.     </footer>
  158. </body>
  160. </html>

css代码

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. body {
  8.     background-color: #f6f6f6;
  9. }
  11. li {
  12.     list-style: none;
  13. }
  15. a {
  16.     text-decoration: none;
  17.     outline: none;
  18. }
  20. html {
  21.     font-size: 10px;
  22. }
  24. header {
  25.     height: 4.4rem;
  26.     color: white;
  27.     background-color: #e43130;
  28.     position: fixed;
  29.     top: 0;
  30.     left: 0;
  31.     right: 0;
  32.     z-index: 100;
  33.     display: flex;
  34.     align-items: center;
  35.     font-size: 1.4rem;
  36.     justify-content: space-between;
  37. }
  39. footer {
  40.     height: 4.4rem;
  41.     background-color: #fff;
  42.     position: fixed;
  43.     left: 0;
  44.     right: 0;
  45.     bottom: 0;
  46.     box-shadow: 0 0 3px #999;
  47.     z-index: 999;
  48.     display: flex;
  49.     justify-content: space-around;
  50.     align-items: center;
  51.     font-size: 1.4rem;
  52. }
  54. main {
  55.     min-height: 100em;
  56.     position: absolute;
  57.     top: 4.4rem;
  58.     bottom: 4.4rem;
  59.     left: 0;
  60.     right: 0;
  61.     font-size: 1.4rem;
  62. }
  64. header .menu,
  65. header .login {
  66.     flex: 1;
  67.     color: white;
  68.     text-align: center;
  69. }
  71. header .menu {
  72.     font-size: 2.5rem;
  73. }
  75. header .search {
  76.     flex: 6;
  77.     padding: 0.5rem;
  78.     background-color: #fff;
  79.     border-radius: 3rem;
  80.     display: flex;
  81. }
  83. header .search .logo {
  84.     color: #e43130;
  85.     flex: 0 1 4rem;
  86.     font-size: 2rem;
  87.     text-align: center;
  88.     line-height: 2rem;
  89. }
  91. header .search .zoom {
  92.     color: #ccc;
  93.     flex: 0 1 4rem;
  94.     font-size: 2rem;
  95.     border-left: 1px solid;
  96.     text-align: center;
  97.     line-height: 2rem;
  98. }
  100. header .search .words {
  101.     flex: auto;
  102.     border: none;
  103.     outline: none;
  104.     color: #aaa;
  105. }
  107. main .nav {
  108.     padding: 1rem;
  109.     display: flex;
  110.     flex-flow: row wrap;
  111.     justify-content: space-between
  112. }
  114. main .nav a:last-of-type {
  115.     color: #666;
  116. }
  118. main .nav img {
  119.     width: 4rem;
  120.     height: 4rem;
  121. }
  123. main .nav li {
  124.     flex: 1 1 20%;
  125.     display: flex;
  126.     flex-flow: column nowrap;
  127.     align-items: center;
  128. }
  130. main .ms {
  131.     background-color: #fff;
  132.     padding: 1rem;
  133.     margin: 1rem 0;
  134. }
  136. main .ms .ms-top {
  137.     font-size: 1.3rem;
  138.     height: 3rem;
  139.     display: flex;
  140.     justify-content: space-between;
  141. }
  143. main .ms .ms-top .left {
  144.     display: flex;
  145. }
  147. main .ms .ms-top .left .notic {
  148.     font-size: 1.1rem;
  149.     height: 2rem;
  150.     display: flex;
  151.     border: 1px solid #e43130;
  152.     border-radius: 2rem;
  153.     margin-left: 1rem;
  154.     justify-content: center;
  155.     align-items: center;
  156. }
  158. main .ms .ms-top .left .notic .tips {
  159.     background-color: #e43130;
  160.     color: white;
  161.     border-radius: 2rem;
  162.     padding: 0.3rem 0.5rem;
  163. }
  165. main .ms .ms-top .left .notic .time {
  166.     padding: 0.3rem 0.5rem;
  167. }
  169. main .ms .ms-top .right a {
  170.     color: #e43130;
  171. }
  173. main .ms .ms-body {
  174.     display: flex;
  175.     justify-content: space-between;
  176.     overflow: hidden;
  177. }
  179. main .ms .ms-body img {
  180.     width: 12rem;
  181.     height: 12rem;
  182. }
  184. main .ms .ms-body .item {
  185.     display: flex;
  186.     flex-flow: column nowrap;
  187.     justify-content: center;
  188.     align-items: center;
  189. }
  191. main .ms .ms-body .item div:first-of-type {
  192.     color: #e43130;
  193.     font-weight: bolder;
  194. }
  196. main .ms .ms-body .item div:last-of-type {
  197.     color: #666;
  198.     text-decoration: line-through;
  199.     text-decoration-color: #666;
  200. }
  202. main .title {
  203.     color: #555;
  204.     height: 4rem;
  205.     text-align: center;
  206. }
  208. main .tj {
  209.     display: flex;
  210.     flex-wrap: wrap;
  211. }
  213. main .tj .item {
  214.     flex: 1 1 calc(50% - 2rem);
  215.     display: flex;
  216.     flex-flow: column nowrap;
  217.     background-color: #fff;
  218.     margin-left: 1rem;
  219.     margin-bottom: 1rem;
  220.     padding-bottom: 1rem;
  221.     border-radius: 1rem;
  222. }
  224. main .tj .item img {
  225.     width: 100%;
  226.     height: 100%;
  227. }
  229. main .tj .item .ttitle {
  230.     color: #a1a1a1;
  231.     overflow: hidden;
  232.     text-overflow: ellipsis;
  233.     margin: .2rem 0;
  234.     word-break: break-all;
  235. }
  237. main .tj .item .price {
  238.     display: flex;
  239.     justify-content: space-between;
  240. }
  242. main .tj .item .price div:first-of-type {
  243.     color: #e43130;
  244. }
  246. main .tj .item .price div:last-of-type {
  247.     color: #666;
  248.     background-color: #f6f6f6;
  249.     border-radius: 1rem;
  250.     padding: 0.2rem 1rem;
  251. }
  253. footer>div {
  254.     display: flex;
  255.     flex-flow: column nowrap;
  256.     align-items: center;
  257.     margin: .8rem 1rem;
  258. }
  260. footer>div>.iconfont {
  261.     font-size: 1.5rem;
  262.     color: #666;
  263. }
  265. footer>div>a {
  266.     color: #666;
  267.     font-size: 1rem;
  268. }
  270. @media screen and (min-width:480px) {
  271.     html {
  272.         font-size: 12px;
  273.     }
  274. }
  276. @media screen and (min-width:640px) {
  277.     html {
  278.         font-size: 14px;
  279.     }
  280. }
  282. @media screen and (min-width:720px) {
  283.     html {
  284.         font-size: 16px;
  285.     }
  286. }
上一条：flex实战京东页面下一条：flex容器的认识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多