制作一个类似的工具栏
制作效果如下：
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
ul{
list-style-type: none;/*去掉前面的小圆点*/
}
a{
background-color: cornflowerblue;/*设置背景颜色*/
float:left;/*设置横着排列*/
text-decoration: none;/*去掉链接的下划线*/
border: 1px solid whitesmoke;/*设置外边框*/
padding: 20px 50px;
font-size: 20px;/*设置字体大小*/
color: whitesmoke;/*设置字体颜色*/
font-family:"楷体";/*设置字体*/
}
a:hover{
background: aquamarine;
}
</style>
<body>
<ul>
<li><a href="">学校概况</a></li>
<li><a href="">院系设置</a></li>
<li><a href="">师资队伍</a></li>
<li><a href="">人才培养</a></li>
<li><a href="">科学研究</a></li>
<li><a href="">招生就业</a></li>
<li><a href="">人才招聘</a></li>
<li><a href="">交流合作</a></li>
</ul>
</body>
</html>