web前端系列之CSS菜單圖標知識整理

　　CSS是一種用來(lái)表現HTML或XML等文件樣式的計算機語(yǔ)言，它是web前端人才必須要掌握的基礎技能之一。想要學(xué)習web前端，最開(kāi)始的基礎學(xué)習一定是CSS。接下來(lái)的好程序員web前端教程就給大家簡(jiǎn)單分享CSS菜單圖標相關(guān)知識。

　　一般在寫(xiě)網(wǎng)頁(yè)的時(shí)候會(huì )遇到一些小圖標，通常一些復雜的圖標我們可以選擇使用第三方圖標庫，但是一些比較簡(jiǎn)單的小圖標，像這種(如下圖)：

　　CSS1

　　小圖標就可以不用引入第三方圖標庫，通過(guò)CSS就可以輕易實(shí)現。那么我們一起來(lái)看一下怎么實(shí)現的。

　　其實(shí)這個(gè)圖標可以使用border邊框這個(gè)屬性實(shí)現的，不同的border-style會(huì )展現不同的小圖標。這個(gè)圖標可以使用邊框中double(雙線(xiàn))和solid(實(shí)線(xiàn))這兩個(gè)屬性值來(lái)實(shí)現，我們來(lái)分析一下這個(gè)圖標(如下圖)：

　　CSS2

　　上半部分可以使用double這個(gè)值，邊框double(雙線(xiàn))中兩根線(xiàn)及中間的距離可以寫(xiě)成等分的，比如寫(xiě)的雙線(xiàn)寬度是9px，上半部分的第一根線(xiàn)分得3px，中間距離分得3px，第二根線(xiàn)分得3px。

　　下半部分可以使用solid這個(gè)值，小圖標上這三根線(xiàn)的寬度是一樣的，所以寫(xiě)的寬度要跟double雙線(xiàn)等分的值是一致，第二根線(xiàn)和第三根線(xiàn)中間的空隙可以通過(guò)高度實(shí)現，代碼如下：

　　/* CSS修飾 */

　　.menu{

　　border-top: double 9px #000;

　　border-bottom: solid 3px #000;

　　height: 3px;

　　width: 18px; /* 設置小圖標的大小 */

　　咱們除了可以通過(guò)標簽實(shí)現，也可以通過(guò)偽元素實(shí)現，代碼如下：

　　/* CSS修飾 */

　　.menu:after{

　　content:'';

　　display: block;

　　border-top: double 9px #000;

　　border-bottom: solid 3px #000;

　　height: 3px;

　　width: 18px;

　　CSS的主要用途是靜態(tài)地修飾網(wǎng)頁(yè)以及配合各種腳本語(yǔ)言動(dòng)態(tài)地對網(wǎng)頁(yè)各元素進(jìn)行格式化，在日常工作中，HTML+CSS+JavaScript是web前端人才工作的三大神器。而隨著(zhù)越來(lái)越多的人加入到前端行列以及企業(yè)招聘技能的提升，想要拿高薪我們需要更系統的學(xué)習和更豐富的實(shí)戰。