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

博客列表 >京东APP首页

京东APP首页

庄周梦蝶
庄周梦蝶原创
2021年01月02日 20:25:50690浏览

html主体

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="static/css/index.css" />
  8.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  9.   </head>
  10.   <body>
  11.     <div class="header">
  12.       <div class="menu iconfont icon-menu"></div>
  13.       <div class="search">
  14.         <div class="logo">JD</div>
  15.         <div class="zoom iconfont icon-search"></div>
  16.         <input class="words" type="text" value="钢琴" />
  17.       </div>
  18.       <a href="" class="login">登录</a>
  19.     </div>
  20.     <div class="main">
  21.       <ul class="nav">
  22.         <li>
  23.           <a href=""
  24.             ><img src="static/images/dh/nav-1.png" alt="" /> 京东超市</a
  25.           >
  26.         </li>
  27.         <li>
  28.           <a href=""
  29.             ><img src="static/images/dh/nav-2.png" alt="" /> 数码电器</a
  30.           >
  31.         </li>
  32.         <li>
  33.           <a href=""><img src="static/images/dh/nav-3.png" alt="" />京东服饰</a>
  34.         </li>
  35.         <li>
  36.           <a href=""><img src="static/images/dh/nav-4.png" alt="" />京东生鲜</a>
  37.         </li>
  38.         <li>
  39.           <a href=""><img src="static/images/dh/nav-5.png" alt="" />京东到家</a>
  40.         </li>
  41.         <li>
  42.           <a href=""><img src="static/images/dh/nav-6.png" alt="" />充值缴费</a>
  43.         </li>
  44.         <li>
  45.           <a href=""><img src="static/images/dh/nav-7.png" alt="" />9.9元拼</a>
  46.         </li>
  47.         <li>
  48.           <a href=""><img src="static/images/dh/nav-8.png" alt="" />领券</a>
  49.         </li>
  50.         <li>
  51.           <a href=""><img src="static/images/dh/nav-9.png" alt="" />领金贴</a>
  52.         </li>
  53.         <li>
  54.           <a href=""
  55.             ><img src="static/images/dh/nav-10.png" alt="" />PLUS会员</a
  56.           >
  57.         </li>
  58.       </ul>
  59.       <!-- 秒杀 -->
  60.       <div class="ms">
  61.         <div class="ms-top">
  62.           <div class="ms-left">
  63.             <div class="mst">京东秒杀</div>
  64.             <div class="ms-left-top">
  65.               <div class="dc">18点场</div>
  66.               <div class="ms-time">00:52:00</div>
  67.             </div>
  68.           </div>
  69.           <div class="ms-right">更多秒杀<samp>&#62;</samp></div>
  70.         </div>
  71.         <div class="ms-main">
  72.           <ul>
  73.             <li>
  74.               <a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  75.               <span><em class="iconfont icon-rmb"></em>1359</span>
  76.               <span><em class="iconfont icon-rmb"></em>1359</span>
  77.             </li>
  78.             <li>
  79.               <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  80.               <span><em class="iconfont icon-rmb"></em>1359</span>
  81.               <span><em class="iconfont icon-rmb"></em>1359</span>
  82.             </li>
  83.             <li>
  84.               <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  85.               <span><em class="iconfont icon-rmb"></em>1359</span>
  86.               <span><em class="iconfont icon-rmb"></em>1359</span>
  87.             </li>
  88.             <li>
  89.               <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  90.               <span><em class="iconfont icon-rmb"></em>1359</span>
  91.               <span><em class="iconfont icon-rmb"></em>1359</span>
  92.             </li>
  93.             <li>
  94.               <a href=""><img src="static/images/ms/ms-5.jpg" alt="" /></a>
  95.               <span><em class="iconfont icon-rmb"></em>1359</span>
  96.               <span><em class="iconfont icon-rmb"></em>1359</span>
  97.             </li>
  98.             <li>
  99.               <a href=""><img src="static/images/ms/ms-6.jpg" alt="" /></a>
  100.               <span><em class="iconfont icon-rmb"></em>1359</span>
  101.               <span><em class="iconfont icon-rmb"></em>1359</span>
  102.             </li>
  103.           </ul>
  104.         </div>
  105.       </div>
  106.       <!-- 商品区 -->
  107.       <div class="main-cenn">
  108.         <ul>
  109.           <li>
  110.             <a href="">
  111.               <img src="static/images/sp/sp-1.webp" alt="" />
  112.               <span class="hh"
  113.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  114.               >
  115.               <div>
  116.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  117.                 <p>看相识</p>
  118.               </div>
  119.             </a>
  120.           </li>
  121.           <li>
  122.             <a href="">
  123.               <img src="static/images/sp/sp-2.webp" alt="" />
  124.               <span
  125.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  126.               >
  127.               <div>
  128.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  129.                 <p>看相识</p>
  130.               </div>
  131.             </a>
  132.           </li>
  133.           <li>
  134.             <a href="">
  135.               <img src="static/images/sp/sp-3.webp" alt="" />
  136.               <span
  137.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  138.               >
  139.               <div>
  140.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  141.                 <p>看相识</p>
  142.               </div>
  143.             </a>
  144.           </li>
  145.           <li>
  146.             <a href="">
  147.               <img src="static/images/sp/sp-4.webp" alt="" />
  148.               <span
  149.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  150.               >
  151.               <div>
  152.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  153.                 <p>看相识</p>
  154.               </div>
  155.             </a>
  156.           </li>
  157.           <li>
  158.             <a href="">
  159.               <img src="static/images/sp/sp-5.webp" alt="" />
  160.               <span
  161.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  162.               >
  163.               <div>
  164.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  165.                 <p>看相识</p>
  166.               </div>
  167.             </a>
  168.           </li>
  169.           <li>
  170.             <a href="">
  171.               <img src="static/images/sp/sp-6.webp" alt="" />
  172.               <span
  173.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  174.               >
  175.               <div>
  176.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  177.                 <p>看相识</p>
  178.               </div>
  179.             </a>
  180.           </li>
  181.           <li>
  182.             <a href="">
  183.               <img src="static/images/sp/sp-7.webp" alt="" />
  184.               <span
  185.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  186.               >
  187.               <div>
  188.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  189.                 <p>看相识</p>
  190.               </div>
  191.             </a>
  192.           </li>
  193.           <li>
  194.             <a href="">
  195.               <img src="static/images/sp/sp-8.webp" alt="" />
  196.               <span
  197.                 >商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名商品姓名</span
  198.               >
  199.               <div>
  200.                 <p><em class="iconfont icon-rmb"></em>1679</p>
  201.                 <p>看相识</p>
  202.               </div>
  203.             </a>
  204.           </li>
  205.         </ul>
  206.       </div>
  207.     </div>
  208.     <div class="footcr">
  209.       <a href="">
  210.         <div class="coot iconfont icon-home"></div>
  211.         <span>首页</span>
  212.       </a>
  213.       <a href="">
  214.         <div class="coot iconfont icon-layers"></div>
  215.         <span>分类</span>
  216.       </a>
  217.       <a href="">
  218.         <div class="coot iconfont icon-settings"></div>
  219.         <span>惊喜</span>
  220.       </a>
  221.       <a href="">
  222.         <div class="coot iconfont icon-shopping-cart"></div>
  223.         <span>购物车</span>
  224.       </a>
  225.       <a href="">
  226.         <div class="coot iconfont icon-user"></div>
  227.         <span>未登录</span>
  228.       </a>
  229.     </div>
  230.   </body>
  231. </html>

