search

博客列表 >html+css flex小实战（仿购物商城手机端主页的顶部+底部+导航）

html+css flex小实战（仿购物商城手机端主页的顶部+底部+导航）

景云
景云原创
2021年01月11日 16:16:37745浏览

整体效果图

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>html+css flex小实战（仿购物商城手机端主页的顶部+底部+导航）</title>
  7.     <link rel="stylesheet" href="index.css">
  8.     <link rel="stylesheet" href="icon-font/iconfont.css">
  9. </head>
  10. <body>
  11.     <!-- 头部 -->
  12.     <div class="header">
  13.         <!-- 字体图标 -->
  14.         <div class="menu iconfont icon-menu"></div>
  15.         <!-- 搜索框 -->
  16.         <div class="search">
  17.             <div class="logo">JD</div>
  18.             <div class="zoom iconfont icon-search"></div>
  19.             <input type="text" class="words" placeholder="PHP">
  20.         </div>
  21.         <!-- 登录框 -->
  22.         <a href="#" class="login">登录</a>
  23.     </div>
  24.     <!-- 主体 -->
  25.     <div class="main">
  26.         <!-- 主导航区 -->
  27.         <ul class="nav">
  28.             <li>
  29.                 <a href=""><img src="nav-1.png"></a>
  30.                 <a href="">超市</a>
  31.             </li>
  32.             <li>
  33.                 <a href=""><img src="nav-1.png"></a>
  34.                 <a href="">超市</a>
  35.             </li>
  36.             <li>
  37.                 <a href=""><img src="nav-1.png"></a>
  38.                 <a href="">超市</a>
  39.             </li>
  40.             <li>
  41.                 <a href=""><img src="nav-1.png"></a>
  42.                 <a href="">超市</a>
  43.             </li>
  44.             <li>
  45.                 <a href=""><img src="nav-1.png"></a>
  46.                 <a href="">超市</a>
  47.             </li>
  48.             <li>
  49.                 <a href=""><img src="nav-1.png"></a>
  50.                 <a href="">超市</a>
  51.             </li>
  52.             <li>
  53.                 <a href=""><img src="nav-1.png"></a>
  54.                 <a href="">超市</a>
  55.             </li>
  56.             <li>
  57.                 <a href=""><img src="nav-1.png"></a>
  58.                 <a href="">超市</a>
  59.             </li>
  60.             <li>
  61.                 <a href=""><img src="nav-1.png"></a>
  62.                 <a href="">超市</a>
  63.             </li>
  64.             <li>
  65.                 <a href=""><img src="nav-1.png"></a>
  66.                 <a href="">超市</a>
  67.             </li>
  68.         </ul>
  69.     </div>
  70.     <!-- 尾部 -->
  71.     <div class="footer">
  72.         <div>
  73.             <div class="iconfont icon-home"></div>
  74.             <span>主页</span>
  75.         </div>
  76.         <div>
  77.             <div class="iconfont icon-layers"></div>
  78.             <span>分类</span>
  79.         </div>
  80.         <div>
  81.             <div class="iconfont icon-kehuguanli"></div>
  82.             <span>惊喜</span>
  83.         </div>
  84.         <div>
  85.             <div class="iconfont icon-shopping-cart"></div>
  86.             <span>购物车</span>
  87.         </div>
  88.         <div>
  89.             <div class="iconfont icon-user"></div>
  90.             <span>未登录</span>
  91.         </div>
  92.     </div>
  93. </body>
  94. </html>

主页css样式表

  1. @import "reset.css";
  2. /* 顶部css样式 */
  3. @import "header.css";
  4. /* 导航css样式 */
  5. @import "nav.css";
  6. /* 底部css样式 */
  7. @import "footer.css";
  9. /* 页头 */
  10. .header {
  11.   height: 4.4em;
  12.   position: fixed;
  13.   top: 0;
  14.   right: 0;
  15.   left: 0;
  16.   background-color: #e43130;
  17.   color: white;
  18. }
  19. /* 主体 */
  20. .main {
  21.   position: absolute;
  22.   top: 4.4em;
  23.   right: 0;
  24.   bottom: 4.4em;
  25.   left: 0;
  26. }
  27. /* 页尾 */
  28. .footer {
  29.   height: 4.4em;
  30.   position: fixed;
  31.   right: 0;
  32.   bottom: 0;
  33.   left: 0;
  34.   background-color: #fafafa;
  35.   color: rgb(139, 139, 139);
  36. }

通用样式表

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

顶部样式表

  1. .header {
  2.   display: flex;
  3.   align-items: center;
  4. }
  5. /* 头部的三个部分比例为1：6：1 */
  6. .header .login {
  7.   color: #fff;
  8.   flex: 1;
  9.   text-align: center;
  10. }
  11. .header .search {
  12.   display: flex;
  13.   flex: 6;
  14.   padding: 0.5rem;
  15.   border-radius: 3rem;
  16.   background-color: #fff;
  17. }
  18. .header .menu {
  19.   text-align: center;
  20.   flex: 1;
  21.   font-size: 2.5rem;
  22. }
  23. /* logo */
  24. .header .search .logo {
  25.   color: #e43130;
  26.   flex: 0 1 4rem;
  27.   font-size: 2rem;
  28.   text-align: center;
  29.   line-height: 2rem;
  30. }
  31. /* 放大镜 */
  32. .header .search .zoom {
  33.   color: #ccc;
  34.   flex: 0 1 4rem;
  35.   font-size: 2rem;
  36.   text-align: center;
  37.   line-height: 2rem;
  38.   border-left: 1px solid;
  39. }
  40. /* 搜索框 */
  41. .header .search .words {
  42.   flex: auto;
  43.   border: none;
  44.   outline: none;
  45.   color: #aaa;
  46. }

导航栏样式

  1. /* 主导航区 */
  2. .main .nav {
  3.   display: flex;
  4.   padding: 1rem;
  5.   flex-flow: row wrap;
  6. }
  7. .main .nav img {
  8.   width: 4rem;
  9.   height: 4rem;
  10. }
  11. .main .nav li {
  12.   flex: 1 1 20%;
  13.   display: flex;
  14.   flex-flow: column nowrap;
  15.   align-items: center;
  16.   justify-content: space-between;
  17. }

底部样式

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

静态资源

导航栏图片

PS:字体样式未附。

上一条：JavaScript事件与字符串常用函数下一条：JS 中的函数提升和重写问题以及四种高阶函数的分析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多