1.讓IE使用最新的渲染模式，告訴低版本瀏覽器使用最新渲染模式以免IE不支持CSS3屬性

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

2.設置屏幕自適應，網頁不可縮放

<meta name="viewport" content="width=device-width,initial-scale=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；}

表示#st-control-1下的被選中的那個input下的a。

我點中了那個導航，那個導航的正上方才會出現三角，沒被點中的就不會有三角，所以我這個三角是動態生成的，那么我們希望我們這個三角是生成在我們的a里面的，也就是我們要在我們的a標簽的最后插入一個三角形，所以要用到

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

（動態的在a標簽后面生成三角）`{content：}

【#st-control-1 input：checked（因為沒有選中的導航是沒有三角的，所以要用到checked）】`

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

表示#st-control-1下的所有的input在鼠標滑過的時候它下面的a的背景顏色發生變化。

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

表示#st-control-1下的所有的input當中被選中的那個input在鼠標滑下的時候它的背景顏色不發生變化。

4.div盒子

我們把所有的內容先塞到一個大的div盒子里，接著是每一個導航對應的頁面
我們每一個導航對應的頁面塞到

標簽

（他是h5新增的一個語義化的標簽，主要是用來放頁面的主要內容的）里，這里我們給每個section定義一個id，我們在做導航的時候，當我們點擊導航的時候，我們要找到導航對應的頁面，所以我們要給每個導航即a標簽加一個錨點鏈接（錨點鏈接的id是對應的）

<a href=”#st-panal1”></a> <section id=”st-panal1”></section> 是對應的

5.大盒子和瀏覽器窗口左對齊和頂對齊

我們這個圖標并不是用的圖片，而是利用css3的@font-face定義的一個字體

中的內容都是占滿整個屏幕的所以：

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

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

頁面是帶有滑動效果的，也就是頁面的位置會發生改變，頁面位置的改變是相對于他原來的位置而改變的，所以position：relative；不管是大盒子st-scroll還是小盒子st-panal，它們都要加上position：relative；所以我們一開始就要定義body{overflow：hidden；}溢出的會隱藏掉，（沒有overflow：hidden；就會出現垂直滾動條）

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

也就是讓這個大盒子和我們的瀏覽器窗口是左對齊和頂對齊的。

6.頁面切換的原理

我們改變的不是section的位置，而是放整個section的st-scroll這個div大盒子的位置。

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

（對應的是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%);}

(因為我們每個section都是100%的高)

發現我們在點擊的時候僅僅只是做了切換，看起來很生硬，并沒有頁面滑動的效果，因為我們沒有定義transition過渡（也就是我把頁面從0%的位置變到-300%的位置中間的那個過渡的過程），transition是用來做過渡的，那么transition定義在哪兒呢：你改變的是誰，就定義在誰的上邊，

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

-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 Page</a>

提示：在 或 元素中，您也可以使用 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 */ }

10.頁面內容部分的動畫

首先動畫定義在哪兒：
注意的是千萬不要把動畫定義在h2上，
如果定義在h2上則所有的h2標簽的元素都會有動畫
，但其實是，我們點哪個了，那個頁面進來了，那個頁面才會有動畫，
也就是說我們哪個導航是選中的了，切換到對應的頁面了，
對應的這個頁面的h2才是有動畫的，其他的頁面不會有動畫，
所以你首先得知道你選中的是哪個section
（結構寫深的時候要注意選擇器的選擇，+和 ~ 匹配的都是和跟你并列的同級的元素）
注意：

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

被選中的那個元素的后邊的st-scroll下的#st-pannal下的h2。

h2區分Transition動畫。
（它實現的動畫需要事件去觸發，比如：鼠標經過或者點擊）和animation動畫（他實現的動畫是不需要動畫去觸發的）

總結

以上是生活随笔為你收集整理的低版本浏览器使用最新渲染模式以免IE不支持CSS3属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。