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
