效果图

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. }

更多相关文章

  1. 实战项目：用原生JS实现一个购物车的功能
  2. js模块化操作及购物车案例
  3. 第24章 0118-vue常用指令介绍，学习心得、笔记（实例演示条件渲染， 计
  4. 第22章 0114-购物车实战与ES6模块化技术，学习心得、笔记（jQuery实
  5. 仿淘宝商品详情页面Android
  6. Android(安卓)菜商品列表展示
  7. Android中Activity跳转问题
  8. 适配器与Activity之间相互传值
  9. Google Play支付接入(in-app Billing)

随机推荐

  1. Android窗口机制（四）ViewRootImpl与View和W
  2. Android Handler机制3之SystemClock类
  3. Android知识体系结构概览
  4. Android 4.0 访问WebService 出现 androi
  5. android adb push 与 adb install 区别（两
  6. Android Handler机制11之Handler机制总结
  7. Android 中文 API (40) ―― RatingBar
  8. ANDROID的MANIFEST.XML文件字段解析
  9. Android中UI设计的一些技巧！！！
  10. Android基础之相关参数区别