作者通過以進(jìn)度條的設(shè)計(jì)深入淺出的講解關(guān)于FUI的設(shè)計(jì)思路。雖然FUI設(shè)計(jì)看起來很復(fù)雜，只要找準(zhǔn)規(guī)律，從一些作品中總結(jié)分析細(xì)節(jié)，再運(yùn)用到我們的設(shè)計(jì)中。想要了解的小伙伴可以嘗試一下。

前言

看到上期小伙伴想了解一下 FUI 的設(shè)計(jì)教程，所以這次再次和大家聊一下關(guān)于 FUI 的設(shè)計(jì)風(fēng)格，我們以“進(jìn)度條”的設(shè)計(jì)教程為例，深入淺出的聊一下關(guān)于 FUI 的設(shè)計(jì)思路，因?yàn)橹饕O(shè)計(jì)思路的延展，所以不會(huì)出現(xiàn)具體的數(shù)據(jù)參數(shù)，小伙伴們要諒解啊。

目錄

1.風(fēng)格介紹

2.設(shè)計(jì)思路

3.總結(jié)

1.風(fēng)格介紹

關(guān)于 FUI 的定義，閱讀過我上一篇文章的小伙伴可能對(duì) FUI 的定義有了一個(gè)較為清晰的定義，即 FUI 是：虛構(gòu)的、未來的、幻想的用戶界面。

2.機(jī)甲風(fēng)格

機(jī)甲風(fēng)格相對(duì)于軍事風(fēng)格的最大特點(diǎn)就是：“具有一定的裝飾圖形元素，或多或少。”機(jī)甲風(fēng)格最大的特點(diǎn)便是具有機(jī)械或者機(jī)甲風(fēng)格的裝飾元素，其中多為異形元素。其靈感來源于工業(yè)設(shè)計(jì)，從機(jī)械和機(jī)甲的工業(yè)設(shè)計(jì)語(yǔ)言中提取圖形元素，在運(yùn)用到界面設(shè)計(jì)上。如下圖，異形的機(jī)甲風(fēng)格讓機(jī)器人的頭部設(shè)計(jì)顯得更加統(tǒng)一，如果換成當(dāng)前流行的扁平化設(shè)計(jì)，可能就顯得有點(diǎn)奇怪了。

機(jī)甲風(fēng)格的發(fā)展歸功于科幻題材故事的發(fā)展，為人們打開腦洞，暢想更多的可能性。在設(shè)計(jì)上激發(fā)了 FUI 的誕生，無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機(jī)甲風(fēng)格的界面設(shè)計(jì)。

我們可以放入界面當(dāng)中感受一下視覺效果：

設(shè)計(jì)樣式 – 機(jī)甲風(fēng)格

我們?cè)賮磉M(jìn)階一下，設(shè)計(jì)一個(gè)機(jī)甲元素的的進(jìn)度條。

機(jī)甲風(fēng)格看似裝飾圖形復(fù)雜，設(shè)計(jì)難度復(fù)雜，但其實(shí)我們只需要掌握好 – “提煉元素”這項(xiàng)技能就能完美應(yīng)對(duì)機(jī)甲風(fēng)格的設(shè)計(jì)。

我們?cè)倩仡檶?duì)創(chuàng)意設(shè)計(jì)的定義：是把再簡(jiǎn)單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式。這里我們可以理解為將機(jī)甲元素進(jìn)行提煉總結(jié)，延伸到彈框設(shè)計(jì)當(dāng)中。例如下圖，漂亮的小姐姐一秒鐘變機(jī)械美女，就是通過對(duì)機(jī)械元素延展到模特身上。

第一步，照一張你喜歡的不錯(cuò)的參考，這里你可以找成熟的界面設(shè)計(jì)作品，也可以找一張不錯(cuò)的關(guān)于機(jī)甲風(fēng)格的參考，以便于自己進(jìn)行元素提取。這里我們以大家熟悉的高達(dá)為例：

我們從中提取我們需要的圖形，如下圖：

最后我們我們需要仔細(xì)思考將圖形進(jìn)行組合，多嘗試幾次他們的組合方式。這里我對(duì)提取的元素進(jìn)行了二次加工，將圖形一和圖形四進(jìn)行了結(jié)合，打破固有的組合規(guī)律，讓圖形看起來更加生動(dòng)。

最后我們可以放入界面當(dāng)中感受一下視覺效果：

轉(zhuǎn)載自簡(jiǎn)書

作者：極創(chuàng)設(shè)計(jì)

鏈接：https://www.jianshu.com/p/77665c771153

