search

博客列表 >flex应用：仿写某网站H5页面

flex应用：仿写某网站H5页面

未来星
未来星原创
2021年04月06日 07:46:11615浏览

使用flex布局页面，仿照某东H5页面实例。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>仿写首页</title>
  7.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  8.     <link rel="stylesheet" href="static/css/index.css" />
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <link rel="stylesheet" href="static/css/footer.css" />
  11.     <link rel="stylesheet" href="static/css/nav.css" />
  12.     <link rel="stylesheet" href="static/css/ms.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 class="words" type="text" value="移动硬盘" />
  25.       </div>
  26.       <!-- 登录按钮 -->
  27.       <a href="" class="login">登录</a>
  28.     </div>
  30.     <!-- 主体 -->
  31.     <div class="main">
  32.       <!-- 主导航区 -->
  33.       <ul class="nav">
  34.         <!-- 第一组 -->
  35.         <li>
  36.           <a href=""><img src="static/images/dh/nav-1.png" alt="" /></a>
  37.           <a href="">京东超市</a>
  38.         </li>
  39.         <li>
  40.           <a href=""><img src="static/images/dh/nav-2.png" alt="" /></a>
  41.           <a href="">数码电器</a>
  42.         </li>
  43.         <li>
  44.           <a href=""><img src="static/images/dh/nav-3.png" alt="" /></a>
  45.           <a href="">京东服饰</a>
  46.         </li>
  47.         <li>
  48.           <a href=""><img src="static/images/dh/nav-4.png" alt="" /></a>
  49.           <a href="">京东生鲜</a>
  50.         </li>
  51.         <li>
  52.           <a href=""><img src="static/images/dh/nav-5.png" alt="" /></a>
  53.           <a href="">京东到家</a>
  54.         </li>
  55.         <!-- 第二组 -->
  56.         <li>
  57.           <a href=""><img src="static/images/dh/nav-6.png" alt="" /></a>
  58.           <a href="">充值缴费</a>
  59.         </li>
  60.         <li>
  61.           <a href=""><img src="static/images/dh/nav-7.png" alt="" /></a>
  62.           <a href="">9.9元拼</a>
  63.         </li>
  64.         <li>
  65.           <a href=""><img src="static/images/dh/nav-8.png" alt="" /></a>
  66.           <a href="">领券</a>
  67.         </li>
  68.         <li>
  69.           <a href=""><img src="static/images/dh/nav-9.png" alt="" /></a>
  70.           <a href="">领金贴</a>
  71.         </li>
  72.         <li>
  73.           <a href=""><img src="static/images/dh/nav-10.png" alt="" /></a>
  74.           <a href="">PLUS会员</a>
  75.         </li>
  76.       </ul>
  78.       <!-- 秒杀区 -->
  79.       <div class="ms">
  80.         <!-- 头部 -->
  81.         <div class="ms-top">
  82.           <div class="left">
  83.             <div class="title">京东秒杀</div>
  84.             <div class="notice">
  85.               <div class="tips">22点专场</div>
  86.               <div class="time">00:10:20</div>
  87.             </div>
  88.           </div>
  89.           <div class="right">更多秒杀</div>
  90.         </div>
  92.         <!-- 秒杀主体区 -->
  93.         <ul class="ms-body">
  94.           <li class="item">
  95.             <a href=""><img src="static/images/ms/ms-1.jpg" alt="" /></a>
  96.             <div class="iconfont icon-rmb">338</div>
  97.             <div class="iconfont icon-rmb">558</div>
  98.           </li>
  99.           <li class="item">
  100.             <a href=""><img src="static/images/ms/ms-2.jpg" alt="" /></a>
  101.             <div class="iconfont icon-rmb">3456</div>
  102.             <div class="iconfont icon-rmb">4567</div>
  103.           </li>
  104.           <li class="item">
  105.             <a href=""><img src="static/images/ms/ms-3.jpg" alt="" /></a>
  106.             <div class="iconfont icon-rmb">789</div>
  107.             <div class="iconfont icon-rmb">999</div>
  108.           </li>
  109.           <li class="item">
  110.             <a href=""><img src="static/images/ms/ms-4.jpg" alt="" /></a>
  111.             <div class="iconfont icon-rmb">3213</div>
  112.             <div class="iconfont icon-rmb">4532</div>
  113.           </li>
  114.         </ul>
  115.       </div>
  116.     </div>
  117.     <!-- 页脚 -->
  118.     <div class="footer">
  119.       <div>
  120.         <div class="iconfont icon-home"></div>
  121.         <span>主页</span>
  122.       </div>
  123.       <div>
  124.         <div class="iconfont icon-layers"></div>
  125.         <span>分类</span>
  126.       </div>
  127.       <div>
  128.         <div class="iconfont icon-kehuguanli"></div>
  129.         <span>京喜</span>
  130.       </div>
  131.       <div>
  132.         <div class="iconfont icon-shopping-cart"></div>
  133.         <span>购物车</span>
  134.       </div>
  135.       <div>
  136.         <div class="iconfont icon-user"></div>
  137.         <span>未登录</span>
  138.       </div>
  139.     </div>
  140.   </body>
  141. </html>

