整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          冷門的HTML - tabindex 的作用
          
        
           
          
	
	
          
		
                        
          門的HTML - tabindex 的作用
          HTML 的 tabindex 屬性開發過程中一般不會使用到，最近開發中有個需求兼顧富交互，便總結了一下。本篇文章同時收錄在我的【前端知識點】中，Github鏈接請點擊閱讀原文直達，歡迎 Star
          兼容性：Safari不支持！
          閱讀本文您將收獲
          • tabindex的作用
          • tabindex的使用
          • 如何利用 tabindex 創造更好的用戶體驗
          前言
          在我們日常使用網頁的過程中，可以通過鍵盤控制一些元素的聚焦，從而達到便捷訪問的目的
          element 分為 focusable 和 非focusable ,如果使用了tabindex就可以改變相關的行為
          在HTML中有6個元素默認支持聚焦：
          • 帶 href 屬性的 <a> 標簽
          • 帶 href 屬性的 <link> 標簽
          • <button></button> 標簽
          • <input /> 標簽 (排除帶有 type="hidden" 屬性的)
          • <select></select> 標簽
          • <textarea></textarea> 標簽
          以上的元素默認都可以使用 Tab 鍵，以及 JS focus() 方法聚焦
          document.querySelector("a").focus();
          使用 tab鍵 進行聚焦元素時，聚焦的順序等于元素在代碼中的出現先后順序，當我們進行富交互優化時，就需要用到 tabindex 這個屬性來幫助我們進行更好用戶體驗的優化了
          tabindex的作用
          ①元素是否能聚焦：通過鍵盤這類輸入設備，或者通過 JS focus() 方法
          ②元素什么時候能聚焦：在用戶通過鍵盤與頁面交互時
          通俗來說：就是當用戶使用鍵盤時，tabindex用來定位html元素,即使用tab鍵時焦點的順序。
          tabindex的范圍
          tabindex理論上可以使用在幾乎所有元素上
          • tabindex 理論上可以用在幾乎所有元素上，不管這個元素默認是否支持聚焦
          tabindex 有三個值：0，-N(通常是-1)，N(正值)
          • tabindex=0，該元素可以用tab鍵獲取焦點
            • 且訪問的順序是按照元素在文檔中的順序來focus，即使采用了浮動改變了頁面中顯示的順序，依然是按照html文檔中的順序來定位
          • tabindex<=-1，該元素用tab鍵獲取不到焦點，但是可以通過js獲取
            • 這樣就便于我們通過js設置上下左右鍵的響應事件來focus
            • 取值 -1~-999 之間沒有區別，但為了可讀性和一致性考慮，推薦使用 -1
          • tabindex>=1，該元素可以用tab鍵獲取焦點，而且優先級大于tabindex=0
            • 不過在tabindex>=1時，數字越小，越先定位到；
            • 如果多個元素擁有相同的 tabindex ，他們的相對順序按照他們在當前DOM中的先后順序決定
          tabindex的使用
          tabindex 決定聚焦順序
          • 可聚焦元素中，正整數數值越大，順序越往后，正整數數值的節點順序比0值的節點靠前
          • 代碼：
          // HTML
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
          • 效果：
          • 可聚焦元素中，相同 tabindex 數值的節點，根據 DOM節點 先后順序決定聚焦順序
          • 代碼：
          // HTML
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
<button type="button" tabindex="999">tabindex === 999</button>
<button type="button" tabindex="0">tabindex === 0</button>
          • 效果：
          tabindex 決定是否聚焦
          • 節點的 tabindex 設置為 -1 時，當前節點使用 tab鍵 不能聚焦
          • 代碼：
          // HTML
<button type="button">未設置tabindex</button>
<button type="button" tabindex="-1">tabindex === -1</button>
<button type="button" tabindex="0">tabindex === 0</button>
<button type="button" tabindex="1">tabindex === 1</button>
          • 效果：
          tabindex 與JS編程聚焦
          • 通過 tabindex 結合JS可以讓默認不支持聚焦的節點進行聚焦,tabindex 為不超出范圍的任何整數值都可以
          • 代碼：
          // HTML
<button type="button" @click="clickBtn()">點擊讓DIV聚焦</button>
<div id="FocusDiv" ref="FocusDiv" tabindex="-1">這是一個div</div>