來源：簡(jiǎn)書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)( www.zhengchang8.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

大多數(shù)文章中，我們并未特別注意CSS文件的可維護(hù)與可讀性的問題，當(dāng)完成一項(xiàng)前端的工作之后，許多人都會(huì)忘記該項(xiàng)目的結(jié)構(gòu)與細(xì)節(jié)。然而代碼并不是馬上就能完全定型，在余下的時(shí)間里還有不斷的維護(hù)工作，而這些工作也許不會(huì)是你自己完成。所以，結(jié)構(gòu)優(yōu)良的代碼能很大程度上優(yōu)化它的可維護(hù)性。下面列出四則技巧提高CSS文件可維護(hù)性的方法，以此作為指南，以一種較好的CSS樣式組織習(xí)慣來進(jìn)行WEB前端開發(fā)。



一、CSS樣式文件分解



對(duì)于小項(xiàng)目，在寫代碼之前，按頁(yè)面結(jié)構(gòu)或頁(yè)面內(nèi)容將代碼分為幾塊并給予注釋。例如，可以分別將 全局樣式、布局、字體樣式、表單、評(píng)論和其他分為幾個(gè)不同的塊來繼續(xù)工作。



而對(duì)于較大的工程，這樣顯然不會(huì)有什么效果。此時(shí)，就需要將樣式分解到幾個(gè)不同的樣式表文件。下面的master stylesheet 就是這一方法的例子，它的工作主要是導(dǎo)入其他樣式文件。使用這一方法不僅能優(yōu)化樣式結(jié)構(gòu)，而且有利于減少一些不必要的服務(wù)器請(qǐng)求。而分解文件的方法就有許多種，master stylesheet 使用了最常見的一種。



@import "reset.css";

@import "layout.css";

@import "colors.css";

@import "typography.css";

@import "flash.css";

/ @import "debugging.css"; /



同時(shí)對(duì)于大型項(xiàng)目，你也可以加上CSS文件的升級(jí)標(biāo)志或者一些診斷等其他措施，這里不再詳述。大家注意在實(shí)現(xiàn)工作中總結(jié)與思考，也歡迎多參考webjx.com的相關(guān)文章。



二、為CSS文件建立索引



為了能夠迅速的了解整個(gè)CSS文件的結(jié)構(gòu)，在文件開頭建立文件索引是一個(gè)不錯(cuò)的選擇。

一種可行的方法是建立樹形的索引，結(jié)構(gòu)上的id 和 class 都可以成為該樹的一個(gè)分支。



[Layout]

• body
  
        + Header / #header
  
        + Content / #content
  
              - Left column / #leftcolumn
  
              - Right column / #rightcolumn
  
              - Sidebar / #sidebar
  
              - RSS / #rss
  
              - Search / #search
  
              - Boxes / .box
  
              - Sideblog / #sideblog
  
        + Footer / #footer
  
  Navigation         #navbar
  
  Advertisements         .ads
  
  Content header         h2
  
  
  
  或者也可以這樣：
  
  
  
  [Contents]
  
        1. Body
  
        2. Header / #header
  
              2.1. Navigation / #navbar
  
        3. Content / #content
  
              3.1. Left column / #leftcolumn
  
              3.2. Right column / #rightcolumn
  
              3.3. Sidebar / #sidebar
  
                    3.3.1. RSS / #rss
  
                    3.3.2. Search / #search
  
                    3.3.3. Boxes / .box
  
                    3.3.4. Sideblog / #sideblog
  
                    3.3.5. Advertisements / .ads
  
        4. Footer / #footer
  
  
  
  新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來一起交流。
  
  
  
  另一種方式可以只是先簡(jiǎn)單的將內(nèi)容列舉出來，也不需要縮進(jìn)。下面的一個(gè)例子中，如果你需要跳至RSS部分你只需要簡(jiǎn)單的搜索。
  
  
  
  [Contents]
  
  1. Body
     
  2. Header / #header
     
  3. Navigation / #navbar
     
  4. Content / #content
     
  5. Left column / #leftcolumn
     
  6. Right column / #rightcolumn
     
  7. Sidebar / #sidebar
     
  8. RSS / #rss
     
  9. Search / #search
     
  10. Boxes / .box
      
  11. Sideblog / #sideblog
      
  12. Advertisements / .ads
      
  13. Footer / #footer
      
      /--[8. RSS / #rss]--/
      

      rss { ... }
      

      rss img { ... }
      

      
      
      定義這樣一個(gè)樣式檢索可以很有效的使其他人閱讀學(xué)習(xí)你的代碼變得容易。在制作大項(xiàng)目的時(shí)候，你也可以將檢索打印出來從而在你閱讀代碼的時(shí)候方便查閱。您還可以參考下面的文章。
      
      
      
      三、格式化CSS屬性
      
      
      
      當(dāng)我們編寫代碼的時(shí)候，使用一些特殊的編碼風(fēng)格會(huì)對(duì)提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風(fēng)格。一部分人習(xí)慣于將顏色和字體的代碼放在前面，另外一部分則更喜歡將類似浮動(dòng)和定位的更“重要”的屬性放在前面。類似的，也可以將頁(yè)面元素按照它在布局中的結(jié)構(gòu)進(jìn)行排序：
      
      
      
          body,
      
                h1, h2, h3,
      
                p, ul, li,
      
                form {
      
                        margin: 0;
      
                        padding: 0;
      
                        border: 0;
      
                 }
      
      
      
      一些開發(fā)者用一種更為有意思的方法：他們將屬性按首字母的順序排列。值得注意的是，這樣一種方法可能對(duì)某些瀏覽器會(huì)產(chǎn)生問題。不管自己的格式如何，你要確保你已經(jīng)清晰的定義了這些格式方法。這樣，你的同事在閱讀你的代碼的時(shí)候?qū)?huì)感謝你的努力。您還可以參考下面的文章。
      
      
      
      四、合理的利用縮進(jìn)
      
      
      
      為了讓你的代碼給人感覺更為直觀，你可以使用一行來定義大綱元素的樣式。當(dāng)指定的選擇器里的屬性超過三個(gè)的時(shí)候，這種方式將帶來混亂。但是，適度的使用這種方式，你可以很清楚的區(qū)分相同類的不同點(diǎn)。
      
      
      

      main-column { display: inline; float: left; width: 300px; }
      

          #main-column h1 { margin-bottom: 20px; }
      
          #main-column p { color: #333; }
      
      
      
      同時(shí)，樣式修改的維護(hù)也是個(gè)比較麻煩的問題。很多人修改樣式之后就忘記了，結(jié)果后來又發(fā)現(xiàn)修改的樣式導(dǎo)致了頁(yè)面出錯(cuò)，不得不苦苦尋找。因此，為修改的樣式構(gòu)建一個(gè)特殊的格式就很必要了。一種很簡(jiǎn)單的方式是，給修改過的樣式縮進(jìn)，同時(shí)，也可以使用一些注釋（比如"@new"）來做一個(gè)標(biāo)識(shí)。
      
      
      

      sidebar ul li a {
      

             display: block;
      
             background-color: #ccc;
      
                  border-bottom: 1px solid #999; / @new /
      
             margin: 3px 0 3px 0;
      
                  padding: 3px; / @new /
      
      }
      
      
      
      總的來說，只有建立一個(gè)合適的樣式指南才會(huì)對(duì)樣式表的可讀性有所幫助。記住，移去每一個(gè)對(duì)你理解文件沒有幫助的樣式指南，避免對(duì)過多的元素使用過多的樣式指南。然后，為了一個(gè)可讀性可維護(hù)性良好的CSS文件而努力吧。不要忘記和webjx.com分享您的經(jīng)驗(yàn)，歡迎參與評(píng)論
      
      
      

