我要自學網導航欄設計
阿新 • • 發佈：2021-01-19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
/*清除所有元素內外邊距*/
margin: 0;
padding: 0;
}
nav ul{
/*取消列表樣式*/
list-style: none;
margin: 0 auto;
}
nav{
/*設定導航欄*/
width: 1000px;
height: 40px;
margin: 100px auto;
padding: 0;
background-color: #363636;
}
nav ul li{
width: 100px;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
color: #ffffff;
font-size: 14px;
}
nav ul li a:hover{
/*用偽類選擇器設定滑鼠懸浮樣式*/
font-size: 16px;
color: #00aeff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a>電腦辦公</a></li>
<li><a>平面設計</a></li>
<li><a>室內設計</a></li>
<li><a>室外設計</a></li>
<li><a>影視動畫</a></li>
<li><a>機械設計</a></li>
<li><a>程式設計</a></li>
<li><a>工業自動</a></li>
<li><a>網頁設計</a></li>
<li><a>會計課程</a></li>
</ul>
</nav>
</body>
</html>