百度前端技术学院2017学习总结
一、前言
百度的前端技術(shù)學(xué)院IFE，2016年就聽(tīng)說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒(méi)完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開(kāi)始做里面發(fā)布的任務(wù)（o(╯□╰)o，這次能這么積極是因?yàn)樽约耗亩螘r(shí)間工作閑，為了按捺自己躁動(dòng)的心，告訴自己抓住這次機(jī)會(huì)，去完成里面發(fā)布的任務(wù)，沉淀一下。）
現(xiàn)在這一期到4月24號(hào)就結(jié)束了，雖然完成的任務(wù)不算多，但是在這過(guò)程中還是學(xué)到了東西，中途差點(diǎn)因?yàn)閼?#xff0c;沒(méi)有堅(jiān)持下來(lái)，想了下自己當(dāng)時(shí)定的要求，想到應(yīng)該善始善終，就戰(zhàn)勝了一下‘懶’，最后成績(jī)是積分74，勉強(qiáng)入了下學(xué)霸的分享榜單（雖然并沒(méi)有什么卵用，不過(guò)還滿(mǎn)足了下自己的虛榮心┑(￣Д ￣)┍）），廢話了這么多，總結(jié)下自己學(xué)到的東西吧。
二、完成任務(wù)總結(jié)
2.1 用背景圖和偽元素方式實(shí)現(xiàn)自定義checkbox，radio樣式
2.1.1 任務(wù)描述：http://ife.baidu.com/course/detail/id/23
2.1.2 實(shí)現(xiàn)過(guò)程：
原生的checkbox,radio樣式不能改變，所以<input type="checkbox" id="checkBox"> 不再適用。這里要用到HTML5的label標(biāo)簽
HTML5中的label標(biāo)簽為 input 元素定義標(biāo)簽（label）， 標(biāo)簽的 for 屬性應(yīng)該等于相關(guān)元素的 id 元素，以便將它們捆綁起來(lái)。
如：
<input type="checkbox" id="checkBox"> <label for="checkBox"></label>注意：
"for" 屬性可把 label 綁定到另外一個(gè)元素。請(qǐng)把 "for" 屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。
接著要把input元素設(shè)置為display:none;然后通過(guò)css將label設(shè)置為自定義的樣式
label {display: inline-block;width: 16px;height: 16px;border: 1px solid #d9d9d9;border-radius: 50%;position: relative; }這是設(shè)置為外面的圓圈，里面的圓通過(guò)::after偽類(lèi)設(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); }這里提一下偽類(lèi)和偽元素的區(qū)分：
1）偽類(lèi)：存在的意義是為了通過(guò)選擇器找到那些不存在于DOM樹(shù)中的信息以及不能被常規(guī)CSS選擇器獲取到的信息。 偽類(lèi)由一個(gè)冒號(hào):開(kāi)頭，冒號(hào)后面是偽類(lèi)的名稱(chēng)和包含在圓括號(hào)中的可選參數(shù)。
常用的偽類(lèi)：
:active 向被激活的元素添加樣式。 :focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式。 :hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。 :link 向未被訪問(wèn)的鏈接添加樣式。 :visited 向已被訪問(wèn)的鏈接添加樣式。 :first-child 向元素的第一個(gè)子元素添加樣式。 :checked 向選中的控件元素添加樣式2）偽元素:偽元素在DOM樹(shù)中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語(yǔ)言里的（可以理解為html源碼）；
注意: css3為了區(qū)分偽類(lèi)和偽元素，規(guī)定偽類(lèi)前面有一個(gè)冒號(hào)，偽元素前面有兩個(gè)冒號(hào)
常用偽元素:
::before 為作用元素的第一個(gè)子節(jié)點(diǎn)插入dom中 ::after 為作用元素的最后一個(gè)子節(jié)點(diǎn)插入dom中- 同：都是通過(guò)選擇器為元素添加樣式
- 異：偽元素會(huì)創(chuàng)建一個(gè)元素，但不是真正的Html元素，偽類(lèi)相當(dāng)于為一個(gè)元素創(chuàng)建一個(gè)class樣式
2.2 有趣的鼠標(biāo)懸浮模糊效果
2.2.1 任務(wù)描述：http://ife.baidu.com/course/detail/id/14
2.2.2 實(shí)現(xiàn)過(guò)程：
先看下做出的效果：點(diǎn)我看看
1）關(guān)于圖片模糊（參考資料：來(lái)源）
主要用到CSS3 filter（濾鏡）屬性
語(yǔ)法：
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)差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒(méi)有設(shè)定值，則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長(zhǎng)度值，但不接受百分比值。
所以圖片上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ò)展（參考資料：來(lái)源）
/*形狀擴(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;}主要通過(guò)border:6px solid #000這個(gè)屬性，當(dāng)width和height都設(shè)置為100%時(shí)，把左右或上下的border設(shè)置為transparent就可以實(shí)現(xiàn)::after和::before拼裝成長(zhǎng)方形，兩邊都是從中間擴(kuò)展，所以最初left和top設(shè)置為50%；最后需要注意 transition-property: height,width,left,top;的設(shè)置。
3）文字漸變光影流動(dòng)動(dòng)畫(huà)（參考資料：來(lái)源）
.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ū)域。
語(yǔ)法：
值對(duì)應(yīng)于：背景被裁剪到邊框盒，內(nèi)邊距框，內(nèi)容框。
這里用到的text只適用于chrome瀏覽器。
②、background-size: 200% 100%;
讓背景圖片大小水平方向擴(kuò)大一倍，這樣background-position才有移動(dòng)與變化的空間。
2.3 動(dòng)態(tài)數(shù)據(jù)綁定
2.3.1 任務(wù)描述：http://ife.baidu.com/course/detail/id/15 （對(duì)應(yīng)后面有二、三、四、五）
2.3.2 實(shí)現(xiàn)過(guò)程：
Vue如何實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定，這個(gè)在之前有寫(xiě)過(guò)一篇這樣的文章：http://www.cnblogs.com/wj204/p/6423478.html
雖然以前有研究過(guò)，不過(guò)這次跟著任務(wù)做的時(shí)候可以看出自己還是理解得不透徹，這里不再詳細(xì)分解了，自己在任務(wù)上也做了點(diǎn)筆記：http://ife.baidu.com/note/detail/id/1233
2.4 正則表達(dá)式入門(mén)
2.4.1 任務(wù)描述：http://ife.baidu.com/course/detail/id/29
2.4.2 實(shí)現(xiàn)過(guò)程:
感覺(jué)自己挑了自己有點(diǎn)熟悉的任務(wù)，因?yàn)橹坝袑?xiě)過(guò)一篇正則表達(dá)式的文章：https://segmentfault.com/a/1190000008766125 (/ □ ) 當(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á)式可以寫(xiě)為：(/^1[34578][0-9]{9}$/g)
2.4.2.2 判斷輸入的字符串是否有相鄰重復(fù)單詞的正則表達(dá)式可寫(xiě)為：/(b[a-zA-Z]+b)s+1b/g
解釋這個(gè)正則表達(dá)式：
①、 (b[a-zA-Z]+b) 是一個(gè)捕獲分組，它捕獲所有的單詞：
②、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 CSS3實(shí)現(xiàn)3D 輪播圖
2.5.1 任務(wù)描述：http://ife.baidu.com/course/detail/id/51
2.5.2 實(shí)現(xiàn)過(guò)程：因?yàn)樽约褐坝袑?xiě)過(guò)一些純css3實(shí)現(xiàn)的動(dòng)畫(huà) http://www.cnblogs.com/wj204/p/css3_demo.html
所以選了這個(gè)任務(wù)，說(shuō)實(shí)話，又“水分”了（捂臉哭）
2.6 position:sticky 實(shí)現(xiàn)粘性布局
額外技能點(diǎn)總結(jié)，緣起別人的提問(wèn) https://segmentfault.com/q/1010000008800350/a-1020000008801739
想到之前看過(guò)的一篇文章 http://www.cnblogs.com/coco1s/p/6402723.html （平時(shí)看些技術(shù)文章還是有用的，雖然當(dāng)時(shí)可能沒(méi)起什么作用，不過(guò)有個(gè)知識(shí)點(diǎn)印象。）
將黑色的div框樣式改為粘性布局
<div style="position: sticky;background:black;height:10px;width:10px;top:0;left:100%"></div>效果：
三、總結(jié)
收獲：
①、鞏固基礎(chǔ)知識(shí)
②、css屬性應(yīng)用更加熟練，說(shuō)實(shí)話，之前after和before偽元素自己用得不多，一般都會(huì)重新加標(biāo)簽來(lái)設(shè)置樣式，不過(guò)這里用過(guò)之后，自己簡(jiǎn)直喜歡上了這兩個(gè)東西，感覺(jué)方便好多。
③、對(duì)Vue的動(dòng)態(tài)綁定數(shù)據(jù)原理理解加深。
④、正則表達(dá)式，說(shuō)實(shí)話，自己之前寫(xiě)過(guò)那篇文章大多是理論，當(dāng)真正遇到正則表達(dá)式實(shí)踐時(shí)，有點(diǎn)傻了，需多練習(xí)。
⑤、安定了下自己哪顆躁動(dòng)的心，如果工作上沒(méi)有什么事做，沒(méi)什么期盼，又正值金三銀四跳槽季，我就在想跳槽了，可是沒(méi)學(xué)到什么東西怎么走？茫然，焦慮，但是這些負(fù)情緒沒(méi)用，只會(huì)讓自己的狀態(tài)惡性循環(huán)，不如做點(diǎn)實(shí)事，哪怕是比較簡(jiǎn)單的任務(wù)。還好自己堅(jiān)持了下，還好這段時(shí)間工作上有幾個(gè)任務(wù)，得到了些許鍛煉。
不足及改進(jìn)：
總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。也好久沒(méi)產(chǎn)出，雖然寫(xiě)得并不怎么樣，不過(guò)還是想督促自己多總結(jié)，這對(duì)自己一定是有利的:)
轉(zhuǎn)載于:https://www.cnblogs.com/wj204/p/6777759.html
總結(jié)
以上是生活随笔為你收集整理的百度前端技术学院2017学习总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 第三次课程作业
- 下一篇： day1 of python