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

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

6.固定头部的制作.png

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

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

//nav#nav>ul.navlist>li*4>a[href="#"]>span

  

    

    

    

    

  

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