一、知识点
1.导航栏悬停时，伪类发生偏移：
给伪类设置默认边框，颜色和背景色相同，悬停时就不会偏移。
2.悬停时光标变成小手：cursor:pointer;
3.超出部分隐藏：overflow:hidden;
4.边框阴影：box-shadow
例如：box-shadow: 5px 5px 25px silver;
5.边框设置为圆形：border-radius: 50%;
例如：（根据1-5点）
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.cat{
position: relative;
margin:0 auto;
width: 300px;
height:240px;
border-radius: 50%;
overflow: hidden;
box-shadow: 5px 5px 25px silver;
}
.cat>img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="cat">
<img src="./img/t0184adba068900b525.jpg" alt=""/>
</div>
</body>
</html>
运行结果：
6.什么是雪碧图?
答：雪碧图被运用在众多使用了很多小图标的网站上，相对于把每张小图标以.png格式文件的形式引用到网页上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。
雪碧图的优点：
（1）.将多张图片合并到一张图片中，可以减小图片的总大小。
（2）.将多张图片合并到一张图片后，只需要一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗。
7.vertical-align的使用。
vertical-align:middle行内垂直居中，要搭配display：inline-block（转换为行级元素/转换为块级元素）一起使用。
二、总结、归纳
1.做网页先分块。
2.子类要浮动必须全浮动。
3.计算仔细（块的宽高值)。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
