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

Y的博客
Y的博客原创
2020年12月29日 00:01:22665浏览

效果图

主页index.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="../122301/static/css/index.css">
  9.     <link rel="stylesheet" href="../122301/static/icon-font/iconfont.css">
  10.     <link rel="stylesheet" href="../122301/static/css/header.css">
  11.     <link rel="stylesheet" href="../122301/static/css/footer.css">
  12.     <link rel="stylesheet" href="../122301/static/css/main.css">
  13. </head>
  15. <body>
  16.     <!-- 页眉 -->
  17.     <div class="header">
  18.         <!-- 字体菜单 -->
  19.         <div class="menu iconfont icon-menu"></div>
  20.         <!-- 搜索框 -->
  21.         <div class="search">
  22.             <div class="logo">JD</div>
  23.             <div class="zoom iconfont icon-search"></div>
  24.             <input type="text" value="磁力片" class="words">
  25.         </div>
  26.         <!-- 登录按钮 -->
  27.         <a href="" class="login">登录</a>
  29.     </div>
  30.     <!-- 主体 -->
  31.     <div class="main">
  33.         <!-- banner图 -->
  34.         <div class="imag">
  35.             <img src="../122301/static/images/bg/banner.jpg" alt="">
  36.          </div> 
  37.             <!-- 主导航区 -->
  38.          <ul class="nav">
  39.                 <li>
  40.                     <a href=""><img src="static/images/dh/nav-1.png" alt=""></a>
  41.                     <a href="">京东超市</a>
  42.                 </li>
  43.                 <li>
  44.                     <a href=""><img src="static/images/dh/nav-2.png" alt=""></a>
  45.                     <a href="">数码电器</a>
  46.                 </li>
  47.                 <li>
  48.                     <a href=""><img src="static/images/dh/nav-3.png" alt=""></a>
  49.                     <a href="">京东服饰</a>
  50.                 </li>
  51.                 <li>
  52.                     <a href=""><img src="static/images/dh/nav-4.png" alt=""></a>
  53.                     <a href="">京东生鲜</a>
  54.                 </li>
  55.                 <li>
  56.                     <a href=""><img src="static/images/dh/nav-5.png" alt=""></a>
  57.                     <a href="">京东到家</a>
  58.                 </li>
  59.                 <li>
  60.                     <a href=""><img src="static/images/dh/nav-6.png" alt=""></a>
  61.                     <a href="">充值缴费</a>
  62.                 </li>
  63.                 <li>
  64.                     <a href=""><img src="static/images/dh/nav-7.png" alt=""></a>
  65.                     <a href="">9.9元拼</a>
  66.                 </li>
  67.                 <li>
  68.                     <a href=""><img src="static/images/dh/nav-8.png" alt=""></a>
  69.                     <a href="">领券</a>
  70.                 </li>
  71.                 <li>
  72.                     <a href=""><img src="static/images/dh/nav-9.png" alt=""></a>
  73.                     <a href="">领金贴</a>
  74.                 </li>
  75.                 <li>
  76.                     <a href=""><img src="static/images/dh/nav-10.png" alt=""></a>
  77.                     <a href="">PLUS会员</a>
  78.                 </li>
  79.             </ul>
  80.          <!-- 秒杀区 -->
  81.          <div class="ms">
  82.             <!-- 头部 -->
  83.             <div class="ms-top">
  84.                 <div class="left">
  85.                     <div class="title">京东秒杀</div>
  86.                     <div class="notice">
  87.                         <div class="tips">22点专场</div>
  88.                         <div class="time">01:11:22</div>
  89.                     </div>
  90.                 </div>
  91.                 <div class="right">更多秒杀</div>
  92.             </div>
  93.           <!-- 秒杀主体区 -->
  94.           <ul class="ms-body">
  95.             <li class="item">
  96.                 <a href=""><img src="static/images/ms/ms-1.jpg" alt=""></a>
  97.                 <div class="iconfont icon-rmb">338</div>
  98.                 <div class="iconfont icon-rmb">558</div>
  99.             </li>
  100.             <li class="item">
  101.                 <a href=""><img src="static/images/ms/ms-2.jpg" alt=""></a>
  102.                 <div class="iconfont icon-rmb">3456</div>
  103.                 <div class="iconfont icon-rmb">4567</div>
  104.             </li>
  105.             <li class="item">
  106.                 <a href=""><img src="static/images/ms/ms-3.jpg" alt=""></a>
  107.                 <div class="iconfont icon-rmb">789</div>
  108.                 <div class="iconfont icon-rmb">999</div>
  109.             </li>
  110.             <li class="item">
  111.                 <a href=""><img src="static/images/ms/ms-4.jpg" alt=""></a>
  112.                 <div class="iconfont icon-rmb">3213</div>
  113.                 <div class="iconfont icon-rmb">4532</div>
  114.             </li>
  115.         </ul>
  116.     </div>
  117.     </div>
  118.     <!-- 页脚 -->
  119.     <div class="footer">
  120.         <div>
  121.             <div class="iconfont icon-home"></div>
  122.             <span>主页</span>
  123.         </div>
  124.         <div>
  125.             <div class="iconfont icon-layers"></div>
  126.             <span>分类</span>
  127.         </div>
  128.         <div>
  129.             <div class="iconfont icon-kehuguanli"></div>
  130.             <span>京喜</span>
  131.         </div>
  132.         <div>
  133.             <div class="iconfont icon-shopping-cart"></div>
  134.             <span>购物车</span>
  135.         </div>
  136.         <div>
  137.             <div class="iconfont icon-user"></div>
  138.             <span>未登录</span>
  139.         </div>
  140.     </div>
  141. </body>
  142. </html>