在學(xué)習(xí)應(yīng)用css之前我們要先了解一下什么是css。CSS是Cascading Style Sheets(層疊樣式表)的簡(jiǎn)稱.

• CSS語(yǔ)言是一種標(biāo)記語(yǔ)言,它不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語(yǔ)言).
  
  
  
• 在標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)中CSS負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容(XHTML)的表現(xiàn).
  
  
  
• CSS文件也可以說是一個(gè)文本文件,它包含了一些CSS標(biāo)記,CSS文件必須使用css為文件名后綴.
  
  
  
• 可以通過簡(jiǎn)單的更改CSS文件,改變網(wǎng)頁(yè)的整體表現(xiàn)形式,可以減少我們的工作量,所以她是每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員的必修課.
  
  
  
• CSS是由W3C的CSS工作組產(chǎn)生和維護(hù)的.
  
  
  
  新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來一起交流。
  
  
  
  了解了什么是css后我們就可以方便對(duì)其應(yīng)用了，我們可以用以下兩種方式加入你的博客當(dāng)中去，由于css的應(yīng)用方式有就近原則。也就是說最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。
  
  
  
  鏈入外部樣式表文件 (Linking to a Style Sheet)
  
  
  
  你可以先建立外部樣式表文件（.css），然后使用HTML的link對(duì)象。示例如下：
  
  
  
  <head>
  
  <title>文檔標(biāo)題</title>
  
  <link rel=stylesheet href="http://www.123-seo,cn/dhtmlet.css" type="text/css">
  
  </head>
  
  
  
  而在XML中，你應(yīng)該如下例所示在聲明區(qū)中加入：
  
  
  
  <? xml-stylesheet type="text/css" href="http://www.123-seo.cn/dhtmlet.css" ?>
  
  
  
  定義內(nèi)部樣式塊對(duì)象 (Embedding a Style Block)
  
  
  
  你可以在你的HTML文檔的<HTML>和<BODY>標(biāo)記之間插入一個(gè)<STYLE>...</STYLE>塊對(duì)象。 定義方式請(qǐng)參閱樣式表語(yǔ)法。示例如下：
  
  
  
  <html>
  
  <head>
  
  <title>文檔標(biāo)題</title>
  
  <style type="text/css">
  
  <!--
  
  body {font: 10pt "Arial"}
  
  h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
  
  h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
  
  p {font: 10pt/12pt "Arial"; color: black}
  
  -->
  
  </style>
  
  </head>
  
  <body>
  
  
  
  請(qǐng)注意，這里將style對(duì)象的type屬性設(shè)置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。
  
  
  

邊框(border): css控制的邊框?qū)傩园╞order-width, border-color, border-style.



Border之所以讓人很困惑主要源于IE5錯(cuò)綜復(fù)雜的BUG, 由于IE5是一個(gè)“will soon be dead” 的瀏覽器, 這里只例舉一個(gè)最為知名的關(guān)于border-width的BUG, 讓大家更好的理解border的含義, 先看下圖:







