低版本浏览器使用最新渲染模式以免IE不支持CSS3属性

1.让IE使用最新的渲染模式，告诉低版本浏览器使用最新渲染模式以免IE不支持CSS3属性

<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=0">；
1

2.设置屏幕自适应，网页不可缩放

<meta name="viewport" content="width=device-width,initial-scale=1">
1

3.使用radio制作导航

①让一个元素不可见（隐藏）的几种方法：

display:none; 隐藏不占位

position:absolute; left:-9999px，给他一个足够大的位偏移 ;

visible:hidden;隐藏但他还站着位，他还在那个地方呆着

opacity:0px;隐藏但还占着位，他在，只是透明度为0，我们看不见他。

②display：none 隐藏不占位

我们虽然在页面中看不到那个单选按钮，但他在页面中其实是有作为的，但我们又要把他隐藏掉，但他又不能走掉，因为我们要点击他，
我们先要触发input单选按钮来判断我们选没选选中a，通过单选按钮来确定我们选没选中a，(input也可以设置它的宽高来扩大它的触发范围，但他的形状我们并看不出来有什么变化，其实它占的位还是我们设置的那个宽高)
所以此时要让input的优先级高于a（input的z-index:1000；要大于a的z-index这个很重要)。

3.添加样式

+表示我们当前元素它后面的元素。

#st-control-1+a表示st-control-1后面的a。

#st-control-1~a表示st-control-1后面所有的a。

Input:checked是用来匹配所有被选中的单选按钮或复选框（input有一个属性是checked=“checked”）

我现在要设置的不是input而是input上面的a，我们的所有样式并不是针对input，input只是方便我们判断我们的东西有没有被选中，我的样式都是在a上的所以要这样写：

#st-control-1 input：checked+a{ background：#821134；}
1

表示#st-control-1下的被选中的那个input下的a。

我点中了那个导航，那个导航的正上方才会出现三角，没被点中的就不会有三角，所以我这个三角是动态生成的，那么我们希望我们这个三角是生成在我们的a里面的，也就是我们要在我们的a标签的最后插入一个三角形，所以要用到

#st-control-1 input：checked+a：after
1

（动态的在a标签后面生成三角）`{content：}

【#st-control-1 input：checked（因为没有选中的导航是没有三角的，所以要用到checked）】`

#st-control-1 input：hover+a：
1

表示#st-control-1下的所有的input在鼠标滑过的时候它下面的a的背景颜色发生变化。

#st-control-1 input：checked：hover+a：
1

表示#st-control-1下的所有的input当中被选中的那个input在鼠标滑下的时候它的背景颜色不发生变化。

4.div盒子

我们把所有的内容先塞到一个大的div盒子里，接着是每一个导航对应的页面
我们每一个导航对应的页面塞到

标签

（他是h5新增的一个语义化的标签，主要是用来放页面的主要内容的）里，这里我们给每个section定义一个id，我们在做导航的时候，当我们点击导航的时候，我们要找到导航对应的页面，所以我们要给每个导航即a标签加一个锚点链接（锚点链接的id是对应的）

<a href=”#st-panal1”>a>
<section id=”st-panal1”>section>  是对应的

1
2
3

5.大盒子和浏览器窗口左对齐和顶对齐

我们这个图标并不是用的图片，而是利用css3的@font-face定义的一个字体

中的内容都是占满整个屏幕的所以：

.St-scroll和st-panal有共同的样式

{width：100%；height：100%；}
1

页面是带有滑动效果的，也就是页面的位置会发生改变，页面位置的改变是相对于他原来的位置而改变的，所以position：relative；不管是大盒子st-scroll还是小盒子st-panal，它们都要加上position：relative；所以我们一开始就要定义body{overflow：hidden；}溢出的会隐藏掉，（没有overflow：hidden；就会出现垂直滚动条）

.st-scroll{top：0；left:0；}
1

也就是让这个大盒子和我们的浏览器窗口是左对齐和顶对齐的。

6.页面切换的原理

我们改变的不是section的位置，而是放整个section的st-scroll这个div大盒子的位置。

.st-scroll{top：0；left:0；-webkit-transform-translate3d(0,0,0)}
1

