CSS製作簡單的縱向選單
阿新 • • 發佈：2018-10-31
1.先寫一個列表，建立選單的結構
<span style="font-size:14px;"><span style="font-size:14px;"><div class="menu"> <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> </ul> </div></span></span>
2.隱藏標籤li的預設樣式
<span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu ul {list-style-type:none;}
</style></span></span>3.調整外部DIV和選單標籤li的高度和寬度，並且取消連結的下劃線，使選單ul和外部DIV的邊界屬性值為0
<span style="font-size:14px;"><span style="font-size:14px;"><style> .menu {width:100px;} .menu ul {padding:0px; list-style-type:none;} .menu ul li {width:100px; height:35px;} .menu ul li a {text-decoration:none;} </style></span></span>
4.接下來美化選單的樣式，將選單的背景設為藍色，字型顏色設為白色，字型大小為14px，字型型別根據自己的喜好
<span style="font-size:14px;"><span style="font-size:14px;"><style> .menu {width:100px; background:#0099FF; height:210px; font-size:14px; font-family: "微軟雅黑";} .menu ul {padding:0px; list-style-type:none;} .menu ul li {width:100px; height:35px; line-height:35px; text-align:center;} .menu ul li a {text-decoration:none; color:#fff;} </style></span></span>
效果圖如下：
5.最後，我們所要設定的就是滑鼠移入選單（:hover）、滑鼠點選選單（:active）、滑鼠選中選單（:focus）的樣式，這就需要用到CSS的偽類
<span style="font-size:14px;"><span style="font-size:14px;"><style>
.menu {width:100px; background:#0099FF; height:210px; font-size:14px; font-family: "微軟雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff; display:block;}
.menu ul li a:hover {background:#fff; color:#000;}
.menu ul li a:active {background:#fff; color:#000;}
.menu ul li a:focus {background:#fff; color:#000;}
</style></span></span>最終效果圖如下：
7.最終的程式碼：
<span style="font-size:14px;"><span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style>
.menu {width:100px; background:#0099FF; height:210px; font-size:14px; font-family: "微軟雅黑";}
.menu ul {padding:0px; list-style-type:none;}
.menu ul li {width:100px; height:35px; line-height:35px; text-align:center;}
.menu ul li a {text-decoration:none; color:#fff; display:block;}
.menu ul li a:hover {background:#fff; color:#000;}
.menu ul li a:active {background:#fff; color:#000;}
.menu ul li a:focus {background:#fff; color:#000;}
</style>
</head>
<body>
<div class="menu">
<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>
</ul>
</div>
</body>
</html>
</span></span>