CSS小练习，先看效果图
通过这个练习还熟悉了iconfont图标的使用。步骤如下
1.到iconfont搜索想要的图片，加入购物车；
2.选中所有需要下载的图标（最好将所有需要的图标放在一个项目中），点击下载
3.下载得到的是一个压缩包，解压缩拿到文件夹。文件夹中内容如下图
4.在你需要使用图标的文件内引入iconfont样式文档，上图红线文档。
5.添加span标签，class设置为iconfont 以及你要使用的图标的名字。图标名字可以在文件夹的demo_index页面中查看。
6.设置span标签内容为对应图标的字体编码，编码见demo_index页面。
7.完成。如果想要调整大小可以在iconfont样式中统一调整，也可以根据需要个性化调整。
例子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mobile Phone Navigator</title>
<link rel="stylesheet" href="../iconfont/font_3ckwb7a4b3w/iconfont.css">
<style>
*{
box-sizing: border-box;
}
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: rgb(178,135,190);
}
.phone{
width: 350px;
height: 600px;
border: 3px solid #fff;
border-radius: 15px;
background-color: white;
overflow: hidden;
}
.imgContainer{
width: 100%;
height: 540px;
background-size: cover;
overflow: hidden;
}
.content{
display: none;
}
.content.show{
display: block;
}
nav{
width: 100%;
height: 60px;
}
nav ul{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.item{
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
cursor: pointer;
}
.item:hover,
.item.active{
color:rgb(178,135,190);
}
.item p{
padding: 0;
font-size: 10px;
margin: 0;
}
</style>
</head>
<body>
<div class="phone">
<div class="imgContainer">
<img src="../images/sunnybeach.jpg" alt="homw" class="content show">
<img src="../images/castle.jpg" alt="work" class="content">
<img src="../images/sunsets0.jpg" alt="book" class="content">
<img src="../images/boys.jpg" alt="about us" class="content">
</div>
<nav>
<ul>
<li class="item active">
<span class="iconfont home-filling"></span>
<p>Home</p>
</li>
<li class="item">
<span class="iconfont workbench_fill"></span>
<p>Work</p>
</li>
<li class="item">
<span class="iconfont book"></span>
<p>Book</p>
</li>
<li class="item">
<span class="iconfont 关于我们ICON"></span>
<p>About us</p>
</li>
</ul>
</nav>
</div>
<script>
const imgList=document.querySelectorAll(".content");
const items=document.querySelectorAll(".item");
//点击item的时候先遍历移除所有item身上的active属性和所有img的show属性，
// 然后在单击的item身上添加active样式，对应img添加show样式。这个对应由index进行对应
items.forEach((item,index)=>{
item.addEventListener("click",()=>{
hideAllImg();
hideAllItem();
item.classList.add("active");
imgList[index].classList.add("show");
});
});
function hideAllImg() {
imgList.forEach(item=>{item.classList.remove("show")});
}
function hideAllItem() {
items.forEach(item=>{item.classList.remove("active")});
}
</script>
</body>
</html>
学过选择器之后加上这两次的练习，对选择器的使用逐渐熟悉了。路漫漫其修远兮，吾将上下而求索~