這個做Web網頁的系列文章，我會慢慢更新的。這也是對我使用Web前端技術的練習和總結（順便練練用Markdown的寫作）。如果大家覺得好的話，歡迎收藏、點贊、關注！
這個演示的圖片如下：
動態圖片有點大，所以一時打開會比較卡湊活着看吧：http://47.96.224.250/m/demo.gif
也可以自己把下面兩個圖像腦洞補幀：
演示的鏈接如下：
服務器地址：http://47.96.224.250/m/1.html
由於我沒有使用響應式布局，可能排版會亂，建議使用電腦觀看或者手機瀏覽器UA調整成電腦模式
1.搭建網頁基本框架，並引入外部樣式表和腳本
- 頁面結構大致是這樣(詳見底部源碼)：
body>(div.sidebar>li*n>a.icon)+a.btn
- 接下來引用下外部腳本：
因為需要有點擊事件，所以這里我直接采用JQuery來實現。
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
我參考了w3school jQuery教程，直接使用最簡單的CDN，來引用外部的腳本。
CDN的全稱是Content Delivery Network，即內容分發網絡。CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平台的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內容存儲和分發技術。
使用 Google 的 CDN：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
使用 Microsoft 的 CDN：
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
再給幾份文檔供參考：
jQuery 教程 | 菜鳥教程
jQuery API 中文文檔
jQuery中文網
- 引入外部樣式表：
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">
這里采用的是ionicons圖標庫的圖標
我采用的是國外的CDN，國內的也可以使用，參考文檔：ionic icon(圖標) | 菜鳥教程
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css">
2.放入圖標，寫CSS樣式
- 圖標自己上ionicons圖標庫看看，引用采用的是
<a>錨點的class方式引入，不采用官網給的JS腳本標簽引入，點開圖標下面會顯示默認“智能引入”，在上面有個USAGE，滑倒最低有個class引入方法，基本上操作幾次，你看看“智能引入”圖標英文名字就知道怎么寫了。
- 寫CSS樣式：
這個這個，具體咱也不好給你講，你搜搜標簽、屬性大概就知道什么意思，就會用了（英文字面意思）
主要講講這個：
.btn:before{
content:'\f32a';
}
.btnc:before{
content:'\f2c0';
}
在html中是這樣的：
<a class="btn"></a>
那為啥會顯示這樣的圖標呢？
因為采用了webfont。
在css里面，如果想使用某個字體，但是又擔心用戶電腦上沒有，就可以使用font-face屬性從服務器上引用這組字體。具體怎么用，搜一下font-face就很清楚了。
所以這里圖標也采用了十六進制編碼格式給“自定義”編碼進去了，所以引用后就可以顯示，注意這里別忘引用這個“字符庫”,放在.btn{}中。
font-family: ionicons;
參考下這個文檔吧：
font-face | 菜鳥教程
我具體獲得這個值，是在官網圖標庫通過開發者工具檢查元素得到的。
（我覺得這樣用簡單，當然你也可以用其他方法）
3.寫JS腳本
由於這個事件很簡單，所以直接寫到html中就可以了，具體怎么用，在第一中給有jQuery相關文檔，可以參考一下！
<script type="text/javascript"> $('.btn').on('click',function(){ $('.btn').toggleClass('btnc'); $('.sidebar').toggleClass('side'); }) </script>
算了，簡要介紹下toggleClass()吧。
- 定義
toggleClass()就是所謂的切換效果，對設置或移除被選元素的一個或多個類進行切換。 - 語法
$(selector).toggleClass(class,switch)
所以這么一看上面的代碼，不就是在點擊事件中，把兩個模塊預先寫好的樣式更換就行了，so easy對吧！
源代碼：
- index.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>側邊欄</title> 6 <link rel="stylesheet" href="style.css"> 7 <!--jQuery code--> 8 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.0.min.js"></script> 9 <link rel="stylesheet" href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css"> 10 </head> 11 <body> 12 <div class="sidebar"> 13 <ul> 14 <li><a href="" class="icon ion-logo-android"></a></li> 15 <li><a href="" class="icon ion-logo-playstation"></a></li> 16 <li><a href="" class="icon ion-logo-windows"></a></li> 17 <li><a href="" class="icon ion-logo-instagram"></a></li> 18 <li><a href="" class="icon ion-logo-python"></a></li> 19 </ul> 20 </div> 21 <a class="btn"></a> 22 <script type="text/javascript"> 23 $('.btn').on('click',function(){ 24 $('.btn').toggleClass('btnc'); 25 $('.sidebar').toggleClass('side'); 26 }) 27 </script> 28 </body> 29 </html>
- style.css:
1 @import 'https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css'; 2 body,html{ 3 margin: 0; 4 padding: 0; 5 height: 100%; 6 width: 100%; 7 font-family: sans-serif; 8 } 9 .sidebar{ 10 float: left; 11 width: 100px; 12 height: 100%; 13 margin-left: -100px; 14 background: #2c3e50; 15 overflow:hidden; 16 transition: 0.8s all; 17 } 18 .side{ 19 margin-left: 0; 20 } 21 .sidebar ul{ 22 margin: 0; 23 padding: 0; 24 } 25 .sidebar ul li{ 26 list-style: none; 27 } 28 .sidebar ul li a{ 29 text-decoration: none; 30 color: white; 31 height: 80px; 32 width: 100%; 33 font-size: 40px; 34 line-height: 80px; 35 text-align: center; 36 display: block; 37 transition: 0.6s all; 38 } 39 .sidebar ul li a:hover{ 40 background: #34495e; 41 } 42 .btn{ 43 float: left; 44 padding: 0 10px; 45 font-size: 40px; 46 text-decoration: none; 47 color: #2c5e50; 48 font-family: ionicons; 49 cursor: pointer; 50 } 51 .btn:before{ 52 content:'\f32a'; 53 } 54 .btnc:before{ 55 content:'\f2c0'; 56 }