css部分

  1. @import "reset.css";
  3. .header {
  4.   background-color: #e43130;
  5.   color: white;
  6.   height: 4.4rem;
  7.   position: fixed;
  8.   top: 0;
  9.   left: 0;
  10.   right: 0;
  11.   z-index: 100;
  12.   font-size: 1.4rem;
  13. }
  14. .footcr {
  15.   background-color: #fafafa;
  16.   color: #666;
  17.   box-shadow: 0 0 3px #999999;
  18.   height: 4.4rem;
  19.   position: fixed;
  20.   bottom: 0;
  21.   left: 0;
  22.   right: 0;
  23.   z-index: 100;
  24.   font-size: 1.4rem;
  25. }
  27. /* 主体 */
  28. .main {
  29.   position: absolute;
  30.   top: 4.4rem;
  31.   bottom: 4.4rem;
  32.   left: 0;
  33.   right: 0;
  34.   font-size: 1.4rem;
  35. }
  36. /* 头部 */
  37. .header {
  38.   display: flex;
  39.   align-items: center;
  40. }
  41. .header .login {
  42.   color: #fff;
  43.   text-align: center;
  44.   flex: 1;
  45. }
  46. .header .menu {
  47.   text-align: center;
  48.   flex: 1;
  49.   font-size: 2.5rem;
  50. }
  51. .header .search {
  52.   flex: 6;
  53.   padding: 0.5rem;
  54.   background-color: #fff;
  55.   border-radius: 3rem;
  56.   display: flex;
  57. }
  58. .header .search .logo {
  59.   color: #e43130;
  60.   flex: 0 1 4rem;
  61.   font-size: 2rem;
  62.   text-align: center;
  63.   line-height: 2rem;
  64. }
  65. .header .search .zoom {
  66.   color: #cccccc;
  67.   flex: 0 1 4rem;
  68.   border-left: 1px solid;
  69.   border-radius: 0;
  70.   text-align: center;
  71.   line-height: 2rem;
  72. }
  73. .header .search .words {
  74.   /* 占据剩余的所有 */
  75.   flex: auto;
  76.   border: none;
  77.   outline: none;
  78. }
  80. /* 内容 */
  81. .main .nav {
  82.   display: flex;
  83.   padding: 1rem;
  84.   flex-flow: row wrap;
  85.   justify-content: space-between;
  86.   background-color: #fff;
  87.   margin: 1rem;
  88.   border-radius: 0.8rem;
  89. }
  90. .main .nav img {
  91.   height: 4rem;
  92.   width: 4rem;
  93. }
  94. .main .nav li {
  95.   flex: 1 1 20%;
  96.   display: flex;
  97.   flex-flow: column nowrap;
  98.   padding: 0.5rem 0;
  99. }
  100. .main .nav li a {
  101.   display: flex;
  102.   flex-flow: column nowrap;
  103.   align-items: center;
  104. }
  106. /* 秒杀 */
  107. .main .ms {
  108.   margin: 1rem;
  109.   padding: 0.5rem 1rem;
  110.   background-color: #fff;
  111.   border-radius: 0.8rem;
  112. }
  113. .main .ms .ms-top {
  114.   font-size: 1.3rem;
  115.   width: 100%;
  116.   height: 2.5rem;
  117.   display: flex;
  118.   /* 剩余空间都分配到中间 */
  119.   justify-content: space-between;
  120.   background: url(../images/bg/index.png) no-repeat;
  121.   background-size: 100% 100%;
  122. }
  123. .main .ms .ms-top .ms-left {
  124.   display: flex;
  125. }
  126. .main .ms .ms-top .ms-left .mst {
  127.   font-size: 1.5rem;
  128. }
  130. .main .ms .ms-top .ms-left .ms-left-top {
  131.   font-size: 1.1rem;
  132.   height: 2rem;
  133.   border-radius: 2rem;
  134.   border: 1px solid #e43130;
  135.   margin-left: 1rem;
  136.   justify-content: center;
  137.   align-items: center;
  138.   display: flex;
  139. }
  140. .main .ms .ms-top .ms-left .ms-left-top .dc {
  141.   background-color: #e43130;
  142.   border-radius: 2rem;
  143.   color: #fff;
  144.   padding: 0.2rem 0.5rem;
  145. }
  146. .main .ms .ms-top .ms-left .ms-left-top .ms-time {
  147.   padding: 0.2rem 1rem;
  148. }
  149. .ms .ms-top .ms-right {
  150.   font-size: 1.5rem;
  151.   color: #e43130;
  152. }
  153. /* 秒杀内容 */
  154. .ms-main ul {
  155.   display: flex;
  156.   overflow-y: auto;
  157.   padding-bottom: 10px;
  158. }
  159. .ms-main ul li {
  160.   display: flex;
  161.   flex-flow: column nowrap;
  162.   align-content: center;
  163.   text-align: center;
  164.   margin: 0.7rem;
  165. }
  166. .ms-main ul li img {
  167.   width: 9rem;
  168. }
  169. .ms-main ul li span:first-of-type {
  170.   color: #e43130;
  171.   font-weight: bolder;
  172. }
  173. .ms-main ul li span:last-of-type {
  174.   color: #666666;
  175.   text-decoration: line-through;
  176.   font-size: 1.3rem;
  177. }
  178. /* 商品 */
  179. .main-cenn ul {
  180.   display: flex;
  181.   flex-flow: row wrap;
  182.   margin-right: 1rem;
  183. }
  184. .main-cenn ul li {
  185.   flex: 1 1 50%;
  186.   padding-left: 1rem;
  187.   padding-bottom: 1rem;
  188. }
  190. .main-cenn ul li a {
  191.   display: flex;
  192.   flex-flow: column nowrap;
  193.   background-color: #fff;
  194.   padding: 0.5rem;
  195.   border-radius: 0.5rem;
  196. }
  197. .main-cenn ul li a span {
  198.   display: -webkit-box;
  199.   -webkit-line-clamp: 2;
  200.   -webkit-box-orient: vertical;
  201.   text-overflow: ellipsis;
  202.   overflow: hidden;
  203. }
  204. .main-cenn ul li a img {
  205.   width: 100%;
  206.   border-radius: 0.5rem;
  207. }
  208. .main-cenn ul li a div {
  209.   display: flex;
  210.   justify-content: space-between;
  211. }
  212. .main-cenn ul li a div p:first-of-type {
  213.   color: #e43130;
  214.   font-weight: bolder;
  215. }
  216. .main-cenn ul li a div p:last-of-type {
  217.   color: #666666;
  218.   font-size: 1rem;
  219.   padding: 0 0.2rem;
  220.   border: #666666 1px solid;
  221.   border-radius: 1rem;
  222. }
  224. /* 底部 */
  225. .footcr {
  226.   display: flex;
  227.   justify-content: space-around;
  228.   align-items: center;
  229. }
  230. .footcr > a > div {
  231.   display: flex;
  232.   flex-flow: column nowrap;
  233.   align-items: center;
  234.   font-size: 2rem;
  235. }
  237. .footcr > a > span {
  238.   font-size: 1rem;
  239. }

效果

上一条：表格制作课程表下一条：标签 锚点 连接 与图片
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多