H5+CSS3
1.語義化標簽
2.表單的type屬性
<body> <form action="">文本搜索<input type="search" name="" id=""> <br> 密碼<input type="password" name="" id=""> <br> 郵箱<input type="email" name="" id=""> <br> 時間<input type="time" name="" id=""> <br> 日期<input type="datetime-local" name="" id=""> <br> 數字<input type="number" name="" id=""> <br> 范圍<input type="range" max="100" min="0"> <br> 顏色<input type="color"> <br> 電話<input type="tel"> <br> 星期<input type="week"><br> <input type="submit" name="" id=""></form></body>3.新增的表單屬性
<!--新增的屬性--><!--placeholder: 提示文本autofocus : 自動獲取文本autocomplete:自動完成 on:打開 off:關閉 (1.必須成功提交過2.當前元素必須有name屬性)-->用戶名:<input type="text" name="username" placeholder="請輸入用戶名" autofocus autocomplete="on"><br><!--required:必填項pattern:正則-->手機號:<input type="tel" required pattern="^(\+86)?1\d{10}$" autocomplete="on" name="tel"><br><!--multiple:可選多個文件-->文件 <input type="file" multiple><br><!--multiple:可填寫多個郵箱-->郵箱<input type="email" multiple></form> <!-- form="myform" 當{地址} 不在表單myform 中時,myform表單提交無法提交地址值是使用 --> 地址<input type="text" name="aa" form="myform">4.表單新增元素datalist? ? ?keygen+output
<body> <form action="">專業: <select name="" id=""><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option> </select><br><!--下拉框不僅要下拉選擇,還想要填寫--><!--list="sublist" input與datalist建立關系-->專業:<input type="text" list="sublist"><datalist id="sublist"><option value="南京市" label="屬于江蘇"></option><option value="22" label="222"></option><option value="33" label="333"></option><option value="44" label="444"></option><option value="55" label="555"></option></datalist><!--注意: 當input 的type="url" 時,value的值必須包含http: <option value="http://www.baidu.com" label="百度"></option> --></form><!--keygen+output . 多數瀏覽器不支持,使用頻率低. --></body>5.新增的表單事件 oninput? ?oninvalid
<body><form action="">用戶名: <input type="text" name="userName" id="userName"><br>電話: <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br><input type="submit"></form><script>/*1.oninput:監聽當前指定元素的內容改變.*/document.getElementById("userName").oninput=function(){console.log(this.value);}document.getElementById("userPhone").oninput=function(){console.log(this.value);}/*2.oninvalid:當驗證不通過時 觸發*/document.getElementById("userPhone").oninvalid=function(){this.setCustomValidity("請輸入合法的11位手機號碼!");}</script> </body>6.進度條
<body><!-- 新增的進度條--> <progress max="100" value="80"></progress><br> <!--度量器: --> <!-- high:規定較大的值low:規定較小的值max:最大值min:最小值value:當前度量值 --> <meter max="100" min="0" high="80" low="40" value="30"></meter> <meter max="100" min="0" high="80" low="40" value="60"></meter> <meter max="100" min="0" high="80" low="40" value="90"></meter> </body>7.表單總結 案例
<body> <form action=""><fieldset><legend>學生檔案</legend><label for="">姓名:</label><input type="text" name="userName" id="userName" placeholder="請輸入用戶名"><label for="">手機號碼:</label><input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><label for="">郵箱地址:</label><input type="email" name="email" id="email" required><label for="">所屬學院:</label><input type="text" name="collge" id="collge" list="cList" placeholder="請選擇"><datalist id="cList"><option value="211"></option><option value="985"></option><option value="清華"></option><option value="北大"></option></datalist><label for="score">入學成績:</label><input type="number" max="100" min="0" value="1" id="score"><label for="">基礎水平:</label><meter id="level" max="100" min="0"></meter><label for="">入學日期:</label><input type="date" id="inTime" name="inTime"><label for="">畢業日期:</label><input type="date" id="leaveTime" name="leaveTime"><input type="submit"></fieldset> </form> <script>document.getElementById("score").oninput=function(){document.getElementById("level").value=document.getElementById("score").value;}</script></body>?
/* *{margin: 0 auto;} */ *{padding: 0;margin: 0;}form{width: 800px;/*height: 600px;*/margin: 20px auto; } form>fieldset{padding: 10px; } form>fieldset>meter, form>fieldset>input{width: 100%;height: 40px;line-height: 30px;margin: 10px 0;border-radius: 5px;font-size: 16px;padding-left: 5px;border: none;border: 1px solid #ccc;box-sizing: border-box;/*width=內容+padding+border*/ } form>fieldset>meter{padding-left: 3px; }8.音頻audio 和 視頻video
<body><!--audio 音頻--> <!-- src: 應用地址 controls:音頻播放器的控制面板 autoplay: 自動播放 loop: 循環 --><audio src="mp3/aa.mp3" controls loop autoplay></audio><!--video 視頻--> <!-- src: 應用地址 controls:音頻播放器的控制面板 autoplay: 自動播放 loop: 循環 widht:寬 height:高 poster: 當視頻還沒完全下載,或還沒點擊播放下載時的 默認畫面.source:用于解決不同瀏覽器對不同視頻文件不支持的情況. --><video src="mp3/bb.mp4" poster="images/1.png" controls></video> <br> <video><source src="mp3/flv.flv" type="video/mp4"><source src="mp3/bb.mp4" type="video/flv">您的瀏覽器不支持該格式視頻播放 </video></body>9.dom操作
<body><ul><li class="red">11</li><li>22</li><li>33</li><li>444</li> </ul> <script src="jquery-1.12.4.js"></script> <script>$(function(){$("li:eq(0)").addClass("red");});/*query:查詢 selector:選擇器 querySelector:傳入選擇器名稱*/var java=document.querySelector("li");//這只會返回第一個livar java=document.querySelector(".red");var allLi=document.querySelectorAll("li");//返回所有的li </script></body>10.操作元素類樣式
<body> <ul><li>111</li><li class="blue">222</li><li>333</li><li>444</li> </ul> <input type="button" value="為第一個li元素 添加 樣式" id="add"> <input type="button" value="為第二個li元素 移除 樣式" id="remove"><input type="button" value="為第三個li元素 切換 樣式" id="toggle"> <input type="button" value="判斷第四個li元素是否包含某個樣式" id="contain"><script>window.onload=function(){/*add: 添加樣式*/document.querySelector("#add").onclick=function () {document.querySelector("li").classList.add("red");document.querySelector("li").classList.add("underliner");}/*remove: 刪除樣式*/document.querySelector("#remove").onclick=function () {document.querySelector(".blue").classList.remove("blue");}/*toggle: 切換樣式(有就刪除,沒有就添加)*/document.querySelector("#toggle").onclick=function () {document.querySelector("li")[2].classList.toggle("blue");}/*toggle: 是否包含樣式*/document.querySelector("#contain").onclick=function () {var bool=document.querySelector("li")[3].classList.contain("blue");}} </script></body>11.自定義屬性
<body><!--1.定義--> <!--規范 1:data- 開頭 2.data-a-b --><p data-hfw-hhg="hhg">hfw</p><!--2.取值--> <script>Window.onload=function(){var p=document.querySelector("p");var v = p.dataset["hfwHhg"];console.log(v);}</script></body>12.網絡監聽接口
<body><script> /*1.ononline : 網絡連通的時候觸發*/ window.addEventListener("ononline",function(){alert("網絡連通了"); });/*2.onofline : 網絡斷開時觸發*/ window.addEventListener("onofline",function(){alert("網絡斷開了"); });</script> </body>13.全屏接口的使用
<body> <div><img src="images/1.png" alt=""><input type="button" id="full" value="全屏"><input type="button" id="cancelFull" value="退出全屏"><input type="button" id="isFull" value="是否全屏"> </div><script>/** 全屏操作的方法和屬性* 1.requestFullScreen() : 開啟全屏顯示 ||不同的瀏覽器要加不同的前綴 chrome:webkit firefox:moz ie:ms opera:o* 2.cancelFullScreen() : 退出全屏顯示 ||不同的瀏覽器要加不同的前綴 chrome:webkit firefox:moz ie:ms opera:o* 退出全屏只能在docment 下操作.* 3.fullScreenElement : 是不是全屏狀態?** */window.onload=function(){var div=document.querySelector("div");/*添加按鈕的點擊事件*/document.querySelector("#full").onclick=function(){ //1.全屏按鈕div.webkitRequestFullScreen();// div.mozRequestFullScreen();}document.querySelector("#cancelFull").onclick=function(){ //2.退出全屏按鈕document.webkitCancelFullScreen();}document.querySelector("#isFull").onclick=function(){ //3.是否是全屏if ( document.fullScreenElement){alert(true);}else{alert(false);}}}</script></body>14.fileReader文件讀取
<body><!--<img src="images/1.png" alt="">--><!--需求案例:即時預覽--> <form action="">文件:<input type="file" name="myFile" id="myFile" onchange="getFileContent()"><br><input type="submit" value="提交"> </form> <img src="" alt="即時瀏覽的圖片"><script>/*FileReader: 讀取文件內容* 1.readerAsText() : txt文本,返回字符串 默認UTF-8* 2.readerAsBinaryString() : 讀取任意類型文件,返回二進制字符串.*此方法一般用于存儲文件內容*.* 3.readerAsDataURL() : 讀取一段文件以data開頭的字符串.本質就是將文本嵌入到文檔的方案. abort() : 中斷讀取** */function getFileContent(){// alert("123");// 1.創建文件讀取對象var reader=new FileReader();//2.讀取文件,獲取DataURL//2.1:此方法沒有返回值.//2.2:需要傳遞一個參數. var file=document.querySelector("#myFile").files;reader.readAsDataURL(file[0]);// alert(reader.result);/*onabort : 中斷時觸發* onerror : 讀取錯誤時觸發* onload : 文件讀取成功時觸發* onloadend: 文件讀取完成,不論失敗還是成功.* onloadstart : 讀取文件開始時觸發* onprogress : 讀取文件過程中觸發.** */reader.onload=function(){alert(reader.result);document.querySelector("img").src=reader.result;}} </script> </body>15.拖拽接口(上)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;border: 1px solid #ccc;float: left;margin-right: 15px;}</style> </head> <body><div id="div1" class="div1"><p id="pe" draggable="true">試試把我拖拽過去</p> </div><div id="div2" class="div2"></div><script>//1.在H5中給對象元素添加draggable="true".才可實現拖拽.圖片和超鏈接時默認可以拖拽的//2.拖拽事件//2.1應用于被拖拽元素的事件/* ondrag : 拖拽過程中調用ondragstart : 拖拽開始調用.ondragleave : 鼠標離開拖拽元素時調用ondragend : 拖拽結束調用*///2.2應用于目標元素的事件 /*ondragenter : 拖拽進入時調用ondragover : 拖拽到目標元素時調用ondrop : 拖拽到目標元素,鼠標松開時調用ondragleave : 拖拽到目標元素,鼠標離開時調用*/var p=document.querySelector("#pe");p.ondragstart=function(){console.log("ondragstart 開始");}p.ondragend=function(){console.log("ondragend 結束");}p.ondragleave=function(){console.log("ondragleave 離開");}p.ondrag=function(){console.log("ondrag 一致調用");}</script></body> </html>16.拖拽 通用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;border: 1px solid #000;float: left;margin-right: 15px;}p{background-color: green;}</style> </head> <body><div id="div1" class="div1"><p id="pe" draggable="true">試試把我拖拽過去1</p><p id="pe1" draggable="true">試試把我拖拽過去2</p> </div><div id="div2" class="div2"></div><script>//1.在H5中給對象元素添加draggable="true".才可實現拖拽.圖片和超鏈接時默認可以拖拽的//2.拖拽事件//2.1應用于被拖拽元素的事件/* ondrag : 拖拽過程中調用ondragstart : 拖拽開始調用.ondragleave : 鼠標離開拖拽元素時調用ondragend : 拖拽結束調用*/var p=document.querySelector("#pe"); var obj=null;//*全局變量容易受到 污染，且占瀏覽器內存*document.ondragstart=function(e){console.log("ondragstart 開始"+e.target);e.target.style.opacity=0.5;e.target.parentNode.style.borderWidth="5px";obj=e.target;//*通過datatransfer來實現數據的存儲與獲取********//setData(format,data)//format:數據類型： text/html text/uri-list//data : 數據：一般指字符串值。e.dataTransfer.setData("text/html",e.target.id); }document.ondragend=function(e){console.log("ondragend 結束"+e.target);}document.ondragleave=function(e){console.log("ondragleave 離開"+e.target);}document.ondrag=function(e){console.log("ondrag 一致調用"+e.target);}//2.2應用于目標元素的事件 /*ondragenter : 拖拽進入時調用ondragover : 拖拽到目標元素時調用ondrop : 拖拽到目標元素,鼠標松開時調用ondragleave : 拖拽到目標元素,鼠標離開時調用 */ document.ondragenter=function(e){console.log("ondragenter "+e.target);e.preventDefault();}document.ondragover=function(e){console.log("ondragover "+e.target);e.preventDefault();}document.ondrop=function(e){console.log("ondrop : 拖拽到目標元素,鼠標松開時調用 "+e.target);alert("鼠標松開時"); //添加元素// e.target.appendChild(obj); var did= e.dataTransfer.getData("text/html"); alert(did); e.target.appendChild(document.getElementById(did));//此處有問題？}document.ondragleave=function(e){console.log("ondragleave "+e.target);}/*ondrop 事件不觸發 需要在ondragenter ondragover 中添加 e.preventDefault();用于阻止默認行為；*/</script></body> </html>17.地理定位(一般調用第三方接口:百度地圖/谷歌/QQ等)
18web存儲:storageSession / localSession
<body> sessionStorage的使用:存儲數據到本地,容量大小5M左右<br> setItem(key,value): 設置數據<br> getItem(key) : 獲取數據<br> removeItem(key): 刪除數據<br> clear():清空數據<br><br> <input type="text" id="userName"> <input type="button" id="setData" value="設置數據"> <input type="button" id="getData" value="獲取數據"> <input type="button" id="removeData" value="刪除數據"><script> /*存儲數據*/ /*1.數據僅存儲在當前頁面中,不存儲在瀏覽器中.2.生命周期:關閉當前頁面即消亡. */ document.querySelector("#setData").onclick=function () {var name= document.querySelector("#userName").value;window.sessionStorage.setItem("userName",name); } /*獲取值*/ document.querySelector("#getData").onclick=function () {var userName= window.sessionStorage.getItem("userName");alert(userName); } //刪除數據 document.querySelector("#removeData").onclick=function () {window.sessionStorage.removeItem("userName"); }</script></body>---------------------<body> localStorage的使用:存儲數據到*硬盤*上,容量大小20M左右<br> setItem(key,value): 設置數據<br> getItem(key) : 獲取數據<br> removeItem(key): 刪除數據<br> clear():清空數據<br><br> <input type="text" id="userName"> <input type="button" id="setData" value="設置數據"> <input type="button" id="getData" value="獲取數據"> <input type="button" id="removeData" value="刪除數據"><script>/*存儲數據*/document.querySelector("#setData").onclick=function () {var name= document.querySelector("#userName").value;window.localStorage.setItem("userName",name);}/*獲取值*/document.querySelector("#getData").onclick=function () {var userName= window.localStorage.getItem("userName");alert(userName);}//刪除數據document.querySelector("#removeData").onclick=function () {window.localStorage.removeItem("userName");}</script></body>19.應用緩存
<!DOCTYPE html> <!-- manifest: 應用程序緩存清單文件的路徑 建議文件的擴展名是appcache,本質就是個文本文件 --> <html lang="en" manifest="manifest.appcache"> <head><meta charset="UTF-8"><title>Title</title><style>img{width: 300px;display: block;}</style> </head> <body><img src="images/l1.jpg" alt=""> <img src="images/l2.jpg" alt=""> <img src="images/l3.jpg" alt=""> <img src="images/l4.jpg" alt=""></body> </html>-----------以下是manifest.appcache文件內容---------------------CACHE MANIFEST #上面代碼必須是當前文檔的第一句 #后面寫注釋#需要緩存的文件清單列表 CACHE: #下面需要緩存的清單列表 images/l1.jpg images/l2.jpg # * :代表所有文件#每一次都需要從服務器獲取的文件清單列表 NETWORK: images/l3.jpg#配置文件如果無法獲取則使用指定的文件進行替代 FALLBACK: images/l4.jpg images/1.png # /:代表所有文件20.自定義播放器
所有屬性及方法:?http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定義播放器</title><script src="js/jquery-1.12.4.js"></script><link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/css.css"> </head> <body><h3 class="playerTitle">視頻播放器</h3><div class="player"> <!-- --><video src="mp3/bb.mp4" ></video><!--視頻文件 --><div class="controls"><a href="javascript:;" class="switch fa fa-play"></a><!--switch:播放和暫停的切換按鈕 --><a href="javascript:;" class="expand fa fa-expand"></a><!-- 最大化 按鈕 --><div class="progress"> <!-- 進度條 --><div class="bar"></div> <!-- 響應事件的(點擊后:快進 后退) --><div class="loaded"></div><!-- 加載的 --><div class="elapse"></div><!-- 播放的 --></div><div class="time"><span class="currentTime">00:00:00</span><!-- 播放的視頻當前時長 -->\<span class="totalTime">00:00:00</span><!-- 視頻總時長 --></div></div> </div><script>/*通過jq來實現功能*/$(function(){/*1.獲取播放器*/var video=$("video")[0];/*2.實現播放與暫停*/$(".switch").click(function(){/*實現播放與暫停的切換：如果是暫停>>播放 ，如果是播放 >> 暫停*/if(video.paused){video.play();/*移除暫停樣式，添加播放樣式*/}else{video.pause();/*移除播放樣式，添加暫停樣式*/}/*設置標簽的樣式 fa-pause:暫停 fa-play：播放*/$(this).toggleClass("fa-play fa-pause");});/*3.實現全屏操作*/$(".expand").click(function(){/*全屏>>不同瀏覽器需要添加不同的前綴>>能力測試*/if(video.requestFullScreen){video.requestFullScreen();}else if(video.webkitRequestFullScreen){video.webkitRequestFullScreen();}else if(video.mozRequestFullScreen){video.mozRequestFullScreen();}else if(video.msRequestFullScreen){video.msRequestFullScreen();}});/*4.實現播放業務邏輯：當視頻文件可以播放時觸發下面的事件*/video.oncanplay=function(){setTimeout(function(){/*1.將視頻文件設置為顯示*/video.style.display="block";/*2.獲取當前視頻文件的總時長(以秒做為單位，同時獲取了小數值)，計算出時分秒*/var total=video.duration; //01:01:40 00:00:36/*3.計算時分少 60*60=3600* 3700:3700/3600* 3700:3700%3600 >> 100 /60*//*var hour=Math.floor(total/3600);/!*補0操作*!/hour=hour<10?"0"+hour:hour;var minute=Math.floor(total%3600/60);minute=minute<10?"0"+minute:minute;var second=Math.floor(total%60);second=second<10?"0"+second:second;*/var result=getResult(total)/*4.將計算結果展示在指定的dom元素中*/$(".totalTime").html(result);},2000);}/*通過總時長計算出時分秒*/function getResult(time){var hour=Math.floor(time/3600);/*補0操作*/hour=hour<10?"0"+hour:hour;var minute=Math.floor(time%3600/60);minute=minute<10?"0"+minute:minute;var second=Math.floor(time%60);second=second<10?"0"+second:second;/*返回結果*/return hour+":"+minute+":"+second;}/*5.實現播放過程中的業務邏輯，當視頻播放時會觸發ontimeupdate事件* 如果修改currentTime值也會觸發這個事件，說白了，只要currenTime值變化，就會觸發這個事件*/video.ontimeupdate=function(){/*1.獲取當前的播放時間*/var current=video.currentTime;/*2.計算出時分秒*/var result=getResult(current);/*3.將結果展示在指定的dom元素中*/$(".currentTime").html(result);/*4.設置當前播放進度條樣式 0.12>>0.12*100=12+%>12%*/var percent=current/video.duration*100+"%";$(".elapse").css("width",percent);}/*6.實現視頻的跳播*/$(".bar").click(function(e){/*1.獲取當前鼠標相對于父元素的left值--偏移值*/var offset= e.offsetX;/*2.計算偏移值相對總父元素總寬度的比例*/var percent=offset/$(this).width();/*3.計算這個位置對應的視頻進度值*/var current=percent*video.duration;/*4.設置當前視頻的currentTime*/video.currentTime=current;});/*7.播放完畢之后，重置播放器的狀態*/video.onended=function(){video.currentTime=0;$(".switch").removeClass("fa-pause").addClass("fa-play");}}); </script></body> </html>?font-awesome.css
/*!* Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)*/ /* FONT PATH* -------------------------- */ @font-face {font-family: 'FontAwesome';src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight: normal;font-style: normal; } .fa {display: inline-block;font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .fa-lg {font-size: 1.33333333em;line-height: 0.75em;vertical-align: -15%; } .fa-2x {font-size: 2em; } .fa-3x {font-size: 3em; } .fa-4x {font-size: 4em; } .fa-5x {font-size: 5em; } .fa-fw {width: 1.28571429em;text-align: center; } .fa-ul {padding-left: 0;margin-left: 2.14285714em;list-style-type: none; } .fa-ul > li {position: relative; } .fa-li {position: absolute;left: -2.14285714em;width: 2.14285714em;top: 0.14285714em;text-align: center; } .fa-li.fa-lg {left: -1.85714286em; } .fa-border {padding: .2em .25em .15em;border: solid 0.08em #eeeeee;border-radius: .1em; } .fa-pull-left {float: left; } .fa-pull-right {float: right; } .fa.fa-pull-left {margin-right: .3em; } .fa.fa-pull-right {margin-left: .3em; } /* Deprecated as of 4.4.0 */ .pull-right {float: right; } .pull-left {float: left; } .fa.pull-left {margin-right: .3em; } .fa.pull-right {margin-left: .3em; } .fa-spin {-webkit-animation: fa-spin 2s infinite linear;animation: fa-spin 2s infinite linear; } .fa-pulse {-webkit-animation: fa-spin 1s infinite steps(8);animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);} } @keyframes fa-spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);} } .fa-rotate-90 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg); } .fa-rotate-180 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg); } .fa-rotate-270 {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);transform: rotate(270deg); } .fa-flip-horizontal {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform: scale(-1, 1);-ms-transform: scale(-1, 1);transform: scale(-1, 1); } .fa-flip-vertical {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform: scale(1, -1);-ms-transform: scale(1, -1);transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical {filter: none; } .fa-stack {position: relative;display: inline-block;width: 2em;height: 2em;line-height: 2em;vertical-align: middle; } .fa-stack-1x, .fa-stack-2x {position: absolute;left: 0;width: 100%;text-align: center; } .fa-stack-1x {line-height: inherit; } .fa-stack-2x {font-size: 2em; } .fa-inverse {color: #ffffff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screenreaders do not read off random characters that represent icons */ .fa-glass:before {content: "\f000"; } .fa-music:before {content: "\f001"; } .fa-search:before {content: "\f002"; } .fa-envelope-o:before {content: "\f003"; } .fa-heart:before {content: "\f004"; } .fa-star:before {content: "\f005"; } .fa-star-o:before {content: "\f006"; } .fa-user:before {content: "\f007"; } .fa-film:before {content: "\f008"; } .fa-th-large:before {content: "\f009"; } .fa-th:before {content: "\f00a"; } .fa-th-list:before {content: "\f00b"; } .fa-check:before {content: "\f00c"; } .fa-remove:before, .fa-close:before, .fa-times:before {content: "\f00d"; } .fa-search-plus:before {content: "\f00e"; } .fa-search-minus:before {content: "\f010"; } .fa-power-off:before {content: "\f011"; } .fa-signal:before {content: "\f012"; } .fa-gear:before, .fa-cog:before {content: "\f013"; } .fa-trash-o:before {content: "\f014"; } .fa-home:before {content: "\f015"; } .fa-file-o:before {content: "\f016"; } .fa-clock-o:before {content: "\f017"; } .fa-road:before {content: "\f018"; } .fa-download:before {content: "\f019"; } .fa-arrow-circle-o-down:before {content: "\f01a"; } .fa-arrow-circle-o-up:before {content: "\f01b"; } .fa-inbox:before {content: "\f01c"; } .fa-play-circle-o:before {content: "\f01d"; } .fa-rotate-right:before, .fa-repeat:before {content: "\f01e"; } .fa-refresh:before {content: "\f021"; } .fa-list-alt:before {content: "\f022"; } .fa-lock:before {content: "\f023"; } .fa-flag:before {content: "\f024"; } .fa-headphones:before {content: "\f025"; } .fa-volume-off:before {content: "\f026"; } .fa-volume-down:before {content: "\f027"; } .fa-volume-up:before {content: "\f028"; } .fa-qrcode:before {content: "\f029"; } .fa-barcode:before {content: "\f02a"; } .fa-tag:before {content: "\f02b"; } .fa-tags:before {content: "\f02c"; } .fa-book:before {content: "\f02d"; } .fa-bookmark:before {content: "\f02e"; } .fa-print:before {content: "\f02f"; } .fa-camera:before {content: "\f030"; } .fa-font:before {content: "\f031"; } .fa-bold:before {content: "\f032"; } .fa-italic:before {content: "\f033"; } .fa-text-height:before {content: "\f034"; } .fa-text-width:before {content: "\f035"; } .fa-align-left:before {content: "\f036"; } .fa-align-center:before {content: "\f037"; } .fa-align-right:before {content: "\f038"; } .fa-align-justify:before {content: "\f039"; } .fa-list:before {content: "\f03a"; } .fa-dedent:before, .fa-outdent:before {content: "\f03b"; } .fa-indent:before {content: "\f03c"; } .fa-video-camera:before {content: "\f03d"; } .fa-photo:before, .fa-image:before, .fa-picture-o:before {content: "\f03e"; } .fa-pencil:before {content: "\f040"; } .fa-map-marker:before {content: "\f041"; } .fa-adjust:before {content: "\f042"; } .fa-tint:before {content: "\f043"; } .fa-edit:before, .fa-pencil-square-o:before {content: "\f044"; } .fa-share-square-o:before {content: "\f045"; } .fa-check-square-o:before {content: "\f046"; } .fa-arrows:before {content: "\f047"; } .fa-step-backward:before {content: "\f048"; } .fa-fast-backward:before {content: "\f049"; } .fa-backward:before {content: "\f04a"; } .fa-play:before {content: "\f04b"; } .fa-pause:before {content: "\f04c"; } .fa-stop:before {content: "\f04d"; } .fa-forward:before {content: "\f04e"; } .fa-fast-forward:before {content: "\f050"; } .fa-step-forward:before {content: "\f051"; } .fa-eject:before {content: "\f052"; } .fa-chevron-left:before {content: "\f053"; } .fa-chevron-right:before {content: "\f054"; } .fa-plus-circle:before {content: "\f055"; } .fa-minus-circle:before {content: "\f056"; } .fa-times-circle:before {content: "\f057"; } .fa-check-circle:before {content: "\f058"; } .fa-question-circle:before {content: "\f059"; } .fa-info-circle:before {content: "\f05a"; } .fa-crosshairs:before {content: "\f05b"; } .fa-times-circle-o:before {content: "\f05c"; } .fa-check-circle-o:before {content: "\f05d"; } .fa-ban:before {content: "\f05e"; } .fa-arrow-left:before {content: "\f060"; } .fa-arrow-right:before {content: "\f061"; } .fa-arrow-up:before {content: "\f062"; } .fa-arrow-down:before {content: "\f063"; } .fa-mail-forward:before, .fa-share:before {content: "\f064"; } .fa-expand:before {content: "\f065"; } .fa-compress:before {content: "\f066"; } .fa-plus:before {content: "\f067"; } .fa-minus:before {content: "\f068"; } .fa-asterisk:before {content: "\f069"; } .fa-exclamation-circle:before {content: "\f06a"; } .fa-gift:before {content: "\f06b"; } .fa-leaf:before {content: "\f06c"; } .fa-fire:before {content: "\f06d"; } .fa-eye:before {content: "\f06e"; } .fa-eye-slash:before {content: "\f070"; } .fa-warning:before, .fa-exclamation-triangle:before {content: "\f071"; } .fa-plane:before {content: "\f072"; } .fa-calendar:before {content: "\f073"; } .fa-random:before {content: "\f074"; } .fa-comment:before {content: "\f075"; } .fa-magnet:before {content: "\f076"; } .fa-chevron-up:before {content: "\f077"; } .fa-chevron-down:before {content: "\f078"; } .fa-retweet:before {content: "\f079"; } .fa-shopping-cart:before {content: "\f07a"; } .fa-folder:before {content: "\f07b"; } .fa-folder-open:before {content: "\f07c"; } .fa-arrows-v:before {content: "\f07d"; } .fa-arrows-h:before {content: "\f07e"; } .fa-bar-chart-o:before, .fa-bar-chart:before {content: "\f080"; } .fa-twitter-square:before {content: "\f081"; } .fa-facebook-square:before {content: "\f082"; } .fa-camera-retro:before {content: "\f083"; } .fa-key:before {content: "\f084"; } .fa-gears:before, .fa-cogs:before {content: "\f085"; } .fa-comments:before {content: "\f086"; } .fa-thumbs-o-up:before {content: "\f087"; } .fa-thumbs-o-down:before {content: "\f088"; } .fa-star-half:before {content: "\f089"; } .fa-heart-o:before {content: "\f08a"; } .fa-sign-out:before {content: "\f08b"; } .fa-linkedin-square:before {content: "\f08c"; } .fa-thumb-tack:before {content: "\f08d"; } .fa-external-link:before {content: "\f08e"; } .fa-sign-in:before {content: "\f090"; } .fa-trophy:before {content: "\f091"; } .fa-github-square:before {content: "\f092"; } .fa-upload:before {content: "\f093"; } .fa-lemon-o:before {content: "\f094"; } .fa-phone:before {content: "\f095"; } .fa-square-o:before {content: "\f096"; } .fa-bookmark-o:before {content: "\f097"; } .fa-phone-square:before {content: "\f098"; } .fa-twitter:before {content: "\f099"; } .fa-facebook-f:before, .fa-facebook:before {content: "\f09a"; } .fa-github:before {content: "\f09b"; } .fa-unlock:before {content: "\f09c"; } .fa-credit-card:before {content: "\f09d"; } .fa-feed:before, .fa-rss:before {content: "\f09e"; } .fa-hdd-o:before {content: "\f0a0"; } .fa-bullhorn:before {content: "\f0a1"; } .fa-bell:before {content: "\f0f3"; } .fa-certificate:before {content: "\f0a3"; } .fa-hand-o-right:before {content: "\f0a4"; } .fa-hand-o-left:before {content: "\f0a5"; } .fa-hand-o-up:before {content: "\f0a6"; } .fa-hand-o-down:before {content: "\f0a7"; } .fa-arrow-circle-left:before {content: "\f0a8"; } .fa-arrow-circle-right:before {content: "\f0a9"; } .fa-arrow-circle-up:before {content: "\f0aa"; } .fa-arrow-circle-down:before {content: "\f0ab"; } .fa-globe:before {content: "\f0ac"; } .fa-wrench:before {content: "\f0ad"; } .fa-tasks:before {content: "\f0ae"; } .fa-filter:before {content: "\f0b0"; } .fa-briefcase:before {content: "\f0b1"; } .fa-arrows-alt:before {content: "\f0b2"; } .fa-group:before, .fa-users:before {content: "\f0c0"; } .fa-chain:before, .fa-link:before {content: "\f0c1"; } .fa-cloud:before {content: "\f0c2"; } .fa-flask:before {content: "\f0c3"; } .fa-cut:before, .fa-scissors:before {content: "\f0c4"; } .fa-copy:before, .fa-files-o:before {content: "\f0c5"; } .fa-paperclip:before {content: "\f0c6"; } .fa-save:before, .fa-floppy-o:before {content: "\f0c7"; } .fa-square:before {content: "\f0c8"; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before {content: "\f0c9"; } .fa-list-ul:before {content: "\f0ca"; } .fa-list-ol:before {content: "\f0cb"; } .fa-strikethrough:before {content: "\f0cc"; } .fa-underline:before {content: "\f0cd"; } .fa-table:before {content: "\f0ce"; } .fa-magic:before {content: "\f0d0"; } .fa-truck:before {content: "\f0d1"; } .fa-pinterest:before {content: "\f0d2"; } .fa-pinterest-square:before {content: "\f0d3"; } .fa-google-plus-square:before {content: "\f0d4"; } .fa-google-plus:before {content: "\f0d5"; } .fa-money:before {content: "\f0d6"; } .fa-caret-down:before {content: "\f0d7"; } .fa-caret-up:before {content: "\f0d8"; } .fa-caret-left:before {content: "\f0d9"; } .fa-caret-right:before {content: "\f0da"; } .fa-columns:before {content: "\f0db"; } .fa-unsorted:before, .fa-sort:before {content: "\f0dc"; } .fa-sort-down:before, .fa-sort-desc:before {content: "\f0dd"; } .fa-sort-up:before, .fa-sort-asc:before {content: "\f0de"; } .fa-envelope:before {content: "\f0e0"; } .fa-linkedin:before {content: "\f0e1"; } .fa-rotate-left:before, .fa-undo:before {content: "\f0e2"; } .fa-legal:before, .fa-gavel:before {content: "\f0e3"; } .fa-dashboard:before, .fa-tachometer:before {content: "\f0e4"; } .fa-comment-o:before {content: "\f0e5"; } .fa-comments-o:before {content: "\f0e6"; } .fa-flash:before, .fa-bolt:before {content: "\f0e7"; } .fa-sitemap:before {content: "\f0e8"; } .fa-umbrella:before {content: "\f0e9"; } .fa-paste:before, .fa-clipboard:before {content: "\f0ea"; } .fa-lightbulb-o:before {content: "\f0eb"; } .fa-exchange:before {content: "\f0ec"; } .fa-cloud-download:before {content: "\f0ed"; } .fa-cloud-upload:before {content: "\f0ee"; } .fa-user-md:before {content: "\f0f0"; } .fa-stethoscope:before {content: "\f0f1"; } .fa-suitcase:before {content: "\f0f2"; } .fa-bell-o:before {content: "\f0a2"; } .fa-coffee:before {content: "\f0f4"; } .fa-cutlery:before {content: "\f0f5"; } .fa-file-text-o:before {content: "\f0f6"; } .fa-building-o:before {content: "\f0f7"; } .fa-hospital-o:before {content: "\f0f8"; } .fa-ambulance:before {content: "\f0f9"; } .fa-medkit:before {content: "\f0fa"; } .fa-fighter-jet:before {content: "\f0fb"; } .fa-beer:before {content: "\f0fc"; } .fa-h-square:before {content: "\f0fd"; } .fa-plus-square:before {content: "\f0fe"; } .fa-angle-double-left:before {content: "\f100"; } .fa-angle-double-right:before {content: "\f101"; } .fa-angle-double-up:before {content: "\f102"; } .fa-angle-double-down:before {content: "\f103"; } .fa-angle-left:before {content: "\f104"; } .fa-angle-right:before {content: "\f105"; } .fa-angle-up:before {content: "\f106"; } .fa-angle-down:before {content: "\f107"; } .fa-desktop:before {content: "\f108"; } .fa-laptop:before {content: "\f109"; } .fa-tablet:before {content: "\f10a"; } .fa-mobile-phone:before, .fa-mobile:before {content: "\f10b"; } .fa-circle-o:before {content: "\f10c"; } .fa-quote-left:before {content: "\f10d"; } .fa-quote-right:before {content: "\f10e"; } .fa-spinner:before {content: "\f110"; } .fa-circle:before {content: "\f111"; } .fa-mail-reply:before, .fa-reply:before {content: "\f112"; } .fa-github-alt:before {content: "\f113"; } .fa-folder-o:before {content: "\f114"; } .fa-folder-open-o:before {content: "\f115"; } .fa-smile-o:before {content: "\f118"; } .fa-frown-o:before {content: "\f119"; } .fa-meh-o:before {content: "\f11a"; } .fa-gamepad:before {content: "\f11b"; } .fa-keyboard-o:before {content: "\f11c"; } .fa-flag-o:before {content: "\f11d"; } .fa-flag-checkered:before {content: "\f11e"; } .fa-terminal:before {content: "\f120"; } .fa-code:before {content: "\f121"; } .fa-mail-reply-all:before, .fa-reply-all:before {content: "\f122"; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before {content: "\f123"; } .fa-location-arrow:before {content: "\f124"; } .fa-crop:before {content: "\f125"; } .fa-code-fork:before {content: "\f126"; } .fa-unlink:before, .fa-chain-broken:before {content: "\f127"; } .fa-question:before {content: "\f128"; } .fa-info:before {content: "\f129"; } .fa-exclamation:before {content: "\f12a"; } .fa-superscript:before {content: "\f12b"; } .fa-subscript:before {content: "\f12c"; } .fa-eraser:before {content: "\f12d"; } .fa-puzzle-piece:before {content: "\f12e"; } .fa-microphone:before {content: "\f130"; } .fa-microphone-slash:before {content: "\f131"; } .fa-shield:before {content: "\f132"; } .fa-calendar-o:before {content: "\f133"; } .fa-fire-extinguisher:before {content: "\f134"; } .fa-rocket:before {content: "\f135"; } .fa-maxcdn:before {content: "\f136"; } .fa-chevron-circle-left:before {content: "\f137"; } .fa-chevron-circle-right:before {content: "\f138"; } .fa-chevron-circle-up:before {content: "\f139"; } .fa-chevron-circle-down:before {content: "\f13a"; } .fa-html5:before {content: "\f13b"; } .fa-css3:before {content: "\f13c"; } .fa-anchor:before {content: "\f13d"; } .fa-unlock-alt:before {content: "\f13e"; } .fa-bullseye:before {content: "\f140"; } .fa-ellipsis-h:before {content: "\f141"; } .fa-ellipsis-v:before {content: "\f142"; } .fa-rss-square:before {content: "\f143"; } .fa-play-circle:before {content: "\f144"; } .fa-ticket:before {content: "\f145"; } .fa-minus-square:before {content: "\f146"; } .fa-minus-square-o:before {content: "\f147"; } .fa-level-up:before {content: "\f148"; } .fa-level-down:before {content: "\f149"; } .fa-check-square:before {content: "\f14a"; } .fa-pencil-square:before {content: "\f14b"; } .fa-external-link-square:before {content: "\f14c"; } .fa-share-square:before {content: "\f14d"; } .fa-compass:before {content: "\f14e"; } .fa-toggle-down:before, .fa-caret-square-o-down:before {content: "\f150"; } .fa-toggle-up:before, .fa-caret-square-o-up:before {content: "\f151"; } .fa-toggle-right:before, .fa-caret-square-o-right:before {content: "\f152"; } .fa-euro:before, .fa-eur:before {content: "\f153"; } .fa-gbp:before {content: "\f154"; } .fa-dollar:before, .fa-usd:before {content: "\f155"; } .fa-rupee:before, .fa-inr:before {content: "\f156"; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before {content: "\f157"; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before {content: "\f158"; } .fa-won:before, .fa-krw:before {content: "\f159"; } .fa-bitcoin:before, .fa-btc:before {content: "\f15a"; } .fa-file:before {content: "\f15b"; } .fa-file-text:before {content: "\f15c"; } .fa-sort-alpha-asc:before {content: "\f15d"; } .fa-sort-alpha-desc:before {content: "\f15e"; } .fa-sort-amount-asc:before {content: "\f160"; } .fa-sort-amount-desc:before {content: "\f161"; } .fa-sort-numeric-asc:before {content: "\f162"; } .fa-sort-numeric-desc:before {content: "\f163"; } .fa-thumbs-up:before {content: "\f164"; } .fa-thumbs-down:before {content: "\f165"; } .fa-youtube-square:before {content: "\f166"; } .fa-youtube:before {content: "\f167"; } .fa-xing:before {content: "\f168"; } .fa-xing-square:before {content: "\f169"; } .fa-youtube-play:before {content: "\f16a"; } .fa-dropbox:before {content: "\f16b"; } .fa-stack-overflow:before {content: "\f16c"; } .fa-instagram:before {content: "\f16d"; } .fa-flickr:before {content: "\f16e"; } .fa-adn:before {content: "\f170"; } .fa-bitbucket:before {content: "\f171"; } .fa-bitbucket-square:before {content: "\f172"; } .fa-tumblr:before {content: "\f173"; } .fa-tumblr-square:before {content: "\f174"; } .fa-long-arrow-down:before {content: "\f175"; } .fa-long-arrow-up:before {content: "\f176"; } .fa-long-arrow-left:before {content: "\f177"; } .fa-long-arrow-right:before {content: "\f178"; } .fa-apple:before {content: "\f179"; } .fa-windows:before {content: "\f17a"; } .fa-android:before {content: "\f17b"; } .fa-linux:before {content: "\f17c"; } .fa-dribbble:before {content: "\f17d"; } .fa-skype:before {content: "\f17e"; } .fa-foursquare:before {content: "\f180"; } .fa-trello:before {content: "\f181"; } .fa-female:before {content: "\f182"; } .fa-male:before {content: "\f183"; } .fa-gittip:before, .fa-gratipay:before {content: "\f184"; } .fa-sun-o:before {content: "\f185"; } .fa-moon-o:before {content: "\f186"; } .fa-archive:before {content: "\f187"; } .fa-bug:before {content: "\f188"; } .fa-vk:before {content: "\f189"; } .fa-weibo:before {content: "\f18a"; } .fa-renren:before {content: "\f18b"; } .fa-pagelines:before {content: "\f18c"; } .fa-stack-exchange:before {content: "\f18d"; } .fa-arrow-circle-o-right:before {content: "\f18e"; } .fa-arrow-circle-o-left:before {content: "\f190"; } .fa-toggle-left:before, .fa-caret-square-o-left:before {content: "\f191"; } .fa-dot-circle-o:before {content: "\f192"; } .fa-wheelchair:before {content: "\f193"; } .fa-vimeo-square:before {content: "\f194"; } .fa-turkish-lira:before, .fa-try:before {content: "\f195"; } .fa-plus-square-o:before {content: "\f196"; } .fa-space-shuttle:before {content: "\f197"; } .fa-slack:before {content: "\f198"; } .fa-envelope-square:before {content: "\f199"; } .fa-wordpress:before {content: "\f19a"; } .fa-openid:before {content: "\f19b"; } .fa-institution:before, .fa-bank:before, .fa-university:before {content: "\f19c"; } .fa-mortar-board:before, .fa-graduation-cap:before {content: "\f19d"; } .fa-yahoo:before {content: "\f19e"; } .fa-google:before {content: "\f1a0"; } .fa-reddit:before {content: "\f1a1"; } .fa-reddit-square:before {content: "\f1a2"; } .fa-stumbleupon-circle:before {content: "\f1a3"; } .fa-stumbleupon:before {content: "\f1a4"; } .fa-delicious:before {content: "\f1a5"; } .fa-digg:before {content: "\f1a6"; } .fa-pied-piper:before {content: "\f1a7"; } .fa-pied-piper-alt:before {content: "\f1a8"; } .fa-drupal:before {content: "\f1a9"; } .fa-joomla:before {content: "\f1aa"; } .fa-language:before {content: "\f1ab"; } .fa-fax:before {content: "\f1ac"; } .fa-building:before {content: "\f1ad"; } .fa-child:before {content: "\f1ae"; } .fa-paw:before {content: "\f1b0"; } .fa-spoon:before {content: "\f1b1"; } .fa-cube:before {content: "\f1b2"; } .fa-cubes:before {content: "\f1b3"; } .fa-behance:before {content: "\f1b4"; } .fa-behance-square:before {content: "\f1b5"; } .fa-steam:before {content: "\f1b6"; } .fa-steam-square:before {content: "\f1b7"; } .fa-recycle:before {content: "\f1b8"; } .fa-automobile:before, .fa-car:before {content: "\f1b9"; } .fa-cab:before, .fa-taxi:before {content: "\f1ba"; } .fa-tree:before {content: "\f1bb"; } .fa-spotify:before {content: "\f1bc"; } .fa-deviantart:before {content: "\f1bd"; } .fa-soundcloud:before {content: "\f1be"; } .fa-database:before {content: "\f1c0"; } .fa-file-pdf-o:before {content: "\f1c1"; } .fa-file-word-o:before {content: "\f1c2"; } .fa-file-excel-o:before {content: "\f1c3"; } .fa-file-powerpoint-o:before {content: "\f1c4"; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before {content: "\f1c5"; } .fa-file-zip-o:before, .fa-file-archive-o:before {content: "\f1c6"; } .fa-file-sound-o:before, .fa-file-audio-o:before {content: "\f1c7"; } .fa-file-movie-o:before, .fa-file-video-o:before {content: "\f1c8"; } .fa-file-code-o:before {content: "\f1c9"; } .fa-vine:before {content: "\f1ca"; } .fa-codepen:before {content: "\f1cb"; } .fa-jsfiddle:before {content: "\f1cc"; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before {content: "\f1cd"; } .fa-circle-o-notch:before {content: "\f1ce"; } .fa-ra:before, .fa-rebel:before {content: "\f1d0"; } .fa-ge:before, .fa-empire:before {content: "\f1d1"; } .fa-git-square:before {content: "\f1d2"; } .fa-git:before {content: "\f1d3"; } .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before {content: "\f1d4"; } .fa-tencent-weibo:before {content: "\f1d5"; } .fa-qq:before {content: "\f1d6"; } .fa-wechat:before, .fa-weixin:before {content: "\f1d7"; } .fa-send:before, .fa-paper-plane:before {content: "\f1d8"; } .fa-send-o:before, .fa-paper-plane-o:before {content: "\f1d9"; } .fa-history:before {content: "\f1da"; } .fa-circle-thin:before {content: "\f1db"; } .fa-header:before {content: "\f1dc"; } .fa-paragraph:before {content: "\f1dd"; } .fa-sliders:before {content: "\f1de"; } .fa-share-alt:before {content: "\f1e0"; } .fa-share-alt-square:before {content: "\f1e1"; } .fa-bomb:before {content: "\f1e2"; } .fa-soccer-ball-o:before, .fa-futbol-o:before {content: "\f1e3"; } .fa-tty:before {content: "\f1e4"; } .fa-binoculars:before {content: "\f1e5"; } .fa-plug:before {content: "\f1e6"; } .fa-slideshare:before {content: "\f1e7"; } .fa-twitch:before {content: "\f1e8"; } .fa-yelp:before {content: "\f1e9"; } .fa-newspaper-o:before {content: "\f1ea"; } .fa-wifi:before {content: "\f1eb"; } .fa-calculator:before {content: "\f1ec"; } .fa-paypal:before {content: "\f1ed"; } .fa-google-wallet:before {content: "\f1ee"; } .fa-cc-visa:before {content: "\f1f0"; } .fa-cc-mastercard:before {content: "\f1f1"; } .fa-cc-discover:before {content: "\f1f2"; } .fa-cc-amex:before {content: "\f1f3"; } .fa-cc-paypal:before {content: "\f1f4"; } .fa-cc-stripe:before {content: "\f1f5"; } .fa-bell-slash:before {content: "\f1f6"; } .fa-bell-slash-o:before {content: "\f1f7"; } .fa-trash:before {content: "\f1f8"; } .fa-copyright:before {content: "\f1f9"; } .fa-at:before {content: "\f1fa"; } .fa-eyedropper:before {content: "\f1fb"; } .fa-paint-brush:before {content: "\f1fc"; } .fa-birthday-cake:before {content: "\f1fd"; } .fa-area-chart:before {content: "\f1fe"; } .fa-pie-chart:before {content: "\f200"; } .fa-line-chart:before {content: "\f201"; } .fa-lastfm:before {content: "\f202"; } .fa-lastfm-square:before {content: "\f203"; } .fa-toggle-off:before {content: "\f204"; } .fa-toggle-on:before {content: "\f205"; } .fa-bicycle:before {content: "\f206"; } .fa-bus:before {content: "\f207"; } .fa-ioxhost:before {content: "\f208"; } .fa-angellist:before {content: "\f209"; } .fa-cc:before {content: "\f20a"; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before {content: "\f20b"; } .fa-meanpath:before {content: "\f20c"; } .fa-buysellads:before {content: "\f20d"; } .fa-connectdevelop:before {content: "\f20e"; } .fa-dashcube:before {content: "\f210"; } .fa-forumbee:before {content: "\f211"; } .fa-leanpub:before {content: "\f212"; } .fa-sellsy:before {content: "\f213"; } .fa-shirtsinbulk:before {content: "\f214"; } .fa-simplybuilt:before {content: "\f215"; } .fa-skyatlas:before {content: "\f216"; } .fa-cart-plus:before {content: "\f217"; } .fa-cart-arrow-down:before {content: "\f218"; } .fa-diamond:before {content: "\f219"; } .fa-ship:before {content: "\f21a"; } .fa-user-secret:before {content: "\f21b"; } .fa-motorcycle:before {content: "\f21c"; } .fa-street-view:before {content: "\f21d"; } .fa-heartbeat:before {content: "\f21e"; } .fa-venus:before {content: "\f221"; } .fa-mars:before {content: "\f222"; } .fa-mercury:before {content: "\f223"; } .fa-intersex:before, .fa-transgender:before {content: "\f224"; } .fa-transgender-alt:before {content: "\f225"; } .fa-venus-double:before {content: "\f226"; } .fa-mars-double:before {content: "\f227"; } .fa-venus-mars:before {content: "\f228"; } .fa-mars-stroke:before {content: "\f229"; } .fa-mars-stroke-v:before {content: "\f22a"; } .fa-mars-stroke-h:before {content: "\f22b"; } .fa-neuter:before {content: "\f22c"; } .fa-genderless:before {content: "\f22d"; } .fa-facebook-official:before {content: "\f230"; } .fa-pinterest-p:before {content: "\f231"; } .fa-whatsapp:before {content: "\f232"; } .fa-server:before {content: "\f233"; } .fa-user-plus:before {content: "\f234"; } .fa-user-times:before {content: "\f235"; } .fa-hotel:before, .fa-bed:before {content: "\f236"; } .fa-viacoin:before {content: "\f237"; } .fa-train:before {content: "\f238"; } .fa-subway:before {content: "\f239"; } .fa-medium:before {content: "\f23a"; } .fa-yc:before, .fa-y-combinator:before {content: "\f23b"; } .fa-optin-monster:before {content: "\f23c"; } .fa-opencart:before {content: "\f23d"; } .fa-expeditedssl:before {content: "\f23e"; } .fa-battery-4:before, .fa-battery-full:before {content: "\f240"; } .fa-battery-3:before, .fa-battery-three-quarters:before {content: "\f241"; } .fa-battery-2:before, .fa-battery-half:before {content: "\f242"; } .fa-battery-1:before, .fa-battery-quarter:before {content: "\f243"; } .fa-battery-0:before, .fa-battery-empty:before {content: "\f244"; } .fa-mouse-pointer:before {content: "\f245"; } .fa-i-cursor:before {content: "\f246"; } .fa-object-group:before {content: "\f247"; } .fa-object-ungroup:before {content: "\f248"; } .fa-sticky-note:before {content: "\f249"; } .fa-sticky-note-o:before {content: "\f24a"; } .fa-cc-jcb:before {content: "\f24b"; } .fa-cc-diners-club:before {content: "\f24c"; } .fa-clone:before {content: "\f24d"; } .fa-balance-scale:before {content: "\f24e"; } .fa-hourglass-o:before {content: "\f250"; } .fa-hourglass-1:before, .fa-hourglass-start:before {content: "\f251"; } .fa-hourglass-2:before, .fa-hourglass-half:before {content: "\f252"; } .fa-hourglass-3:before, .fa-hourglass-end:before {content: "\f253"; } .fa-hourglass:before {content: "\f254"; } .fa-hand-grab-o:before, .fa-hand-rock-o:before {content: "\f255"; } .fa-hand-stop-o:before, .fa-hand-paper-o:before {content: "\f256"; } .fa-hand-scissors-o:before {content: "\f257"; } .fa-hand-lizard-o:before {content: "\f258"; } .fa-hand-spock-o:before {content: "\f259"; } .fa-hand-pointer-o:before {content: "\f25a"; } .fa-hand-peace-o:before {content: "\f25b"; } .fa-trademark:before {content: "\f25c"; } .fa-registered:before {content: "\f25d"; } .fa-creative-commons:before {content: "\f25e"; } .fa-gg:before {content: "\f260"; } .fa-gg-circle:before {content: "\f261"; } .fa-tripadvisor:before {content: "\f262"; } .fa-odnoklassniki:before {content: "\f263"; } .fa-odnoklassniki-square:before {content: "\f264"; } .fa-get-pocket:before {content: "\f265"; } .fa-wikipedia-w:before {content: "\f266"; } .fa-safari:before {content: "\f267"; } .fa-chrome:before {content: "\f268"; } .fa-firefox:before {content: "\f269"; } .fa-opera:before {content: "\f26a"; } .fa-internet-explorer:before {content: "\f26b"; } .fa-tv:before, .fa-television:before {content: "\f26c"; } .fa-contao:before {content: "\f26d"; } .fa-500px:before {content: "\f26e"; } .fa-amazon:before {content: "\f270"; } .fa-calendar-plus-o:before {content: "\f271"; } .fa-calendar-minus-o:before {content: "\f272"; } .fa-calendar-times-o:before {content: "\f273"; } .fa-calendar-check-o:before {content: "\f274"; } .fa-industry:before {content: "\f275"; } .fa-map-pin:before {content: "\f276"; } .fa-map-signs:before {content: "\f277"; } .fa-map-o:before {content: "\f278"; } .fa-map:before {content: "\f279"; } .fa-commenting:before {content: "\f27a"; } .fa-commenting-o:before {content: "\f27b"; } .fa-houzz:before {content: "\f27c"; } .fa-vimeo:before {content: "\f27d"; } .fa-black-tie:before {content: "\f27e"; } .fa-fonticons:before {content: "\f280"; }?css.css
body {padding: 0;margin: 0;font-family: 'microsoft yahei', 'Helvetica', simhei, simsun, sans-serif;background-color: #F7F7F7; }a {text-decoration: none; } .playerTitle{width:100%;margin: 0 auto;line-height:100px;font-size: 40px;text-align: center; } .player{width: 720px;height: 360px;margin: 0 auto;background: url("../images/loading.gif") center no-repeat;background-size: cover;position: relative; } video{height:100%;margin: 0 auto;display: none; } .controls {width: 720px;height: 40px;position: absolute;left: 0;bottom: -40px;background-color: #000; } .controls > .switch{width: 20px;height: 20px;display: block;font-size: 20px;color: #fff;position: absolute;left: 10px;top: 10px; } .controls > .expand{width: 20px;height: 20px;display: block;font-size: 20px;color: #fff;position: absolute;right: 10px;top: 10px; } .controls > .progress{width: 430px;height: 10px;position: absolute;left:40px;bottom:15px;background-color: #555; } .controls > .progress > .bar{width:100%;height:100%;border-radius: 3px;cursor: pointer;position: absolute;left: 0;top: 0;opacity: 0;z-index: 999; } .controls > .progress > .loaded{width:60%;height:100%;background-color: #999;border-radius: 3px;position: absolute;left: 0;top: 0;z-index: 2; } .controls > .progress > .elapse{width:0%;height:100%;background-color: #fff;border-radius: 3px;position: absolute;left: 0;top: 0;z-index: 3; } .controls > .time{height: 20px;position: absolute;left:490px;top: 10px;color: #fff;font-size: 14px; }21.屬性選擇器
<style>/*屬性選擇器*/div[class]{width: 100px;height: 100px;background-color: yellow;}/*屬性值是:hf 的*/div[class=hf]{width: 100px;height: 100px;background-color: red;}/*屬性值包含w 的*/div[class*=w]{width: 100px;height: 100px;background-color: green;}/*屬性值以w 開頭 的*/div[class^=w]{width: 100px;height: 100px;background-color: black;color: #fff;}/*屬性值以 fh 結尾 的*/div[class$=fh]{width: 100px;height: 100px;background-color: pink;color: #fff;}</style> </head> <body> <div class="h">1</div> <div class="hf">2</div> <div class="hfw">3</div> <div class="whfw">4</div> <div class="hfh">5</div> </body>22.兄弟偽類 選擇器
<style>.first{color: red;} /*兄弟偽類 + : 獲取當前元素的相鄰的滿足條件的元素 ~ : 獲取當前元素的滿足條件的兄弟元素 *//*first相鄰的li元素*/.first + li{color: blue;}.first ~ li{color: green;}</style> </head> <body><ul><li class="first">前端與移動開發</li><span>能不能變色</span><li>java</li><li>javaScript</li><li>C++</li><li>平面設計</li> </ul></body>23.相對于父元素的結構
<style>li:first-child{color: red;} li:last-child{color: green;} li:nth-child(3){color: pink; }li:nth-last-child(2){color: yellow;}li:nth-child(even){color: black;}li:nth-child(odd){color: blueviolet;}/*限制類型 只找li 類型 (一般用此寫法)*/li:first-of-type{color: darkmagenta;}</style> </head> <body><!-- 都是指相對E元素 的父級元素下E:first-child E 元素第一個子元素.E:last-child E 元素的最后一個子元素.E:nth-child() 第n個子元素E:nth-last-child(n) 同上類似,但倒著計算E:nth-child(even) 所有的偶數E:nth-child(odd) 所有的奇數--><ul><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li> </ul>24.偽類樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#div1{position: fixed;top: 200px;left: 30px;}#div2{width: 800px;height: 3000px;position: absolute;top: 10px;right: 300px;}/* * */h2:target{color: red;}</style></head> <body> <div id="div1"><ul><li><a href="#t1">第一個錨鏈接</a></li><li><a href="#t2">第二個錨鏈接</a></li><li><a href="#t3">第三個錨鏈接</a></li><li><a href="#t4">第四個錨鏈接</a></li><li><a href="#t5">第五個錨鏈接</a></li></ul> </div><div id="div2"><h2 id="t1">第一個錨鏈接</h2><p>第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,</p><h2 id="t2">第二個錨鏈接</h2><p>第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,</p><h2 id="t3">第三個錨鏈接</h2><p>第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,</p><h2 id="t4">第四個錨鏈接</h2><p>第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,</p><h2 id="t5">第五個錨鏈接</h2><p>第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,第一個錨鏈接,</p> </div></body> </html>?25.偽類元素before? after
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>body{padding-left: 200px;padding-top: 200px;}div:nth-of-type(1){width: 300px;height: 200px;background-color: red;float: left;}div:nth-of-type(2){width: 100px;height: 200px;background-color: blue;float: left;position: relative;}div:nth-of-type(2):before {/*1.必須加 content ,否則看不到值*/content: "";width: 20px;height: 20px;border-radius: 10px;background-color: #fff;/*2.此元素是行級元素,必須轉換為塊級元素*/position: absolute;top:-10px;left: -10px;}div:nth-of-type(2):after {/*1.必須加 content ,否則看不到值*/content: "";width: 20px;height: 20px;border-radius: 10px;background-color: #fff;/*2.此元素是行級元素,必須轉換為塊級元素*/position: absolute;bottom:-10px;left: -10px;}/*獲取第一個字符:實現首字下沉*/P:first-letter{color: red;font-size: 30px;float: left;/*文本環繞*/}/*獲取第一行內容*/P:first-line{text-decoration: underline; }/*設置當前選中內容的樣式*/P::selection{background-color: pink ;font-size: 20px; /* 此行代碼無效,因為selection:只能設置顯示的樣式,而不能設置內容大小*/}</style></head> <body><!--E::beforeE::after--> <div></div> <div></div> <br><br><br><br><br> <p>abc啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊 啊啊<br>啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊 啊啊<br>啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊 啊啊<br>啊啊啊啊啊啊 啊啊啊啊啊啊啊啊啊 啊啊<br></p> </body> </html>26.顏色(紅綠藍)
27 .文件陰影 : shadow
<style>p{font-size: 50px;text-shadow: 2px 3px 2px #000;/* x y 模糊值 顏色 */}</style> </head> <body><p>文字陰影的設置shadow</p></body>28盒子模型
/* 盒子模型 */ box-sizing:1.content-box : wight + padding +border2.border-box : wight(包含了padding+border)?
?
?
?
總結
- 上一篇： node打标签
- 下一篇： CSS进阶班笔记(五)