// JS
clickBtn: function() {
    document.getElementById('FocusDiv').focus();
}
          • 效果：
          如何利用 tabindex 創造更好的用戶體驗
          針對自定義標簽進行富交互優化
          • 我們在創建一個自定義的標簽時，如果默認行為中不包含聚焦事件，我們可以使用 tabindex 為它增加聚焦功能，從而可以像很多可聚焦節點一樣進行順次焦點聚焦了
          針對特定節點禁止聚焦操作
          • 某些浮層及上層節點，如 toast組件、模態框、側邊彈出信息等，我們不希望節點被用戶聚焦捕獲，可以將節點的 tabindex 設置為 -1，就能避免這一問題
          復雜列表控制聚焦順序
          • 一些復雜的樹形結構或者列式結構，如果需要用戶操作順序按照我們預想的書序進行聚焦，可以利用tabindex 值的大小來進行處理。
          本框是表單中與用戶打交道最多的元素之一,它包括單行文本框<input type="text">和多行文本框<textarea>,
          更廣義的還可以包括密碼輸入框<input type="password">。
          控制用戶輸入字符個數
          對于單行文本框<input type="text">和密碼輸入框<input type="password">而言,可以利用自身的maxlength屬性控制用戶輸入字符的個數;
          <input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"/>
          而對于多行文本框<textarea>沒有類似的屬性,可以自定義類似的屬性,并對onkeypress事件做相應的處理
          <textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea/>
          以上代碼中maxlength為自定義屬性(<textarea>標簽中沒有這個maxlength屬性),其值為最多允許輸入的字符的個數,
          在onkeypress事件發生時則調用返回LessThan()函數的返回值,函數如下:
          function LessThan(oTextArea){
//返回文本框字符個數是否符號要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
          實例:
          <html>
<head>
<title>控制textarea的字符個數</title>
<style>
<!--
form{
padding:0px;
margin:0px;
font:14px Arial;
}
input.txt{ /* 文本框單獨設置 */
border: 1px inset #00008B;
background-color: #ADD8E6;
}
input.btn{ /* 按鈕單獨設置 */
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
padding: 1px 2px 1px 2px;
}
-->
</style>
<script language="javascript">
function LessThan(oTextArea){
//返回文本框字符個數是否符號要求的boolean值
return oTextArea.value.length < oTextArea.getAttribute("maxlength");
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
<p><label for="name">請輸入您的姓名:</label>
<input type="text" name="name" id="name" class="txt" value="姓名" maxlength="10"></p>
<p><label for="comments">我要留言:</label><br>
<textarea name="comments" id="comments" cols="40" rows="4" maxlength="50" onkeypress="return LessThan(this);"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn"></p>
</form>
</body>
</html>
          設置鼠標經過時自動選擇文本
          通常是在用戶名、密碼等文本框中希望鼠標指針經過時自動聚焦，并且能夠選中默認值以便用戶直接刪除。
          首先是鼠標指針經過時自動聚焦，代碼如下
          onmouseover="this.focus()"
          其次是聚焦后自動選中所有文本，代碼如下：
          onfocus="this.select()"
          如:<label for="name">請輸入您的姓名:</label>
<input type="text" name="name" id="name" class="txt" value="姓名" onmouseover="this.focus()" onfocus="this.select()">
          javascript分離實現自動選擇文本
          i，大家好，我是拾光。
          今天給大家帶來的是前端的部分功能模塊，
          以后的時間里還會給大家繼續發布更多的模塊內容。
          希望大家看完了之后甩一個收藏關注哦~
          1、CSS3按鈕的另類做法
          HTML代碼：
          <body>
          <div id="box">
           <div id="icon">
           <i><em></em><span></span></i>
           </div>
          </div>
          </body>
          CSS:
          body
          {
           margin: 0px;padding: 0px;
          }
          #box{
           height: 31px;
           width: 31px;
           border-radius: 50%;
           box-shadow: 0 0 0 1px #ccc inset; 
           margin: 100px;
           transition:box-shadow 0.25s ease-in-out 0s,
           transform 0.25s ease-in-out 0s;
          }
          #box:hover
          {
           box-shadow: 0 0 0 16px #039 inset;
           /*transition:box-shadow 0.25s ease-in-out 0s; */
           transform: rotate(180deg);
          }
          i
          {
           display: block;
           height:6px;
           width: 6px;
           float:left;
           position:relative;
           top:13px;
           left:10px;
          }
          em,span
          {
           width: 0px;
           height: 0px;
           border-style: solid dashed dashed dashed;
           border-width: 5px;
           border-color: transparent;
           position: absolute;
           left:0px;top:0px;
          }
          em{
           border-top-color:#000;
           top:1px;
          }
          span
          {
           border-top-color:#fff;
          }
          2、css3立體旋轉導航菜單
          HTML：
          <body>
          <ul class="menu">
          <li class="home current">
          <a href="#">
          <span>Home</span>
          <span>Home</span>
          <span>Home</span>
          <span>Home</span>
          </a>
          <ul>
          <li><a href="">Sub Menu</a></li>
          <li><a href="">Sub Menu</a></li>
          </ul>
          </li>
          <li class="about">
          <a href="#">
          <span>About</span>
          <span>About</span>
          <span>About</span>
          <span>About</span>
          </a>
          </li>
          <li class="contact">
          <a href="#">
          <span>Contact</span>
          <span>Contact</span>
          <span>Contact</span>
          <span>Contact</span>
          </a>
          <ul>
          <li><a href="">Sub Menu</a></li>
          <li><a href="">Sub Menu</a></li>
          </ul>
          </li>
          <li class="twitter">
          <a href="#">
          <span>Twitter</span>
          <span>Twitter</span>
          <span>Twitter</span>
          <span>Twitter</span>
          </a>
          </li>
          </ul>
          </body>
          CSS：
          body {
          margin: 0;
          padding: 0;
          background: #f9f9f9;
          }
          .menu {
          -webkit-perspective: 100000;
          -moz-perspective: 100000;
          -o-perspective: 100000;
          -ms-perspective: 100000;
          perspective: 1200;
          display: block;
          width: 800px;
          height: 65px;
          margin: 0 auto;
          list-style: none;
          padding: 0;
          padding: 0 0 0 30px;
          border-radius: 5px;
          background-color: #546065;
          }
          .menu li {
          -webkit-transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
          height: 21px;
          width: 140px;
          margin: 0 10px 0 0;
          float: left;
          position: relative;
          -webkit-transition: all 0.2s linear;
          -moz-transition: all 0.2s linear;
          -o-transition: all 0.2s linear;
          -ms-transition: all 0.2s linear;
          transition: all 0.2s linear;
          }
          .menu li a {
          display: block;
          color: #fff;
          font-weight: bold;
          box-sizing: border-box;
          height: inherit;
          width: inherit;
          font-size: 1.2em;
          text-decoration: none;
          text-transform: uppercase;
          font-family: Arial, sans-serif;
          }
          .menu li a span {
          height: inherit;
          width: inherit;
          padding: 22px 0;
          text-align: center;
          position: absolute;
          left: 0;
          display: block;
          }
          .current {
          -webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
          -moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
          -o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
          -ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
          transform: rotate3d(1,0,0,-90deg) translateZ(-20px);
          }
          .menu li a span:first-of-type {
          -webkit-transform: translateZ(74px);
          -moz-transform: translateZ(74px);
          -o-transform: translateZ(74px);
          -ms-transform: translateZ(74px);
          transform: translateZ(74px);
          background-color: #3e4649;
          box-shadow: inset 0px 0px 15px rgba(0,0,0,0.1);
          }
          .menu li a span:nth-of-type(2) {
          background: #fa623f;
          box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1);
          -webkit-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
          -moz-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
          -o-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
          -ms-transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
          transform: rotate3d(1,0,0,90deg) translateZ(32px) translateY(42px);
          }
          .menu li a span:nth-of-type(3) {
          background: #f8876d;
          box-shadow: inset 0px 35px 30px -30px rgba(255,255,255,0.1);
          -webkit-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
          -moz-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
          -o-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
          -ms-transform: rotate3d(1,0,0,180deg) translateZ(-9px);
          transform: rotate3d(1,0,0,180deg) translateZ(-9px);
          }
          .menu li a span:nth-of-type(4) {
          background: #3e4649;
          -webkit-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
          -moz-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
          -o-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
          -ms-transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
          transform: rotate3d(1,0,0,270deg) translateZ(33px) translateY(-42px);
          }
          .menu > li:hover {
          -webkit-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); 
          -moz-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); 
          -o-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); 
          -ms-transform: rotate3d(1,0,0,-90deg) translateZ(-20px); 
          transform: rotate3d(1,0,0,-90deg) translateZ(-20px); 
          }
          .menu > .current:hover {
          -webkit-transform: rotate3d(1,0,0,-180deg) translateY(-44px);
          -moz-transform: rotate3d(1,0,0,90deg) translateZ(-64px);
          -o-transform: rotate3d(1,0,0,-180deg) translateY(-44px);
          -ms-transform: rotate3d(1,0,0,-180deg) translateY(-44px);
          transform: rotate3d(1,0,0,-180deg) translateY(-44px);
          }
          .menu > .current span:nth-of-type(4), .menu > li:hover span:nth-of-type(4) {
          background: #fa623f;
          }
          .menu > .current:hover span:nth-of-type(4) {
          background: #f8876d;
          }
          .menu ul {
          opacity: 0;
          width: 100%;
          border-radius: 0;
          padding: 0;
          }
          .menu > li:hover ul {
          opacity: 1;
          height: auto;
          background: #fa623f;
          -webkit-transition: opacity 0.1s linear 0.3s;
          -moz-transition: opacity 0.1s linear 0.3s;
          -o-transition: opacity 0.1s linear 0.3s;
          -ms-transition: opacity 0.1s linear 0.3s;
          transition: opacity 0.1s linear 0.3s;
          -webkit-transform: rotate3d(1,0,0, 90deg) translateY(114px);
          -moz-transform: rotate3d(1,0,0, 90deg) translateY(115px);
          -o-transform: rotate3d(1,0,0, 90deg) translateY(114px);
          -ms-transform: rotate3d(1,0,0, 90deg) translateY(114px);
          transform: rotate3d(1,0,0, 90deg) translateY(114px);
          position: absolute;
          left: 0;
          top: 65px;
          }
          .menu > li ul {
          -webkit-transform: rotate3d(1,0,0, 90deg);
          -moz-transform: rotate3d(1,0,0, 90deg);
          -o-transform: rotate3d(1,0,0, 90deg);
          -ms-transform: rotate3d(1,0,0, 90deg);
          transform: rotate3d(1,0,0, 90deg);
          }
          .menu > .current:hover ul {
          -webkit-transform: rotate3d(1,0,0, 180deg) translateY(145px);
          -moz-transform: rotate3d(1,0,0, 270deg) translateY(31px);
          -o-transform: rotate3d(1,0,0, 180deg) translateY(141px);
          -ms-transform: rotate3d(1,0,0, 180deg) translateY(161px);
          transform: rotate3d(1,0,0, 180deg) translateY(161px);
          top: 65px;
          background: #f8876d;
          }
          .menu ul li {
          display: block;
          float: none;
          border-radius: 0;
          background: inherit;
          width: 170px;
          height: 40px;
          }
          .menu ul li a {
          box-sizing: border-box;
          padding: 8px 0 0 25px;
          background: inherit;
          width: inherit;
          }
          .menu ul li a:hover {
          background-color: #eb350b;
          }
          .menu ul .current a:hover {
          background-color: #ce5f45;
          }
          .menu .contact {
          width: 170px;
          }
          #travel {
          padding: 10px;
          background: rgba(0,0,0,0.6);
          border-bottom: 2px solid rgba(0,0,0,0.2);
          font-variant: normal;
          text-decoration: none;
          margin-bottom: 50px;
          }
          #travel a {
          font-family: 'Georgia', serif;
          text-decoration: none;
          border-bottom: 1px solid #f9f9f9;
          color: #f9f9f9;
          }
          .header {
          font-family: Arial, sans-serif;
          text-align: center;
          margin-bottom: 60px;
          }
          .header h2 {
          font-size: 2em;
          }
          3、3D旋轉導航欄
          HTML：
          <body>
          <div id="nav">
          <ul class="nav-menu clearfix unstyled">
          <li><a href="#" class="three-d active">
          Home
          <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          Services
          <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          Products
          <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          About
          <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          Contact
          <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          Blog
          <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
          </a>
          <ul class="clearfix unstyled drop-menu">
          <li><a href="#" class="three-d">
          Html5
          <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          Css3
          <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          JavaScript
          <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
          </a></li>
          <li><a href="#" class="three-d">
          Videogames
          <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
          </a></li>
          </ul>
          </li>
          <li><a href="#" class="three-d">
          Shop On-line
          <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
          </a></li>
          </ul>
          </div>
          </body>
          CSS：
          @import url("http://www.w3cplus.com/demo/css3/base.css");
          /*任務一：引入本地字體文件*/
          @font-face {
          font-family: 'sansationregular';
          src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot');
          src: url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.eot?#iefix') format('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/embedded-opentype'),
          url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.woff') format('woff'),
          url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.ttf') format('truetype'),
          url('http://www.w3cplus.com/demo/css3/3DAnimationDropdownMenu/sansation_regular-webfont.svg#sansationregular') format('svg');
          font-weight: normal;
          font-style: normal;
          }
          body {
          background-color:#edecec;
          }
          /* basic menu styles */
          .nav-menu {
           display: block;
          background: #74adaa;
          width:950px;
          margin: 50px auto 150px;
          }
          .nav-menu > li {
           display: inline;
           float:left;
          border-right:1px solid #94c0be;
          }
          .nav-menu > li:last-child {
           border-right: none;
          }
          .nav-menu li a {
           color: #fff;
          display: block;
          text-decoration: none;
           /*調用本地字體*/
          font-family: 'sansationregular';
          -webkit-font-smoothing: antialiased;
          -moz-font-smoothing: antialiased;
          font-smoothing: antialiased;
          text-transform: capitalize;
          overflow: visible;
          line-height: 20px;
          font-size: 20px;
          padding: 15px 30px 15px 31px;
          }
          /* animation domination */
          .three-d {
           /* 任務三、設置3D舞臺布景 */
           -webkit-perspective: 200px;
           -moz-perspective: 200px;
           -ms-perspective: 200px;
           -o-perspective: 200px;
           perspective: 200px;
           /*任務四、設置3D舞臺布景過渡效果*/
           -webkit-transition: all .07s linear;
           -moz-transition: all .07s linear;
           -ms-transition: all .07s linear;
           -o-transition: all .07s linear;
           transition: all .07s linear;
           position: relative;
          }
          .three-d:not(.active):hover {
           cursor: pointer;
          }
          /*任務五、給不是當前狀態的3D舞臺的懸浮與聚焦狀態設置變形效果*/
          .three-d:not(.active):hover .three-d-box, 
          .three-d:not(.active):focus .three-d-box {
           -wekbit-transform: translateZ(-25px) rotateX(90deg);
           -moz-transform: translateZ(-25px) rotateX(90deg);
           -o-transform: translateZ(-25px) rotateX(90deg);
           -ms-transform: translateZ(-25px) rotateX(90deg);
           transform: translateZ(-25px) rotateX(90deg);
          }
          .three-d-box {
           /*任務六、給3D舞臺中“.three-d-box”設置過渡與變形效果*/
           -webkit-transition: all .3s ease-out;
           -moz-transition: all .3s ease-out;
           -ms-transition: all .3s ease-out;
           -o-transition: all .3s ease-out;
           transition: all .3s ease-out;
           -webkit-transform: translatez(-25px);
           -moz-transform: translatez(-25px);
           -ms-transform: translatez(-25px);
           -o-transform: translatez(-25px);
           transform: translatez(-25px);
           -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
           -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
           transform-style: preserve-3d;
           -webkit-pointer-events: none;
           -moz-pointer-events: none;
           -ms-pointer-events: none;
           -o-pointer-events: none;
           pointer-events: none;
           position: absolute;
           top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 100%;
          }
          /*任務七、給導航設置3D前，與3D后變形效果*/
          .front {
           -webkit-transform: rotatex(0deg) translatez(25px);
           -moz-transform: rotatex(0deg) translatez(25px);
           -ms-transform: rotatex(0deg) translatez(25px);
           -o-transform: rotatex(0deg) translatez(25px);
           transform: rotatex(0deg) translatez(25px);
          }
          .back {
           -webkit-transform: rotatex(-90deg) translatez(25px);
           -moz-transform: rotatex(-90deg) translatez(25px);
           -ms-transform: rotatex(-90deg) translatez(25px);
           -o-transform: rotatex(-90deg) translatez(25px);
           transform: rotatex(-90deg) translatez(25px);
           color: #FFE7C4;
          }
          .front, .back {
           display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: #74adaa;
          padding: 15px 30px 15px 31px;
          color: white;
          -webkit-pointer-events: none;
           -moz-pointer-events: none;
           -ms-pointer-events: none;
           -o-pointer-events: none;
           pointer-events: none;
           -webkit-box-sizing: border-box;
           box-sizing: border-box;
          }
          /*任務八、設置導航當前狀態與懸浮狀態下的背景效果*/
          .nav-menu li .active .front,
          .nav-menu li .active .back,
          .nav-menu li a:hover .front,
          .nav-menu li a:hover .back {
           background-color: #51938f;
           -webkit-background-size: 5px 5px;
           background-size: 5px 5px;
           background-position: 0 0, 30px 30px;
           background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
           background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
          background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
           background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
           background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
          }
          .nav-menu ul {
           position: absolute;
          text-align: left;
          line-height: 40px;
          font-size: 14px;
          width: 200px;
          -webkit-transition: all 0.3s ease-in;
           -moz-transition: all 0.3s ease-in;
           -ms-transition: all 0.3s ease-in;
           -o-transition: all 0.3s ease-in;
           transition: all 0.3s ease-in;
           -webkit-transform-origin: 0px 0px;
           -moz-transform-origin: 0px 0px;
           -ms-transform-origin: 0px 0px;
           -o-transform-origin: 0px 0px;
           transform-origin: 0px 0px;
           -webkit-transform: rotateX(-90deg);
           -moz-transform: rotateX(-90deg);
           -ms-transform: rotateX(-90deg);
           -o-transform: rotateX(-90deg);
           transform: rotateX(-90deg);
           -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
           -ms-backface-visibility: hidden;
           -o-backface-visibility: hidden;
          backface-visibility: hidden;
          }
          /*任務九、顯示下拉導航菜單，并其設置一個變形效果*/
          .nav-menu > li:hover ul {
           display: block;
           -webkit-transform: rotateX(0deg);
           -moz-transform: rotateX(0deg);
           -ms-transform: rotateX(0deg);
           -o-transform: rotateX(0deg);
          transform: rotateX(0deg);
          }
          今天就先分享到這些吧。大家可以根據你自己的需求來進行兼容不同的瀏覽器；
          好久沒有跟大家分享段子了，今天給大家發幾個段子樂呵一下。
          希望大家每天開心；
          1、
          公園里長椅上，一對小情侶依偎在一起旁若無人地說著情話， 女孩羞澀地問男孩：“要是我們結了婚生孩子，你是喜歡兒子還是女兒？” 男孩寵溺地刮了一下女孩的鼻梁，溫柔地說：“只要是我的，我都喜歡！” 女孩噗嗤一笑，輕輕錘了一下男孩的胸口：“你好壞！要求真高！”
          2、
          老師：“好了，讓我們來統計一下獨生子女，應該都是吧”
          小明：“老師，我不是，”
          老師：“哦那你有個什么？”
          小明：“我有個弟弟”
          老師：“哦，那他多大了？”
          小明：“18厘米”
          老師紅著臉：“不要臉，下課滾到我辦公室，我要好好教育你！”
          3、
          一男一女是網友，聊了很長時間，一天，男的忽然提起
          男：我倆見個面吧。
          女：行，但是你要先回答我個問題。
          男：你問吧。
          女：你抬頭挺胸向下看，看到了什么？
          男：腳??！
          女：我倆不合適。
          4、
          今天朋友幾個一起出去吃大餐，吃完后，我提出誰丑誰付賬單，正巧一旁的服務員聽到了，然后看了我們一眼，說：“你們還是AA制吧……”
          麻煩大家動動小手甩一個收藏與關注。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精品黑人一区二区三区|