如上圖所示, 對(duì)象A(白色矩形)周圍有藍(lán)色邊框B, 可以看出A的實(shí)際寬度為ef, 而IE5不這么認(rèn)為, 它把cd的長(zhǎng)度定義為對(duì)象A的寬度, 這個(gè)bug在邊框的寬度小時(shí)幾乎察覺不到, 但在邊框與對(duì)象寬度相差不大時(shí)顯得尤為明顯.



新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來一起交流。



現(xiàn)在, 結(jié)合以上說明, 可以看出border是獨(dú)立于對(duì)象之外, 位于magin與padding之間(后說明), 具有固定寬度, 顏色和樣式的區(qū)域.

1. border-width: 其可有具體數(shù)值(如1px, 2px等)或是描述性(thin, medium, thick)的屬性值. 由于瀏覽器及個(gè)人設(shè)置的不同導(dǎo)致thin, medium, thick這些屬性值的表現(xiàn)不一, 不推薦使用. css代碼如下:
   
   
   
   border-width: 1px;
   
   border-width: 2px;
   
   border-width: thin;
   
   border-width: medium;
   
   border-width: thick;
   
   
   
   寬度效果如下(注意不同瀏覽器下的區(qū)別):
   
   
   
    1px    2px    thin    medium    thick 
   
   
   
2. border-style: 邊框樣式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代碼如下:
   
   
   
   border-style: solid;
   
   border-style: dashed;
   
   border-style: dotted;
   
   border-style: double;
   
   border-style: groove;
   
   border-style: ridge;
   
   border-style: inset;
   
   border-style: outset;
   
   
   
   樣式效果如下(你可能需要Firefox或是Opera才能看到后四種效果):
   
   
   
    solid   
   
   
   
    dashed   
   
   
   
    dotted   
   
   
   
    double   
   
   
   
    groove   
   
   
   
    ridge   
   
   
   
    inset   
   
   
   
    outset   
   
   
   
3. border-color: 邊框顏色屬性和一般顏色屬性是一樣的, 可以參看屬性篇(1).
   
   
   
   Summary: 以上例舉的都是四邊相同樣式的情況, 其實(shí)可以分別設(shè)置border-top, border-right, border-bottom, border-left四邊的屬性, 比方說想要表現(xiàn)一個(gè)寬2px, 藍(lán)色(blue), 樣式為solid的上下邊框, 代碼如下:
   
   
   
   border-top-width: 2px;
   
   border-top-color: blue;
   
   border-top-style: solid;
   
   border-bottom-width: 2px;
   
   border-bottom-color: blue;
   
   border-bottom-style: solid;
   
   
   
   簡(jiǎn)寫為:
   
   
   
   border-top: blue 2px solid;
   
   border-bottom: blue 2px solid;
   
   
   
   表現(xiàn)如下:
   
   
   
    寬2px,藍(lán)色,樣式為solid的邊框 
   
   
   
   鏈接(link): 在html里用<a></a>標(biāo)明鏈接, 在css里用a作為鏈接的選擇器名.
   
   
   
   css的缺點(diǎn)和它的優(yōu)點(diǎn)一樣明顯, 其最大的缺陷就在于網(wǎng)頁(yè)的動(dòng)態(tài)表現(xiàn)不足, 在這一點(diǎn)上和Flash差距尤為突出.
   
   
   
   好在css還是留了一手, 那就是鏈接的偽類選擇器, 所謂偽類就是指依賴于瀏覽器或是用戶的狀態(tài). 對(duì)于鏈接來講, 存在link, hover, visited, active四種狀態(tài), 即四種偽類選擇器: a:link(存在鏈接, 但無鼠標(biāo)動(dòng)作), a:visited(被點(diǎn)擊或訪問過), a:hover(鼠標(biāo)懸停于鏈接上時(shí)的狀態(tài)), a:active(鼠標(biāo)點(diǎn)擊與釋放之間的狀態(tài)).
   
   
   
   css便是以這幾個(gè)偽類選擇器實(shí)現(xiàn)了其為數(shù)不多的動(dòng)態(tài)效果. 目前最為常用的就是導(dǎo)航條和按鈕的動(dòng)態(tài)顯示. 以下用一個(gè)動(dòng)態(tài)按鈕的實(shí)例來說明這四個(gè)偽類選擇器.
   
   
   
4. 首先準(zhǔn)備一副圖片(button.png), 如下圖(160px240px), 其由四幅160px60px的小圖自上而下排列而成.
   
   
   
    
   
   
   
   
   
   
   
5. 接著需要往你的本地調(diào)試文件夾(調(diào)試環(huán)境的建立方法參考屬性(1)中的說明)的index.htm中寫入html代碼, 如下:
   
   
   
   <div id=”button”><a href=”#”></a></div>
   
   
   
