search

博客列表 >仿某商城手机端页眉页脚代码实例

仿某商城手机端页眉页脚代码实例

酿酒的人ァ
酿酒的人ァ原创
2021年03月27日 10:14:21635浏览

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. /* 底部结束 */

效果如下

上一条：js：事件、留言板、常用字符串函数下一条：flex容器常用的四个属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议