主页布局样式index.css

  1. /* 引入公共清除样式表 */
  2. @import'reset.css';
  3. /* 页眉 */
  4. .header {
  5.     height: 4.4rem;
  6.     background-color: #e43130;
  7.     color: white;
  8.     /* 固定定位 */
  9.     position: fixed;
  10.     top: 0;
  11.     left: 0;
  12.     right: 0;
  13.     z-index: 100px;
  14. }
  15. /* 主体 */
  16. .main {
  17.     position: absolute;
  18.     top:4.4em;
  19.     left: 0;
  20.     right: 0;
  21.     bottom:4.4em;
  22.     font-size: 1.4rem;
  25. }
  26. /* 页脚 */
  27. .footer {
  28.     height: 4.4rem;
  29.     background-color: #fafafa
  30.     color: #666;
  31.     /* 固定定位 */
  32.     position: fixed;
  33.     bottom: 0;
  34.     left: 0;
  35.     right: 0;
  36.     z-index: 100;
  37. }

清除样式表reset.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. li {
  7.     list-style: none;
  8. }
  9. a {
  10.     color: #7b7b7b;
  11.     text-decoration: none;
  12. }

页眉样式header.css

  1. .header {
  2.     display: flex;
  3.     align-items: center;
  4. }
  6. .header .menu {
  7.     flex: 1;
  8.     font-size: 1.5rem;
  9.     text-align: center;
  12. }
  13. .header .search {
  14.     flex: 6;
  15.     display: flex;
  16.     background-color: #F7F7F7;
  17.     padding: 0.5rem;
  18.     border-radius: 3rem;
  19.     display: flex;
  20. }
  21. /* logo  */
  22. .header .search .logo {
  23.     color: #E93B3D;
  24.     flex: 0 1 3rem;
  25.     font-size: 1.5rem;
  26.     font-weight: bolder;
  27.     /* 水平垂直居中 */
  28.     text-align: center;
  29.     line-height:2rem ;
  30. }
  31. /* 放大镜 */
  32. .header .search .zoom {
  33.     color: #BBBBBB;
  34.     flex: 0 1 3rem;
  35.     border-left: 1px solid;
  36.     /* 水平垂直居中 */
  37.     text-align: center;
  38.     line-height:2rem ;
  39. }
  40. .header .search .words {
  41.     flex: auto;
  42.     border: none;
  43.     background-color:  #F7F7F7;
  44.     outline: none;
  45.     color:#aaa ;
  46. }
  47. .header .login {
  48.     flex: 1;
  49.     color: white;
  50.     text-align: center;
  52. }

页脚样式.footer.css

  1. .footer {
  2.     display: flex;
  3.     justify-content: space-around;
  4.     align-items: center;
  5.     background-color: rgb(233, 231, 230);
  6.     opacity: 0.8;
  7. }
  9. .footer>div{
  10.     display: flex;
  11.     flex-flow: column nowrap;
  12.     align-items: center;
  13. }
  14. .footer>div>.iconfont{
  15.     font-size: 1.9rem;
  16.     color: rgb(66, 64, 64);
  17. }
  18. .footer>div>span{
  19.     font-size: 0.9rem;
  20.     color: rgb(66, 64, 64);
  21. }

主体区样式main.css

  1. .main .imag img {
  2.     max-width: 96%;
  3.     height: auto;
  4.     border-radius: 0.5rem;
  5.     position: relative;
  6.     top: -1rem;
  7.     left: 0.5rem;
  8. }
  9. .main .nav {
  10.     display: flex;
  11.     flex-flow: row wrap;
  12.     justify-content: space-between;
  13.     font-size: 1rem;
  14. }
  15. .main .nav img {
  16.     width: 4rem;
  17.     height: 4rem;
  18. }
  19. .main .nav li {
  20.     flex: 1 1 20%;
  21.     display: flex;
  22.     flex-flow: column nowrap;
  23.     align-items: center;
  24. }
  25. /* 秒杀 */
  26. .main .ms {
  27.     background-color: #fff;
  28.     padding: 1rem;
  29.     margin: 1rem 0;
  30. }
  32. .main .ms .ms-top {
  33.     font-size: 1.3rem;
  34.     height: 3rem;
  35.     display: flex;
  36.     justify-content: space-between;
  37. }
  39. .main .ms .ms-top .left {
  40.     display: flex;
  41. }
  43. .main .ms .ms-top .left .notice {
  44.     font-size: 1.1rem;
  45.     height: 2rem;
  46.     border: 1px solid #e43130;
  47.     border-radius: 2rem;
  48.     margin-left: 1rem;
  49.     display: flex;
  50.     justify-content: center;
  51.     align-items: center;
  52. }
  54. .main .ms .ms-top .left .notice .tips {
  55.     background-color: #e43130;
  56.     color: #fff;
  57.     border-radius: 2rem;
  58.     padding: 0.3rem 0.5rem;
  59. }
  61. .main .ms .ms-top .left .notice .time {
  62.     padding: 0.3rem 0.5rem;
  63. }
  65. .main .ms .ms-top .right {
  66.     color: #e43130;
  67. }
  69. /* 主体区 */
  71. .main .ms .ms-body {
  72.     display: flex;
  73.     justify-content: space-between;
  74. }
  75. .main .ms .ms-body img {
  76.     height: 12rem;
  77.     width: 12rem;
  78. }
  79. /* 秒杀价 */
  80. .main .ms .ms-body .item div:first-of-type {
  81.     color: #e43130;
  82.     font-weight: bolder;
  83. }
  84. /* 原价 */
  85. .main .ms .ms-body .item div:last-of-type {
  86.     color: #666666;
  87.    text-decoration: line-through;
  88.    text-decoration-color: #666666;
  89. }
上一条：js变量和常量-实例演示js常用数据类型下一条：js常用数据类型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多