“每日一练”刚开始一天就遭到了一些阻力，似乎该改名叫"每周一练"ORZ。。。还是再逼迫自己坚持一下试试(ˇˍˇ) ～
本来每日一练只打算记界面设计和交互设计的内容，不过这几天赶任务做的是前端动效实现的内容，就先也记在这里。（简书这个编辑器怎么贴代码？只能手敲吗？好累orz）
-------------------------------------------分割线---------------------------------------------
效果图：（甲方说这个动效很不错，开心O(∩_∩)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>
关键代码：
#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;
}
/*不知道下面这个选择器叫伪类嵌套还是什么，这个的实现方法想了很久，最后被学习群里的大神一语道破*/
#nav ul li:hover img,#nav ul li img:hover{
-webkit-transform:rotate(360deg) scale(1.5); /*兼容webkit内核浏览器，如火狐*/
-moz-transform:rotate(360deg) scale(1.5); /*兼容Mozilla内核浏览器，如谷歌*/
-ms-transform:rotate(360deg) scale(1.5); /*兼容微软IE浏览器*/
-o-transform:rotate(360deg) scale(1.5); /*兼容Opera浏览器*/
}
这个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);
}
--------------------------------我是快乐的题尾分割线----------------------------------
还有最近一点题外的页面布局技巧也记一下：
1.无法实现图片在父元素中/页面水平居中？
比较好的解决办法：<img>标签是内联块状元素，可以在<img>外套一层<p>来实现，即
<p style="text-align:center"><img src="..."/></p>
（基础知识不扎实。练习得太少，以至于常用的知识点掌握不牢。）
2.通过问题1，复习：
①水平居中设置-行内元素
②水平居中设置-定宽块状元素
③水平居中设置-不定宽块状元素（方法一、二、三）
④垂直居中-父元素高度确定的单行文本
⑤垂直居中-父元素高度确定的多行文本
⑥隐性改变display类型
3.清除浮动：clear——解决网页塌陷问题（网页塌陷：父元素不含非浮动元素的时候，父元素塌陷，浮动元素溢出。）
解决思路：
在外围容器中添加一个不可见、不占位的内容的内容（文档流）。外围容器中有内容了，便可以自动判定高度，将浮动的元素包含进去，解决塌陷。
实现方法：（不用记，需要的时候Ctrl+C，Ctrl+V）
将父元素设置成clearfix类，并设置如下CSS样式：
.clearfix{zoom:1;}/*zoom属性：IE专用，这一句用于解决IE老版本中的塌陷问题*/
.clearfix:after{ /*为对象选择符（:after）：在对象被浏览器渲染后添加一些内容*/
content:"父元素内容";/*content里面随意写内容，一般写空格或点。配合伪对象*/
display:block;/*将内容转为块状元素*/
visibility:hidden;/*设置为不可见，但保留占位空间（物理空间）*/
height:0;/*将内容高度设置为0，消除其占位*/
clear:both;/*将添加进去的内容作为消除浮动的元素*/
}
