Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿某商城手机端页眉页脚代码实例
Blogger Information
Blog 11
fans 0
comment 0
visits 9067
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
仿某商城手机端页眉页脚代码实例
酿酒的人ァ
Original
637 people have browsed it

html代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="static/icon-font/iconfont.css" />
  8.     <link rel="stylesheet" href="static/css/index.css" />
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <header>
  13.       <!-- 小导航图标 -->
  14.       <div class="menu iconfont icon-menu"></div>
  15.       <!-- 搜索框 -->
  16.       <div class="search">
  17.         <div class="logo">JD</div>
  18.         <div class="suosuo iconfont icon-search"></div>
  19.         <input type="text" class="word" value="蛋糕" />
  20.       </div>
  21.       <a href="" class="login">登陆</a>
  22.     </header>
  23.     <main>neiron</main>
  24.     <footer>
  25.       <div>
  26.         <div class="iconfont icon-home"></div>
  27.         <span>首页</span>
  28.       </div>
  29.       <div>
  30.         <div class="iconfont icon-layers"></div>
  31.         <span>分类</span>
  32.       </div>
  33.       <div>
  34.         <div class="iconfont icon-shopping-cart"></div>
  35.         <span>购物车</span>
  36.       </div>
  37.       <div>
  38.         <div class="iconfont icon-user"></div>
  39.         <span>我的</span>
  40.       </div>
  41.     </footer>
  42.   </body>
  43. </html>

css代码如下

  1. /* 导入公共初始化样式表 */
  2. @import "reset.css";
  3. /* 头部开始 */
  4. header {
  5.   display: flex;
  6.   align-items: center;
  7.   background-color: #e43130;
  8.   color: white;
  9.   height: 4.4rem;
  10.   position: fixed;
  11.   top: 0;
  12.   left: 0;
  13.   right: 0;
  14.   z-index: 100;
  16.   font-size: 1.4rem;
  17. }
  18. header .menu {
  19.   text-align: center;
  20.   flex: 1;
  21.   font-size: 2.5rem;
  22. }
  23. header .search {
  24.   flex: 6;
  25.   padding: 0.5rem;
  26.   background-color: #fff;
  27.   border-radius: 3rem;
  28.   display: flex;
  29. }
  30. header .search .logo {
  31.   color: #e43130;
  32.   flex: 0 1 4rem;
  33.   font-size: 2rem;
  34.   text-align: center;
  35.   line-height: 2rem;
  36. }
  37. header .search .suosuo {
  38.   color: #ccc;
  39.   flex: 0 1 2em;
  40.   border-left: 1px solid;
  41.   text-align: center;
  42.   line-height: 2rem;
  43. }
  44. header .search .word {
  45.   flex: auto;
  46.   border: none;
  47.   outline: none;
  48.   color: #aaa;
  49. }
  50. header .login {
  51.   color: #fff;
  52.   text-align: center;
  53.   flex: 1;
  54. }
  55. /* 头部结束 */
  56. /* 内容区暂定 */
  57. main {
  58.   position: absolute;
  59.   top: 4.4rem;
  60.   bottom: 4.4rem;
  61.   left: 0;
  62.   right: 0;
  64.   font-size: 1.4rem;
  65. }
  66. /* 底部开始 */
  67. footer {
  68.   display: flex;
  69.   justify-content: space-around;
  70.   align-items: center;
  71.   color: #666;
  72.   background-color: #fafafa;
  73.   box-shadow: 0 0 3px #999;
  74.   height: 4.4rem;
  75.   position: fixed;
  76.   bottom: 0;
  77.   left: 0;
  78.   right: 0;
  79.   z-index: 100;
  80.   font-size: 1.6rem;
  81. }
  82. footer div {
  83.   display: flex;
  84.   flex-flow: column nowrap;
  85.   align-items: center;
  86. }
  88. footer div .iconfont {
  89.   font-size: 2.4rem;
  90. }
  91. footer div .span {
  92.   font-size: 1rem;
  93. }
  94. /* 底部结束 */

效果如下

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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