6. 在style.css中寫入以下代碼:
   
   
   
   body {background-color: #FFF;}
   

   button a{
   

   width:160px;
   
   height:60px;
   
   display:block;
   
   background:url(../image/button.png) no-repeat 0 0;
   
   } 
   

   button a:link { background-position:0 0;}
   

   button a:hover { background-position:0 -60px;} 
   

   button a:active { background-position:0 -120px;}
   

   button a:visited { background-position:0 -180px;}
   

   
   
   可以看到如 Example2 的效果.
   
   
   

7. 代碼解釋:
   
   
   
   <div id=”button”><a href=”#”></a></div>
   
   
   
   在index.htm寫入如上代碼, 目的在于插入一個(gè)id名為”button”的盒子(div),且其內(nèi)含有一個(gè)鏈接<a href=”#”></a>.
   
   
   

   button a{
   

   width:160px;
   
   height:60px;
   
   display:block;
   
   background:url(../image/button.png) no-repeat 0 0;
   
   }
   
   
   
   在css文件中寫入以上代碼, 目的在于控制盒子中鏈接的表現(xiàn), 通過名為”#button a”的選擇器來實(shí)現(xiàn). 鏈接的寬高為160px*60px, 背景為圖片button.png.
   
   
   
   在這強(qiáng)調(diào)一下display:block的作用. 由于在html文件中,鏈接<a href=”#”> </a>中沒有任何的內(nèi)容(content)填充, 如果沒有聲明”display:block”, 那么即使聲明了選擇器”#button a”的寬高, 瀏覽器也會(huì)因?yàn)閔tml文件中沒有內(nèi)容而無法顯示鏈接. 所以”display:block”在這里的作用就在于強(qiáng)制瀏覽器顯示沒有內(nèi)容填充的鏈接. 
   
   
   

   button a:link { background-position:0 0;}
   

   
   
   用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由于已經(jīng)在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.
   
   
   

   button a:hover { background-position:0 -60px;} 
   

   button a:active { background-position:0 -120px;}
   

   button a:visited { background-position:0 -180px;}
   

   
   
   用偽類選擇器a:hover聲明鼠標(biāo)懸停時(shí), 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;
   
   
   
   用偽類選擇器a:active聲明在鼠標(biāo)點(diǎn)擊與釋放之間的狀態(tài)時(shí), 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;
   
   
   
   用偽類選擇器a:visited聲明在鏈接被點(diǎn)擊或訪問過時(shí), 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;
   
   
   
   現(xiàn)在你基本了解了css動(dòng)態(tài)按鈕的制作過程, 但以上css代碼還存在一個(gè)嚴(yán)重的缺陷, 相信你會(huì)很快發(fā)現(xiàn)問題所在——這個(gè)按鈕居然是一個(gè)”一次性按鈕“, 也就是說這個(gè)按鈕在點(diǎn)擊第一次后, 就一直顯示那個(gè)灰色小圖片, 你能想出解決方法嗎?
   
   
   

文章目錄

一、this

1.什么是this

2.this 代表什么

3.綁定 this 的方法

4.this的指向

5.改變指向

二、Function.prototype.bind()

三、call/apply

1.定義

2.語(yǔ)法

3.異同

一、this

1.什么是this

this 關(guān)鍵字在大部分語(yǔ)言中都是一個(gè)重要的存在，JS中自然不例外，其表達(dá)的意義豐富多樣甚至有些復(fù)雜，深刻理解this是學(xué)習(xí)JS、面向?qū)ο缶幊谭浅Ｖ匾囊画h(huán)。



2.this 代表什么

this代表函數(shù)（方法）執(zhí)行的上下文環(huán)境（上下文，類似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關(guān)系）。



但在 JavaScript 中 this 不是固定不變的，它會(huì)隨著執(zhí)行環(huán)境的改變而改變。



1.在方法中，this 表示該方法所屬的對(duì)象。



2.如果單獨(dú)使用，this 表示全局對(duì)象。



3.在函數(shù)中，this 表示全局對(duì)象。



4.在函數(shù)中，在嚴(yán)格模式下，this 是未定義的(undefined)。



5.在事件中，this 表示接收事件的元素。



6.類似 call() 和 apply() 方法可以將 this 引用到任何對(duì)象。



3.綁定 this 的方法

this的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來切換/固定this的指向。



4.this的指向

1.在一般函數(shù)方法中使用 this 指代全局對(duì)象



function test(){

this.x = 1;  //這里this就是window

console.log(this.x);

}

test(); // 1



JS規(guī)定，函數(shù)中的this，在函數(shù)被調(diào)用時(shí)確定，它指函數(shù)當(dāng)前運(yùn)行的環(huán)境。



2.作為對(duì)象方法調(diào)用，this 指代上級(jí)對(duì)象



var x =3;

function test(){

alert(this.x);

}

var o = {

  x:1,

  m:test 

};

o.m(); // 1



如果函數(shù)作為對(duì)象的方法時(shí)，方法中的 this 指向該對(duì)象。



3.作為構(gòu)造函數(shù)調(diào)用，this 指代new 出的對(duì)象



function test(){

console.log(this);

}

var o = new test();

       test();

//可以看出o代表的不是全局對(duì)象



new關(guān)鍵詞的作用是調(diào)用某個(gè)函數(shù)并拿到其中的返回值，只是調(diào)用過程稍特殊。在上面的代碼實(shí)例中。test函數(shù)被new關(guān)鍵詞調(diào)用時(shí)，內(nèi)部依次執(zhí)行了以下步驟:



（1）創(chuàng)建一個(gè)空對(duì)象。



