知识补充
选择ul中的第某一个li
ul li:nth-child(1) {} /*选中第一个li*/
ul li:nth-child(2) {} /*选中第二个li*/
ul li:nth-child(3) {} /*选中第三个li*/
/*....*/
disoplay:none;
- 设置元素不显示,也就是隐藏
- 可用作制作隐藏导航栏
- 将二级导航先设置为none,再在一级导航上添加效果:当鼠标移入,none变为block
- 可用作制作隐藏导航栏
opacity设置元素透明度
opacity:0;
0(透明)->1(不透明)
定位的元素一定会覆盖住没有定位的元素
防止过渡效果导致元素闪烁,给HTML加上overflow:hidden;
transform-orgin:x y z;
注意:z不能用单词如(center)只能用具体的数值(%/px);
对于3d效果的展示,一般井深perspective加载外层,而3d效果(transform-style:preserve-3d)加在外层:
<div> <!--加井深-->
<ul> <!--加3d效果-->
<li></li>
</ul>
</div>
背景图片和插入图片区别
- 背景图片不占位置,而插入图片占位置
- 插入图片权重比较高,会被搜索引擎搜入
让背景图片填满整个元素。
background-size:cover;
为什么网页中的小图标都是用i标签定义
这只是一个网站开发中一个不成形的默认规则而已,这样的话你当前网站中的所有小图标都可以用标签,前提是你的全局css文件中必须有一个样式:i{background:xxx.png},这张xxx.png是由很多小图标合成在一个大图上面的。这样你前端哪个页面要用哪些小图标的时候,你就直接用标签,只需要定义css background-position就行了。当然你也可以用s b,看你自己喜欢哪一种,只用i标签语义化一些。