??????? “每日一練”剛開(kāi)始一天就遭到了一些阻力，似乎該改名叫"每周一練"ORZ。。。還是再逼迫自己堅(jiān)持一下試試(ˇ?ˇ) ～
??????? 本來(lái)每日一練只打算記界面設(shè)計(jì)和交互設(shè)計(jì)的內(nèi)容，不過(guò)這幾天趕任務(wù)做的是前端動(dòng)效實(shí)現(xiàn)的內(nèi)容，就先也記在這里。（簡(jiǎn)書(shū)這個(gè)編輯器怎么貼代碼？只能手敲嗎？好累orz）
-------------------------------------------分割線(xiàn)---------------------------------------------
效果圖：（甲方說(shuō)這個(gè)動(dòng)效很不錯(cuò)，開(kāi)心O(∩_∩)O~）
思路：通過(guò)偽類(lèi)實(shí)現(xiàn)鼠標(biāo)移入和移出的效果。
···
#nav ul li:hover img,#nav ul li img:hover{
-webkit-transform:rotate(360deg) scale(1.2);? /*兼容Chrome*/
-moz-transform:rotate(360deg) scale(1.2);? ? ? /*兼容Firefox*/
-ms-transform:rotate(360deg) scale(1.2);? ? ? /*兼容IE*/
-o-transform:rotate(360deg) scale(1.2);? ? ? ? /*兼容Opera*/
}
···
圖片放在list中：
<div id="nav">
???? <ul>
?????????? <li><img src="/images/1.png"></li>
?????????? <li><img src="/images/2.png"></li>
?????????? ......
?? </ul>
</div>
關(guān)鍵代碼：
#nav ul li img{
top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:2;position:absolute;
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
}
/*不知道下面這個(gè)選擇器叫偽類(lèi)嵌套還是什么，這個(gè)的實(shí)現(xiàn)方法想了很久，最后被學(xué)習(xí)群里的大神一語(yǔ)道破*/
#nav ul li:hover img,#nav ul li img:hover{? ? ? ? ? ? ? ? ? ??? ? ? ? ? ? ? ? ?
-webkit-transform:rotate(360deg) scale(1.5);?????????? /*兼容webkit內(nèi)核瀏覽器，如火狐*/
-moz-transform:rotate(360deg) scale(1.5);????????????? /*兼容Mozilla內(nèi)核瀏覽器，如谷歌*/
-ms-transform:rotate(360deg) scale(1.5);??????????????? /*兼容微軟IE瀏覽器*/
-o-transform:rotate(360deg) scale(1.5);????????????????? /*兼容Opera瀏覽器*/
}
這個(gè)demo還給<li>加了效果：
#nav ul li:before{
content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-moz-transform:rotate(60deg);
}
#nav ul li:after{
content:"";height:105px;width:180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;z-index:1;
transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-moz-transform:rotate(-60deg);
}
--------------------------------我是快樂(lè)的題尾分割線(xiàn)----------------------------------
還有最近一點(diǎn)題外的頁(yè)面布局技巧也記一下：
1.無(wú)法實(shí)現(xiàn)圖片在父元素中/頁(yè)面水平居中？
比較好的解決辦法：<img>標(biāo)簽是內(nèi)聯(lián)塊狀元素，可以在<img>外套一層<p>來(lái)實(shí)現(xiàn)，即
<p style="text-align:center"><img src="..."/></p>
（基礎(chǔ)知識(shí)不扎實(shí)。練習(xí)得太少，以至于常用的知識(shí)點(diǎn)掌握不牢。）
2.通過(guò)問(wèn)題1，復(fù)習(xí)：
①水平居中設(shè)置-行內(nèi)元素
②水平居中設(shè)置-定寬塊狀元素
③水平居中設(shè)置-不定寬塊狀元素（方法一、二、三）
④垂直居中-父元素高度確定的單行文本
⑤垂直居中-父元素高度確定的多行文本
⑥隱性改變display類(lèi)型
3.清除浮動(dòng)：clear——解決網(wǎng)頁(yè)塌陷問(wèn)題（網(wǎng)頁(yè)塌陷：父元素不含非浮動(dòng)元素的時(shí)候，父元素塌陷，浮動(dòng)元素溢出。）
解決思路：
在外圍容器中添加一個(gè)不可見(jiàn)、不占位的內(nèi)容的內(nèi)容（文檔流）。外圍容器中有內(nèi)容了，便可以自動(dòng)判定高度，將浮動(dòng)的元素包含進(jìn)去，解決塌陷。
實(shí)現(xiàn)方法：（不用記，需要的時(shí)候Ctrl+C，Ctrl+V）
將父元素設(shè)置成clearfix類(lèi)，并設(shè)置如下CSS樣式：
.clearfix{zoom:1;}/*zoom屬性：IE專(zhuān)用，這一句用于解決IE老版本中的塌陷問(wèn)題*/
.clearfix:after{?? /*為對(duì)象選擇符（:after）：在對(duì)象被瀏覽器渲染后添加一些內(nèi)容*/
?content:"父元素內(nèi)容";/*content里面隨意寫(xiě)內(nèi)容，一般寫(xiě)空格或點(diǎn)。配合偽對(duì)象*/
display:block;/*將內(nèi)容轉(zhuǎn)為塊狀元素*/
visibility:hidden;/*設(shè)置為不可見(jiàn)，但保留占位空間（物理空間）*/
height:0;/*將內(nèi)容高度設(shè)置為0，消除其占位*/
clear:both;/*將添加進(jìn)去的內(nèi)容作為消除浮動(dòng)的元素*/
}