亚洲AV午夜福利精品一区二区|
国产在线精品一区二区中文|
一区二区视频传媒有限公司|
亚洲宅男精品一区在线观看|
亚洲av高清在线观看一区二区
|
亚洲AV无码一区二区三区DV
|
国产精品一区二区久久精品|
国产日韩高清一区二区三区|
亚洲国产AV一区二区三区四区|
亚洲国产一区二区三区在线观看|
骚片AV蜜桃精品一区|
91精品一区二区综合在线|
99久久精品日本一区二区免费|
91国在线啪精品一区|
亚洲AV成人一区二区三区观看|
一区二区中文字幕在线观看|
久久一区二区三区免费|
农村乱人伦一区二区|
无码国产精品一区二区免费16|
欧美激情一区二区三区成人|
蜜桃臀无码内射一区二区三区|
午夜视频久久久久一区
|
国产中的精品一区的|
色窝窝无码一区二区三区色欲|
国产一区内射最近更新|
亚洲av色香蕉一区二区三区蜜桃|
亚洲国产精品自在线一区二区|
精品国产福利第一区二区三区|
国产成人一区二区三区精品久久
|
精品无码一区二区三区水蜜桃|
蜜桃AV抽搐高潮一区二区|
www一区二区三区|
日本无卡码免费一区二区三区|
亚洲国产精品一区二区九九|
国产一区二区三区手机在线观看|
无码视频一区二区三区|
国产自产对白一区|
五十路熟女人妻一区二区|
爆乳无码AV一区二区三区|
性盈盈影院免费视频观看在线一区|