課程前言：
慕課網(wǎng) -- CSS3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過渡
header里的meta：
IE低版本不支持CSS3的新增屬性哦~所以乏梁，meta設(shè)置好，就告訴瀏覽器使用最新的渲染模式~
頁(yè)面框架：
頁(yè)面中使用radio來記錄挺身，只能有一個(gè)tab被選中，而且通過它的checked屬性，來判斷是否該radio是否選中蛤高。CSS3中，有:checked 來匹配某一項(xiàng)是否選中碑幅。
/*font-smoothing是CSS3的新增屬性戴陡，用戶設(shè)置字體的抗鋸齒或者光滑度的屬性。反鋸齒沟涨。*/? -webkit-font-smoothing:antialiased;??
overflow: hidden;超過隱藏恤批，設(shè)置在body中。
清除浮動(dòng)那么多裹赴，這個(gè)已經(jīng)夠用了：
元素隱藏有四種喜庞，那你要用哪一種？
再說選擇器：
動(dòng)畫對(duì)象的選擇,選擇器的中+,~后應(yīng)該跟的是并列的兄弟標(biāo)簽,否則無法找到.
/*后代選擇器（Ｅ Ｆ）棋返，不論Ｆ在Ｅ中有多少層關(guān)系*/
/*子元素選擇器(E>F) E>F所表示的是選擇了Ｅ元素下的所有子元素Ｆ*/
/*相鄰兄弟元素選擇器(E + F)延都，EF兩元素具有一個(gè)相同的父元素，而且Ｆ元素在Ｅ元素后面*/
/*通用兄弟選擇器（Ｅ ? Ｆ） 睛竣，相鄰兄弟選擇器僅選擇是元素的僅與其相鄰的后面元素（選中的僅一個(gè)元素）晰房；而通用兄弟元素選擇器，選中的是元素相鄰的后面兄弟元素射沟，*/
/*群組選擇器（selector1,selector2,...,selectorN）殊者，將具有相同樣式的元素分組在一起，每個(gè)選擇器之間使用逗號(hào)“验夯，”隔開猖吴，*/
結(jié)構(gòu)要語(yǔ)義化呢：
當(dāng)全屏移動(dòng)的時(shí)候，一定內(nèi)容挥转、容器的寬高與body的寬高一致距误，而且是相對(duì)位移簸搞，當(dāng)我們把 body 里的overflow：hidden 隱藏的時(shí)候，就可以看到右側(cè)的滾動(dòng)條了准潭。但我們實(shí)際中趁俊，是隱藏了滾動(dòng)條的。
scroll里定義left和top是給后續(xù)的滾動(dòng)提供位置參考寺擂。開啟3D會(huì)加速哦~CSS3中的動(dòng)畫三屬性之一，transform是說變形泼掠，比如怔软，可見容器的下移。translateY 的定義與 margin 不同哦择镇，margin是負(fù)值時(shí)挡逼，容器向上移動(dòng)；但 translateY 的值為負(fù)值時(shí)腻豌，向下移動(dòng)家坎，想一下坐標(biāo)系咯~
CSS3動(dòng)畫屬性之二是，transition轉(zhuǎn)換吝梅，它常與變形結(jié)合使用虱疏，一個(gè)給出起始位置，一個(gè)給出轉(zhuǎn)換動(dòng)畫苏携，比如做瞪，其中的那些屬性有動(dòng)畫，時(shí)間多少右冻，效果是淡入淡出么装蓬？
CSS的content：
content 屬性與 :before 及 :after 偽元素配合使用纱扭，來插入生成內(nèi)容矛物。
## content里可以放什么呢？ ##
文本值：content屬性跪但，可以使用文本值，比如 content:'我是外來文字哦'峦萎。
attr屬性值：比如屡久，標(biāo)簽的一些屬性值，方法是attr()爱榔，但當(dāng)使用attr()獲取標(biāo)簽屬性名的時(shí)候被环，千萬不要添加引號(hào)。
圖片的URL：比如详幽，content:url(logo.png);
content一般和:before,:after一起使用筛欢，用來生成內(nèi)容(img和input沒有該屬性)浸锨，content的內(nèi)容一般可以為以下四種：none： 不生成任何值。attr： 插入標(biāo)簽屬性值 url： 使用指定的絕對(duì)或相對(duì)地址插入一個(gè)外部資源（圖像版姑，聲頻柱搜，視頻或?yàn)g覽器支持的其他任何資源） string： 插入字符串。
## content還可以用作：計(jì)數(shù)器創(chuàng)建號(hào)碼內(nèi)容 ##
1. ol標(biāo)簽應(yīng)用counter-reset屬性剥险，li標(biāo)簽應(yīng)用counter-increment屬性聪蘸，值均為sectioncounter，再配合content屬性表制，以及counter計(jì)數(shù)器就可以實(shí)現(xiàn)遞增的效果了健爬。但content僅在CSS可用的現(xiàn)代瀏覽器下起作用。它沒有通過DOM使用么介，只是純粹的表象娜遵；在特殊情況下，從一個(gè)訪問的角度來看壤短，當(dāng)前屏幕閱讀不支持生成的內(nèi)容设拟。
2. 如果您指定了元素display:none，則content下的計(jì)數(shù)器不會(huì)產(chǎn)生遞增值鸽扁。
3. 當(dāng)然蒜绽，如果瀏覽器不支持此方法，那么就不會(huì)有數(shù)字出現(xiàn)桶现，您使用firebug或是之類的工具查看真實(shí)的HTML時(shí)不會(huì)看到產(chǎn)生的數(shù)值躲雅，不要有疑惑，content屬性動(dòng)態(tài)生成的內(nèi)容是純粹的裝飾而已骡和，虛假的表象相赁。
總之呢，但content僅在CSS可用的現(xiàn)代瀏覽器下起作用慰于。它沒有通過DOM使用钮科，只是純粹的表象；在特殊情況下婆赠，從一個(gè)訪問的角度來看绵脯，當(dāng)前屏幕閱讀不支持生成的內(nèi)容。
父容器和子元素的寬高一樣哦休里。
font-face：
主要是用于將自己定義的WEB字體嵌入到網(wǎng)頁(yè)中蛆挫。
transition 和 animation：
寫動(dòng)畫，一般需要思考兩個(gè)問題妙黍，寫給誰(shuí)悴侵，如何來定義？
動(dòng)畫的第一個(gè)問題拭嫁，作用于誰(shuí)可免？
動(dòng)畫的第二個(gè)問題抓于，如何來定義？
transition與animation使用場(chǎng)景：
1. transition適用于需要鍵盤鼠標(biāo)事件來觸發(fā)動(dòng)畫浇借，如輸入捉撮、點(diǎn)擊、滑過逮刨、切換
2. animation適用于無須任何事件觸發(fā)呕缭，一進(jìn)來就能看見動(dòng)畫，如開場(chǎng)動(dòng)畫
對(duì)啦修己，還有一個(gè)恢总，backwards，它是說當(dāng)動(dòng)畫有延遲的時(shí)候睬愤，就阻塞動(dòng)畫在最初的狀態(tài)片仿，即動(dòng)畫在開始播放之前，處于開始狀態(tài)尤辱。
注意個(gè)瀏覽器對(duì)transform,translate,animation的兼容性寫法.
1.transform規(guī)定了各種動(dòng)作,包括translate,但是引用的時(shí)候要用transition引入并設(shè)定時(shí)間,變化形式等..
2.animation里需要額外規(guī)定動(dòng)作@keyframes,變化前后的css寫在keyframes里
3.transition和animation是名詞,transform是動(dòng)詞方便記憶.
響應(yīng)式：
自適應(yīng)處理(響應(yīng)式)：
@media screen and (min-width:520px) and (max-width:800px){ } ?/*屏幕寬度在520到800之間的樣式*/
@media screen and (max-width:520px) {} /* 屏幕在 520px 之下時(shí)光督，應(yīng)用該樣式*/
總結(jié)：
縱然前端路漫漫阳距，縱然環(huán)境易改變，但都不要失去盼望结借，分享東方月的一篇《不失去盼望》：
有一種姿態(tài)筐摘，叫做盼望。它使得人們可以面對(duì)每一個(gè)并不知道會(huì)發(fā)生什么的明天而活著船老。我們總是希望明天會(huì)更好咖熟，卻又苦于并不了解明天。除非柳畔，是有一個(gè)生命的主宰馍管，他告訴我將會(huì)怎樣。
上帝并沒有把將要發(fā)生的一切都告訴我們薪韩，但造物主在人里面放進(jìn)一個(gè)天生的能力确沸，叫做盼望。心中的盼望俘陷，使得我們腳下的路繼續(xù)延伸罗捎，若失去盼望，路就斷了岭洲。
我們不得不承認(rèn)許多時(shí)候我們會(huì)陷入失望。
失望與失去盼望是不同的坎匿。失望是事情并沒有照著我的計(jì)劃實(shí)現(xiàn)盾剩，而失去盼望雷激，是因著與那位賜給人盼望的主隔絕了。
偶爾的失望告私，或許反而會(huì)促使我們更加尋求一件事屎暇，就是知道自己有限而凡事要更倚靠那位生命的主，他不僅是掌權(quán)的一位驻粟，更是愛我們根悼、定意要我們實(shí)現(xiàn)我們?nèi)松罹实拿ǖ哪且晃弧Ｒ虼瞬皇钦罩矣邢薜挠?jì)劃蜀撑，而是照著他無限寬廣的心意挤巡。
文章鏈接：不失去盼望-東方月
