CSS/HTML 知识补充

知识补充

选择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标签语义化一些。