（对应的是x轴，y轴，z轴）这个是让他平移
哪个导航被我们点中了，我们就要去找到他对应的section
盒子（+仅仅匹配紧跟在当前元素它后面的元素,并不强调一定要紧跟在他后面的，只要在他后面就可以了，没有强调紧跟这两个字）但我们现在通过input想找的不是a而是st-scroll所以我们不能用+，因为#st-control-1和.st-scroll中间还有其他的元素，只能用~

#st-control-1:checked ~ .st-scroll{-webkit-transform:translateY(0%);}
#st-control-2:checked~.st-scroll{-webkit-transform:translateY(-100%);}
#st-control-3:checked~.st-scroll{-webkit-transform:translateY(-200%);}
#st-control-4:checked~.st-scroll{-webkit-transform:translateY(-300%);}
1
2
3
4

(因为我们每个section都是100%的高)

发现我们在点击的时候仅仅只是做了切换，看起来很生硬，并没有页面滑动的效果，因为我们没有定义transition过渡（也就是我把页面从0%的位置变到-300%的位置中间的那个过渡的过程），transition是用来做过渡的，那么transition定义在哪儿呢：你改变的是谁，就定义在谁的上边，

#st-control-1 :checked~ .st-scroll{-webkit-transform:translateY(-100%);
1

-webkit-transition:all(这里过渡谁就写谁，如果觉得麻烦就写all，表示过渡所有的属性),0.6s，ease-in-out;}(注意把其他浏览器的内核也写上，尼玛我这里就不写了)这样页面在切换的时候就会有一个中间过渡的过程，有一个滑动的效果，而不是一下子就他妈的给切过去了。

7.after选择器

这里的图标并不是用的图片，而是用的我们网上下载的特殊的字体，通过把字母或者数字定义成这种特殊的字体而显示出来这些图标，所有你要在出现图标的div上都要定义一个data-icon属性。

data-icon=什么，说明这个图标就是用什么来表示出来的，比如data-icon=2说明这个图标就是用数字2显示出来的。

我希望我的这个图标是出现在div的后边的，所以要用到：after选择器。

：after表示在这个元素的后面插入一个元素。

：after中的content可以是一串字符串，也可以是一个URL地址，还可以是attr这个关键字来获取的一个属性。

【data-icon】：after{content：attr(data-icon);}

也就是说我要在所有含有data-icon这个属性的元素的后面插入内容，内容就是data-icon属性的值
after 选择器向选定的元素之后插入内容。

8.使用content 属性来指定要插入的内容

在 jQuery Mobile 中，如需为按钮添加图标，请使用 data-icon 属性：

<a href="#anylink" data-role="button" data-icon="refresh">Refresh Pagea>
1

提示：在 或 元素中，您也可以使用 data-icon 属性。

属性选择器要放在中括号里的【】

【data-icon】选择器表示找到所有含有data-icon属性的元素

对父盒子旋转了45度，里面的文字内容特么也跟着转了45度，特么我就给他转回去再加上 -webkit-transform:rotate(-45deg);，

9.font-face定义特殊字体

通过@font-face来定义一些特殊的字体

@font-face//在页面中引入这样的字体，下面如果要用到这种字体就可以直接通过font-family来设置

font-family: myFirstFont;//你看你下载的什么就用什么名儿，一般的字体文件也会包含那几种字体格式

src: url('Sansation_Light.ttf'),
   url('Sansation_Light.eot'); /* IE9 */
}
1
2
3

10.页面内容部分的动画

首先动画定义在哪儿：
注意的是千万不要把动画定义在h2上，
如果定义在h2上则所有的h2标签的元素都会有动画
，但其实是，我们点哪个了，那个页面进来了，那个页面才会有动画，
也就是说我们哪个导航是选中的了，切换到对应的页面了，
对应的这个页面的h2才是有动画的，其他的页面不会有动画，
所以你首先得知道你选中的是哪个section
（结构写深的时候要注意选择器的选择，+和 ~ 匹配的都是和跟你并列的同级的元素）
注意：

#st-control-1：checked~.st-scroll #st-pannal h2{}
1

被选中的那个元素的后边的st-scroll下的#st-pannal下的h2。

h2区分Transition动画。
（它实现的动画需要事件去触发，比如：鼠标经过或者点击）和animation动画（他实现的动画是不需要动画去触发的）