摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來看，自己做得不夠，雖然也花了時(shí)間，不過能看出有敷衍的成分在。

百度的前端技術(shù)學(xué)院IFE，2016年就聽說了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過自己一個(gè)任務(wù)也沒完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開始做里面發(fā)布的任務(wù)（o(╯□╰)o，這次能這么積極是因?yàn)樽约耗亩螘r(shí)間工作閑，為了按捺自己躁動(dòng)的心，告訴自己抓住這次機(jī)會(huì)，去完成里面發(fā)布的任務(wù)，沉淀一下。）

現(xiàn)在這一期到4月24號(hào)就結(jié)束了，雖然完成的任務(wù)不算多，但是在這過程中還是學(xué)到了東西，中途差點(diǎn)因?yàn)閼校瑳]有堅(jiān)持下來，想了下自己當(dāng)時(shí)定的要求，想到應(yīng)該善始善終，就戰(zhàn)勝了一下‘懶’，最后成績是積分74，勉強(qiáng)入了下學(xué)霸的分享榜單（雖然并沒有什么卵用，不過還滿足了下自己的虛榮心┑(￣Д ￣)┍）），廢話了這么多，總結(jié)下自己學(xué)到的東西吧。

2.1.1 任務(wù)描述：http://ife.baidu.com/course/d...

2.1.2 實(shí)現(xiàn)過程：

原生的checkbox,radio樣式不能改變，所以 不再適用。這里要用到HTML5的label標(biāo)簽

HTML5中的label標(biāo)簽為 input 元素定義標(biāo)簽（label）， 標(biāo)簽的 for 屬性應(yīng)該等于相關(guān)元素的 id 元素，以便將它們捆綁起來。

如：

注意：
"for" 屬性可把 label 綁定到另外一個(gè)元素。請把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。

接著要把input元素設(shè)置為display:none;然后通過css將label設(shè)置為自定義的樣式

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    position: relative;
}

這是設(shè)置為外面的圓圈，里面的圓通過::after偽類設(shè)置

label::after {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 4px;
    left: 4px;
    z-index: 1;
    content: "";
}

如果是checkbox，外面是正方形，對(duì)應(yīng)里面是對(duì)鉤

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    position: relative;
}

"√"對(duì)鉤制作：

label::after {
    border: 2px solid #d73d32;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg); 
}

這里提一下偽類和偽元素的區(qū)分：

1）偽類：存在的意義是為了通過選擇器找到那些不存在于DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。 偽類由一個(gè)冒號(hào):開頭，冒號(hào)后面是偽類的名稱和包含在圓括號(hào)中的可選參數(shù)。

常用的偽類：

:active    向被激活的元素添加樣式。    
:focus    向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。    
:hover    當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。    
:link    向未被訪問的鏈接添加樣式。    
:visited    向已被訪問的鏈接添加樣式。    
:first-child    向元素的第一個(gè)子元素添加樣式。    
:checked 向選中的控件元素添加樣式

2）偽元素:偽元素在DOM樹中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）；

注意: css3為了區(qū)分偽類和偽元素，規(guī)定偽類前面有一個(gè)冒號(hào)，偽元素前面有兩個(gè)冒號(hào)

常用偽元素:

::before 為作用元素的第一個(gè)子節(jié)點(diǎn)插入dom中
::after 為作用元素的最后一個(gè)子節(jié)點(diǎn)插入dom中

同：都是通過選擇器為元素添加樣式

異：偽元素會(huì)創(chuàng)建一個(gè)元素，但不是真正的Html元素，偽類相當(dāng)于為一個(gè)元素創(chuàng)建一個(gè)class樣式

2.2.1 任務(wù)描述：http://ife.baidu.com/course/d...

2.2.2 實(shí)現(xiàn)過程：

先看下做出的效果：點(diǎn)我看看

1）關(guān)于圖片模糊（參考資料：來源）

主要用到CSS3 filter（濾鏡）屬性

語法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

blur(px) 給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設(shè)定值，則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長度值，但不接受百分比值。