（2）將這個(gè)空對(duì)象的原型，指向這個(gè)構(gòu)造函數(shù)的prototype。



（3）將空對(duì)象的值賦給函數(shù)內(nèi)部的this（this就是個(gè)空對(duì)象了）。



（4）執(zhí)行函數(shù)體代碼，為this這個(gè)對(duì)象綁定鍵值對(duì)。



（5）返回this，將其作為new關(guān)鍵詞調(diào)用oop函數(shù)的返回值。



所以構(gòu)造函數(shù)中的this，依舊是在構(gòu)造函數(shù)被new關(guān)鍵詞調(diào)用時(shí)確定其指向，指向的是當(dāng)前被實(shí)例化的那個(gè)對(duì)象。



4.箭頭函數(shù)中的this

箭頭函數(shù)是ES6的新特性，最重要的特點(diǎn)是它會(huì)捕獲其所在上下文的this作為自己的this，或者說，箭頭函數(shù)本身并沒有this，它會(huì)沿用外部環(huán)境的this。也就是說，箭頭函數(shù)內(nèi)部與其外部的this是保持一致的。



this.a=20

var test={

    a:40，

    init:()=>{

        console.log(this.a)

        function go(){

            this.a=60

            console.log(this.a)

        }

        go.prototype.a=50

        return go

    }   

}



var p=test.init()

p()

new (test.init())()

//輸出 20 60 60 60



5.改變指向

this的動(dòng)態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時(shí)，需要把this固定下來，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個(gè)方法，來切換/固定this的指向。



bind方法和apply、call稍有不同，bind方法返回一個(gè)新函數(shù)，以后調(diào)用了才會(huì)執(zhí)行，但apply、call會(huì)立即執(zhí)行。



二、Function.prototype.bind()

bind()方法主要就是將函數(shù)綁定到某個(gè)對(duì)象，bind()會(huì)創(chuàng)建一個(gè)函數(shù)，函數(shù)體內(nèi)的this對(duì)象的值會(huì)被綁定到傳入bind()中的第一個(gè)參數(shù)的值，例如：f.bind(obj)，實(shí)際上可以理解為obj.f()，這時(shí)f函數(shù)體內(nèi)的this自然指向的是obj；



示例：



function f(y, z){

    return this.x + y + z;

}

var m = f.bind({x : 1}, 2);

console.log(m(3));

//6

1

2

3

4

5

6

這里bind方法會(huì)把它的第一個(gè)實(shí)參綁定給f函數(shù)體內(nèi)的this，所以這里的this即指向{x : 1}對(duì)象，從第二個(gè)參數(shù)起，會(huì)依次傳遞給原始函數(shù)，這里的第二個(gè)參數(shù)2，即是f函數(shù)的y參數(shù)，最后調(diào)用m(3)的時(shí)候，這里的3便是最后一個(gè)參數(shù)z了，所以執(zhí)行結(jié)果為1 + 2 + 3 = 6分步處理參數(shù)的過程其實(shí)是一個(gè)典型的函數(shù)柯里化的過程（Curry）。



三、call/apply

1.定義

每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法：call()方法和apply()方法。



call和apply可以用來重新定義函數(shù)的執(zhí)行環(huán)境，也就是this的指向；call和apply都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的context，即上下文而存在的，換句話說，就是為了改變函數(shù)體內(nèi)部this的指向。



2.語(yǔ)法

call()



調(diào)用一個(gè)對(duì)象的方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象，可以繼承另外一個(gè)對(duì)象的屬性，它的語(yǔ)法是：



Function.call(obj[, param1[, param2[, [,...paramN]]]]);

1

obj：這個(gè)對(duì)象將代替Function類里this對(duì)象

params：一串參數(shù)列表



說明：call方法可以用來代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)閛bj指定的新對(duì)象，如果沒有提供obj參數(shù)，那么Global對(duì)象被用于obj。



apply()



和call()方法一樣，只是參數(shù)列表不同，語(yǔ)法：



Function.apply(obj[, argArray]);



obj：這個(gè)對(duì)象將代替Function類里this對(duì)象

argArray：這個(gè)是數(shù)組，它將作為參數(shù)傳給Function



說明：如果argArray不是一個(gè)有效數(shù)組或不是arguments對(duì)象，那么將導(dǎo)致一個(gè)TypeError，如果沒有提供argArray和obj任何一個(gè)參數(shù)，那么Global對(duì)象將用作obj。



3.異同

相同點(diǎn)



call()和apply()方法的相同點(diǎn)就是這兩個(gè)方法的作用是一樣的。都是在特定的作用域中調(diào)用函數(shù)，等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值，以擴(kuò)充函數(shù)賴以運(yùn)行的作用域。



一般來說，this總是指向調(diào)用某個(gè)方法的對(duì)象，但是使用call()和apply()方法時(shí)，就會(huì)改變this的指向，看個(gè)例子：



function add(a, b) {

    return a + b;

}



function sub(a, b) {

    return a - b;

}



console.log(add.call(sub, 2, 1));//3



為什么add.call(sub, 2, 1)的執(zhí)行結(jié)果是3呢，因?yàn)閏all()方法改變了this的指向，使得sub可以調(diào)用add的方法，也就是用sub去執(zhí)行add中的內(nèi)容，再來看一個(gè)例子：