index.css文件

  1. /* 导入公共初始化样式表 */
  2. @import "reset.css";
  4. /* 页眉 */
  5. .header {
  6.   background-color: #e43130;
  7.   color: white;
  8.   height: 4rem;
  10.   /* 固定定位 */
  11.   position: fixed;
  12.   top: 0;
  13.   left: 0;
  14.   right: 0;
  15.   z-index: 100;
  17.   font-size: 1.4rem;
  18. }
  20. /* 页脚*/
  21. .footer {
  22.   color: #666;
  23.   background-color: #fafafa;
  24.   box-shadow: 0 0 3px #999;
  25.   height: 4rem;
  27.   /* 固定定位 */
  28.   position: fixed;
  29.   bottom: 0;
  30.   left: 0;
  31.   right: 0;
  32.   z-index: 100;
  34.   font-size: 1.4rem;
  35. }
  37. /* 主体 */
  38. .main {
  39.   /* 绝对定位 */
  40.   position: absolute;
  41.   top: 4rem;
  42.   bottom: 4rem;
  43.   left: 0;
  44.   right: 0;
  46.   font-size: 1.4rem;
  47. }

reset.css文件

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. li {
  8.     list-style: none;
  9. }
  10. a {
  11.     color: #7b7b7b;
  12.     text-decoration: none;
  13. }
  15. body {
  16.     background-color: #F6F6F6;
  17. }
  19. html {
  20.     font-size: 10px;
  21. }
  23. /* 媒体查询 */
  24. @media screen and (min-width: 480px) {
  25.     html {
  26.         font-size: 12px;
  27.     }
  28. }
  30. @media screen and (min-width: 640px) {
  31.     html {
  32.         font-size: 14px;
  33.     }
  34. }
  36. @media screen and (min-width: 720px) {
  37.     html {
  38.         font-size: 16px;
  39.     }
  40. }

header.css文件

  1. .header {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. /* 页眉中的三个部分比例 1:6:1 */
  6. .header .login {
  7.   color: #fff;
  8.   text-align: center;
  9.   flex: 1;
  10. }
  12. .header .menu {
  13.   text-align: center;
  14.   flex: 1;
  15.   font-size: 2.5rem;
  16. }
  18. .header .search {
  19.   flex: 6;
  20.   padding: 0.5rem;
  21.   background-color: #fff;
  22.   border-radius: 3rem;
  24.   display: flex;
  25. }
  27. /* logo  */
  28. .header .search .logo {
  29.   color: #e43130;
  30.   flex: 0 1 4rem;
  31.   font-size: 2rem;
  32.   /* 水平垂直居中 */
  33.   text-align: center;
  34.   line-height: 2rem;
  35. }
  36. /* 放大镜 */
  37. .header .search .zoom {
  38.   color: #ccc;
  39.   flex: 0 1 4rem;
  41.   border-left: 1px solid;
  42.   /* 水平垂直居中 */
  43.   text-align: center;
  44.   line-height: 2rem;
  45. }
  47. /* 搜索文本框 */
  48. .header .search .words {
  49.   flex: auto;
  50.   border: none;
  51.   outline: none;
  52.   color: #aaa;
  53. }

footer.css文件

  1. .footer {
  2.     display: flex;
  3.     justify-content: space-around;
  4.     align-items: center;
  5. }
  7. .footer > div {
  8.     display: flex;
  9.     flex-flow: column nowrap;
  10.     align-items: center;
  11. }
  13. .footer > div > .iconfont {
  14.     font-size: 2rem;
  15. }
  16. .footer > div > span {
  17.     font-size: 1rem;
  18. }

nav.css文件

  1. /* 主导航区 */
  3. .main .nav {
  4.     /* background-color: #fff; */
  5.     padding: 1rem;
  7.     display: flex;
  8.     /* 允许换行 */
  9.     flex-flow: row wrap;
  10.     justify-content: space-between
  11. }
  13. .main .nav img {
  14.     height: 4rem;
  15.     width: 4rem;
  16. }
  18. .main .nav li {
  19.     /* 每一行显示5个,100%来分配,应该是20% */
  20.     flex: 1 1 20%;
  22.     display: flex;
  23.     flex-flow: column nowrap;
  24.     align-items: center;
  25. }

ms.css文件

  1. /* 秒杀 */
  2. .main .ms {
  3.   background-color: #fff;
  4.   padding: 1rem;
  5.   margin: 1rem 0;
  6. }
  8. .main .ms .ms-top {
  9.   font-size: 1.3rem;
  10.   height: 3rem;
  11.   display: flex;
  12.   justify-content: space-between;
  13. }
  15. .main .ms .ms-top .left {
  16.   display: flex;
  17. }
  19. .main .ms .ms-top .left .notice {
  20.   font-size: 1.1rem;
  21.   height: 2rem;
  22.   border: 1px solid #e43130;
  23.   border-radius: 2rem;
  24.   margin-left: 1rem;
  25.   display: flex;
  26.   justify-content: center;
  27.   align-items: center;
  28. }
  30. .main .ms .ms-top .left .notice .tips {
  31.   background-color: #e43130;
  32.   color: #fff;
  33.   border-radius: 2rem;
  34.   padding: 0.3rem 0.5rem;
  35. }
  37. .main .ms .ms-top .left .notice .time {
  38.   padding: 0.3rem 0.5rem;
  39. }
  41. .main .ms .ms-top .right {
  42.   color: #e43130;
  43. }
  45. /* 主体区 */
  47. .main .ms .ms-body {
  48.   display: flex;
  49.   justify-content: space-between;
  50. }
  51. .main .ms .ms-body img {
  52.   height: 12rem;
  53.   width: 12rem;
  54. }
  56. /* 秒杀价 */
  57. .main .ms .ms-body .item div:first-of-type {
  58.   color: #e43130;
  59.   font-weight: bolder;
  60. }
  62. /* 原价 */
  63. .main .ms .ms-body .item div:last-of-type {
  64.   color: #666666;
  65.   text-decoration: line-through;
  66.   text-decoration-color: #666666;
  67. }
  69. .main .ms .ms-body .item {
  70.   text-align: center;
  71. }
上一条：CSS中使用grid进行布局的应用下一条：CSS中flex布局的项目属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多