简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html+css flex小实战（仿购物商城手机端主页的顶部+底部+导航）
Blogger Information
Blog 40
fans 0
comment 1
visits 34278
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html+css flex小实战（仿购物商城手机端主页的顶部+底部+导航）
景云
Original
735 people have browsed it

整体效果图

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:字体样式未附。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实app页面不难写，对吧
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！