function People(name, age) {

    this.name = name;

    this.age = age;

}



function Student(name, age, grade) {

    People.call(this, name, age);

    this.grade = grade;

}



var student = new Student('小明', 21, '大三');

console.log(student.name + student.age + student.grade);//小明21大三



在這個(gè)例子中，我們并沒有給Student的name和age賦值，但是存在這兩個(gè)屬性的值，這還是要?dú)w功于call()方法，它可以改變this的指向。

在這個(gè)例子里，People.call(this, name, age);中的this代表的是Student，這也就是之前說的，使得Student可以調(diào)用People中的方法，因?yàn)镻eople中有this.name = name;等語(yǔ)句，這樣就將name和age屬性創(chuàng)建到了Student中。



總結(jié)一句話就是call()可以讓括號(hào)里的對(duì)象來繼承括號(hào)外函數(shù)的屬性。



至于apply()方法作用也和call()方法一樣，可以這么寫：



People.apply(this, [name, age]);

1

或者這么寫：



People.apply(this, arguments);

1

在這里arguments和[name, age]是等價(jià)的。



不同點(diǎn)



從定義中也可以看出來，call()和apply()的不同點(diǎn)就是接收參數(shù)的方式不同。



1.apply()方法接收兩個(gè)參數(shù)，一個(gè)是函數(shù)運(yùn)行的作用域（this），另一個(gè)是參數(shù)數(shù)組。

2.call()方法不一定接受兩個(gè)參數(shù)，第一個(gè)參數(shù)也是函數(shù)運(yùn)行的作用域（this），但是傳遞給函數(shù)的參數(shù)必須列舉出來。



在給對(duì)象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組的時(shí)候,比如之前apply()方法示例里面?zhèn)鬟f了參數(shù)arguments,這個(gè)參數(shù)是數(shù)組類型,并且在調(diào)用Person的時(shí)候參數(shù)的列表是對(duì)應(yīng)一致的(也就是Person和Student的參數(shù)列表前兩位是一致的)就可以采用apply()方法。



但是如果Person的參數(shù)列表是這樣的(age,name)，而Student的參數(shù)列表是(name,age,grade)，這樣就可以用call()方法來實(shí)現(xiàn)了,也就是直接指定參數(shù)列表對(duì)應(yīng)值的位置Person.call(this,age,name)。

一、什么是字體圖標(biāo)

字體圖標(biāo)：簡(jiǎn)單的說，就是一種特殊的字體，通過這種字體，顯示給用戶的就像一個(gè)個(gè)圖片一樣，但它的本質(zhì)是文字。目前在移動(dòng)端應(yīng)用比較廣泛！







二、字體圖標(biāo)的使用步驟

這里以阿里巴巴矢量圖標(biāo)庫(kù)為例?。?！



sep1：

百度搜索iconfont,找到阿里巴巴矢量圖標(biāo)庫(kù)官網(wǎng)



網(wǎng)址在這里https://www.iconfont.cn/

進(jìn)去之后注冊(cè)或登錄，共有3種登錄方式，在這里我使用新浪微博賬號(hào)登錄





好了，登錄之后我們就可以在里面選擇自己想要的字體圖標(biāo)啦！??！那么，如何選擇下載并應(yīng)用到自己的項(xiàng)目中呢？？別著急，跟著我走！



sep2：下載字體圖標(biāo)字體庫(kù)

在這里我們可以根據(jù)自己的需求輸入相應(yīng)的關(guān)鍵字進(jìn)行搜索（中英文都可以）



鼠標(biāo)放上去，然后就可以把自己喜歡的寶貝加入購(gòu)物車?yán)玻?br />


網(wǎng)購(gòu)的趕腳有木有，

我知道，看到這里大家就該有疑問了，

還要花錢買嗎？

放心！

答案是：不需要！



我們選的東西都在購(gòu)物車?yán)锢玻?br />


打開購(gòu)物車，就能看到你選的圖標(biāo)了??！

接下來你要做的是把它們下載到本地。



由于要在網(wǎng)頁(yè)中使用

在這里我們選擇 下載代碼



下載后將壓縮包解壓，為了方便后續(xù)使用我們改一下文件夾名稱，在這里我改為 icon (注意：在HTML中導(dǎo)入路徑時(shí)，記得帶上你所改的文件夾名稱)



打開之后你會(huì)發(fā)現(xiàn)里面有不同類型的文件（建議都不要?jiǎng)h除）



打開后綴名為.html的這個(gè)文件（可以更直觀地查看自己下載的字體圖標(biāo)）







step3：在項(xiàng)目中引用字體圖標(biāo)

不要走開，重點(diǎn)來了！??！

官方提供了三種引用方法（下面對(duì)應(yīng)的都有步驟）





Unicode 引用

Unicode 是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式，特點(diǎn)是：

兼容性最好，支持 IE6+，及所有現(xiàn)代瀏覽器。

支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等。

但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色。

注意：新版 iconfont 支持多色圖標(biāo)，這些多色圖標(biāo)在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式

Unicode 使用步驟如下

