製作一個類似的工具欄
製作效果如下：
附上代碼：
<!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>