移动前端开发项目-6.固定头部的制作

6.固定头部的制作
开发工具:Sublime Text
运用技术：Sass

6.固定头部的制作.png

一、移动平台meta标签设置：

<head>
  <meta charset="UTF-8">
  <!-- 设置**视口标签** 在iPhone的浏览器中页面将以原始大小显示，并不允许缩放 -->
  <meta name="viewport" content="width=device-width,
initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  <!-- 删除默认的苹果工具栏和菜单栏 -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <!-- "添加到主屏幕“后，全屏显示 -->
  <meta name="apple-touch-fullscreen" content="yes"  />
  <!-- 控制状态栏显示样式 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <!-- 忽略数字自动识别为电话号码 -->
  <meta name="format-detection" content="telephone=no">
  <title>***</title>
  <!-- 设置web app的放置主屏幕上icon文件路径 -->
  <link rel="apple-touch-icon-precomposed" href="images/##icon.jpg" />
  <!-- 设置启动时候的界面 -->
  <link rel="apple-touch-startup-image" href="images/##.jpg" />
</head>

二、头部导航制作
1、index.html

//nav#nav>ul.navlist>li*4>a[href="#"]>span
<nav id="nav">
  <ul class="navlist">
    <li id="n_0"><a href="index.html"><span></span></a></li>
    <li id="n_1"><a href="usercenter.html"><span></span></a></li>
    <li id="n_2"><a href="cart.html"><span></span></a></li>
    <li id="n_3"><a href="allproduct.html"><span></span></a></li>
  </ul>
</nav>

2、创建公用样式：basis.scss
sass>common>cd.>basis.scss

3、书写导航栏样式（basis.scss）
4、创建style.scss:
sass>cd.>style.scss
5、将basis.scss引进style.scss

@charset "utf-8";
@import "common/base.scss";

6、生成css文件：
static>sass --style compressed sass/style.scss css/style.css
7、监听css文件：
static>sass --watch sass/style.scss:css/style.css

8、basis.scss:

@charset "utf-8";
/* css reset */
....

.gradient{background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f4f4f4),color-stop(100%,#eee));background: -webkit-linear-gradient(top,#f4f4f4 0,#eee 100%);background: linear-gradient(to bottom,#f4f4f4 0,#eee 100%);}
.bottomshadow{border-bottom: solid 1px #B3B3B3;-webkit-box-shadow: 0 1px 1px 0 #DFDFDF;box-shadow: 0 1px 1px 0 #DFDFDF;}

/* nav S */
nav{
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1000;
  width: 100%;
  background: #fafafa;
  .navlist{
    position: relative;
    widows: 100%;
    height: 50px;
    @extend .gradient;
    @extend .bottomshadow;
    li{
      float: left;
      width: 25%;
      height: 50px;
      a{
        display: inline-block;
        width: 100%;
        height: 50px;
        border-right: 1px solid #EAEAEA;
        text-align: center;
        span{
          display: inline-block;
          width: 50px;
          height: 50px;
          background: url(../images/icon.png) no-repeat 0 -58px;
        }
        .active{background-position: 0 -6px;}
      }
      
    }
  }
}
#n_3 a{
  border-right: 0 none;
  span{background-position: -186px -58px;}
  .active{background-position: -186px -6px;}
}
#n_1{
  span{background-position: -60px -58px;}
  .active{background-position: -60px -6px;}
}
#n_2{
  span{background-position: -120px -58px;}
  .active{background-position: -120px -6px;}
}

/* nav E */

9、效果展示：

nav-效果图.gif

全部频道

移动前端开发项目-6.固定头部的制作