第一步：拷貝項(xiàng)目下面生成的 @font-face

@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }

第二步：定義使用 iconfont 的樣式

.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面

<span class="iconfont">&#x33;</span>



font-class 引用

font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語(yǔ)意不明確的問題。

與 Unicode 使用方式相比，具有如下特點(diǎn)：

兼容性良好，支持 IE8+，及所有現(xiàn)代瀏覽器。

相比于 Unicode 語(yǔ)意明確，書寫更直觀?？梢院苋菀追直孢@個(gè) icon 是什么。

因?yàn)槭褂?class 來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改 class 里面的 Unicode 引用。

不過因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

使用步驟如下：

第一步：引入項(xiàng)目下面生成的 fontclass 代碼：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：

<span class="iconfont icon-xxx"></span>



symbol 引用

這是一種全新的使用方式，應(yīng)該說這才是未來的主流，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章 這種用法其實(shí)是做了一個(gè) SVG 的集合，與另外兩種相比具有如下特點(diǎn)：

支持多色圖標(biāo)了，不再受單色限制。

通過一些技巧，支持像字體那樣，通過 font-size, color 來調(diào)整樣式。

兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。

瀏覽器渲染 SVG 的性能一般，還不如 png。

使用步驟如下:

第一步：引入項(xiàng)目下面生成的 symbol 代碼：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代碼（引入一次就行）：

<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>

第三步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>



下面，我就跟大家詳細(xì)說說 font-class 引用的引用方式：



打開編輯器（在這里我使用的是 VS Code編輯器），新建一個(gè)項(xiàng)目文件夾(demo)





將解壓后的字體圖標(biāo)文件夾（icon）直接放到demo目錄下





在demo文件夾下面新建一個(gè)html文件 demo.html



導(dǎo)入icon文件夾里面的外部樣式表

<link rel="stylesheet" href="./icon/iconfont.css">



iconfont.css 里面就是我們下載的字體圖標(biāo)的所有css樣式了，我們打開看看吧！

你會(huì)發(fā)現(xiàn)里面有一個(gè) iconfont類名（這里劃重點(diǎn)！后面要用），它是所有字體圖標(biāo)的公用樣式。





這時(shí)我們就可以在頁(yè)面中使用這些字體圖標(biāo)啦！上面我們只是導(dǎo)入了整個(gè)css樣式表，現(xiàn)在我們要針對(duì)性地把某個(gè)圖標(biāo)引用到html頁(yè)面中，并在網(wǎng)頁(yè)中顯示出來。

下面 我們就開始寫頁(yè)面的主體部分吧！



<p> 我有一個(gè)夢(mèng)想：能夠擁有一套 <span class="iconfont icon-home"></span> </p>

這里的span標(biāo)簽里面放的就是要用的某個(gè)字體圖標(biāo)了，你會(huì)發(fā)現(xiàn)它用了兩個(gè)class類名。

第一個(gè)是iconfont，也就是我前面劃的重點(diǎn)（到這里不明白的話，可以再回頭看看）

第二個(gè)是icon-home，這個(gè)類名從何而來呢？

來，繼續(xù)往下看，再次打開icon文件夾下的



話不多說，直接看圖



是不是對(duì)應(yīng)上啦！簡(jiǎn)單地說就是你要用那個(gè)圖標(biāo)就添加它的class類名。



到這里，恭喜你已經(jīng)學(xué)會(huì)了如何在網(wǎng)頁(yè)中插入字體圖標(biāo)啦！??！

那么，趕快運(yùn)行一下看看效果吧！



到這里是不是還滿足不了你的需求，會(huì)有這樣的疑問：如果是這樣的效果，跟一張圖片有什么區(qū)別呢？？？

當(dāng)然不是啦！

之所以叫做字體圖標(biāo)，顧名思義，它在網(wǎng)頁(yè)中就是一種字體的存在，不過它比普通字體長(zhǎng)得好看些有木有！

我們可以像更改文字樣式一樣去更改它的樣式，比如說 大小、顏色、陰影…



Symbol 引用方式還可以實(shí)現(xiàn)下面原圖標(biāo)的彩色效果哦！可以自己照著官方提供的步驟試試看





下面附上Font class引用方法的 源代碼 供參考

前面的步驟一定要看?。?！

如果前期工作沒做的話，直接用我的源代碼是實(shí)現(xiàn)不了的。



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字體圖標(biāo)</title>

    <link rel="stylesheet" href="./icon/iconfont.css">

    <style>

        .iconfont{

            font-size: 200px;

            color: palevioletred;

            text-shadow: 18px 17px 17px gray;

        }

    </style>

</head>

<body>

    <p>

        我有一個(gè)夢(mèng)想：能夠擁有一套

        <span class="iconfont icon-home"></span>

    </p>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

花費(fèi)了很長(zhǎng)時(shí)間整理出來的。

很簡(jiǎn)單是不是?。?！

看到這里還不會(huì)的話，建議重新再看一遍！



其中有錯(cuò)誤的話，還請(qǐng)指出，我會(huì)虛心接受并改正?。?！

————————————————

版權(quán)聲明：本文為CSDN博主「Humy.」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_42678796/article/details/104569773