所以圖片上hover時(shí)可以加一個(gè)這樣的效果：

 .wrap:hover .blur {
      transition: all .5s ease;
      filter: url(blur.svg#blur);  /* FireFox, Chrome, Opera */
      -webkit-filter: blur(10px); /* Chrome, Opera */
      -moz-filter: blur(10px);
      -ms-filter: blur(10px);    
      filter: blur(10px); 
      /*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);  IE6~IE9 */
    }

2) 關(guān)于邊框擴(kuò)展（參考資料：來源）

    /*形狀擴(kuò)展*/
    .border::before, .border::after {
      content:" ";
      display: block;
      position: absolute;
      width: 0;
      height: 0;  
      box-sizing: border-box;
      transition-property: height,width,left,top;
      transition-duration: 0.5s;
      transition-timing-function: ease-in;
    }
    .border::before {
      height: 100%;
      left: 50%;
    }
    .wrap:hover > .border::before {
      left: 0;
      width: 100%;
      border: 6px solid #000;
      border-left-color: transparent;
      border-right-color: transparent;
    }
    .border::after {
      width: 100%;
      top: 50%;
    }
    .wrap:hover > .border::after {
      height: 100%;
      top: 0;
      border: 4px solid #000;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }

主要通過border:6px solid #000這個(gè)屬性，當(dāng)width和height都設(shè)置為100%時(shí)，把左右或上下的border設(shè)置為transparent就可以實(shí)現(xiàn)::after和::before拼裝成長方形，兩邊都是從中間擴(kuò)展，所以最初left和top設(shè)置為50%；最后需要注意 transition-property: height,width,left,top;的設(shè)置。

3）文字漸變光影流動(dòng)動(dòng)畫（參考資料：來源）

.text-gradient {  
        display: inline-block;
        color: black;
        font-size: 10em;
        background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s infinite linear;
    }
    @-webkit-keyframes masked-animation {
        0%  { background-position: 0 0;}
        100% { background-position: -100% 0;}
    }

要注意的是：
①、-webkit-background-clip: text;
background-clip 屬性規(guī)定背景的繪制區(qū)域。
語法：

background-clip: border-box|padding-box|content-box;

值對(duì)應(yīng)于：背景被裁剪到邊框盒，內(nèi)邊距框，內(nèi)容框。
這里用到的text只適用于chrome瀏覽器。
②、background-size: 200% 100%;
讓背景圖片大小水平方向擴(kuò)大一倍，這樣background-position才有移動(dòng)與變化的空間。

2.3.1 任務(wù)描述：http://ife.baidu.com/course/d... （對(duì)應(yīng)后面有二、三、四、五）
2.3.2 實(shí)現(xiàn)過程：
Vue如何實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定，這個(gè)在之前有寫過一篇這樣的文章：http://www.cnblogs.com/wj204/...
雖然以前有研究過，不過這次跟著任務(wù)做的時(shí)候可以看出自己還是理解得不透徹，這里不再詳細(xì)分解了，自己在任務(wù)上也做了點(diǎn)筆記：http://ife.baidu.com/note/det...

2.4.1 任務(wù)描述：http://ife.baidu.com/course/d...
2.4.2 實(shí)現(xiàn)過程:
感覺自己挑了自己有點(diǎn)熟悉的任務(wù)，因?yàn)橹坝袑戇^一篇正則表達(dá)式的文章：https://segmentfault.com/a/11... (/ □ ) 當(dāng)作復(fù)習(xí)把，因?yàn)檫@些基礎(chǔ)知識(shí)掌握得并不牢固。

2.4.2.1 手機(jī)號(hào)碼匹配

/*
  電話號(hào)碼前三位規(guī)則:
  聯(lián)通:186 185 170 156 155 130 131 132
  移動(dòng):139 138 137 136 135 134 178 188 187 183 182 159 158 157 152 150 147
  電信:189 180 170 153 133
  第一位全是1
  第二位：3 4 5 7 8
  第三位:0 1 2 3 4 5 6 7 8 9
*/

所以正則表達(dá)式可以寫為：(/^1[34578][0-9]{9}$/g)

2.4.2.2 判斷輸入的字符串是否有相鄰重復(fù)單詞的正則表達(dá)式可寫為：/(b[a-zA-Z]+b)s+1b/g
解釋這個(gè)正則表達(dá)式：
①、 (b[a-zA-Z]+b) 是一個(gè)捕獲分組，它捕獲所有的單詞：

" asd sf  hello hello asd".match(/(b[a-zA-Z]+b)/g) // ["asd", "sf", "hello", "hello", "asd"]

②、s加了一個(gè)空格限制條件，所以最后一個(gè)單詞被排除：

" asd sf  hello hello asd".match(/(b[a-zA-Z]+b)s/g)  ["asd ", "sf ", "hello ", "hello "]

③、"1"后向引用：

" asd sf hello hello asd".match(/(b[a-zA-Z]+b)s+1b/g) ["hello hello"]

2.5.1 任務(wù)描述：http://ife.baidu.com/course/d...
2.5.2 實(shí)現(xiàn)過程：因?yàn)樽约褐坝袑戇^一些純css3實(shí)現(xiàn)的動(dòng)畫 http://www.cnblogs.com/wj204/...
所以選了這個(gè)任務(wù)，說實(shí)話，又“水分”了（捂臉哭）

額外技能點(diǎn)總結(jié)，緣起別人的提問 https://segmentfault.com/q/10...
想到之前看過的一篇文章 http://www.cnblogs.com/coco1s... （平時(shí)看些技術(shù)文章還是有用的，雖然當(dāng)時(shí)可能沒起什么作用，不過有個(gè)知識(shí)點(diǎn)印象。）

  

  

    213123123213123123213123123213123123213123123
  

將黑色的div框樣式改為粘性布局

效果：

收獲：

①、鞏固基礎(chǔ)知識(shí)    
②、css屬性應(yīng)用更加熟練，說實(shí)話，之前after和before偽元素自己用得不多，一般都會(huì)重新加標(biāo)簽來設(shè)置樣式，不過這里用過之后，自己簡直喜歡上了這兩個(gè)東西，感覺方便好多。
③、對(duì)Vue的動(dòng)態(tài)綁定數(shù)據(jù)原理理解加深。    
④、正則表達(dá)式，說實(shí)話，自己之前寫過那篇文章大多是理論，當(dāng)真正遇到正則表達(dá)式實(shí)踐時(shí)，有點(diǎn)傻了，需多練習(xí)。    
⑤、安定了下自己哪顆躁動(dòng)的心，如果工作上沒有什么事做，沒什么期盼，又正值金三銀四跳槽季，我就在想跳槽了，可是沒學(xué)到什么東西怎么走？茫然，焦慮，但是這些負(fù)情緒沒用，只會(huì)讓自己的狀態(tài)惡性循環(huán)，不如做點(diǎn)實(shí)事，哪怕是比較簡單的任務(wù)。還好自己堅(jiān)持了下，還好這段時(shí)間工作上有幾個(gè)任務(wù)，得到了些許鍛煉。

不足及改進(jìn)：

總結(jié)來看，自己做得不夠，雖然也花了時(shí)間，不過能看出有敷衍的成分在。也好久沒產(chǎn)出，雖然寫得并不怎么樣，不過還是想督促自己多總結(jié)，這對(duì)自己一定是有利的:)