用css实现列表菜单的效果

时间:2022-10-31 18:54:40
 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 </head>
 <body>
 <style type="text/css">
 a:hover{ background:blue; background-repeat:no-repeat;}   <!--鼠标放在链接上变颜色-->
 div.header
 {
 text-decoration:none;
 color:white;
 background-color:gray;
 clear:left;
 ;<!--去掉链接下划线-->
 }
 h1.header
 {text-decoration:none;<!--去掉链接下划线-->
 padding:8px;
 ;
 ;<!--去掉链接下划线-->
 }
 a{text-decoration:none;}
 </style>
 </head>
 <body>
 <!--加载链接-->

 <div class="header"><h1 class="header"><a href="/index.html">首页</a> <a href="/index.html"> 学习论坛</a> <a href="/index.html">学员问答</a><a href="/index.html"> IT圈子</a><a href="/index.html"> 实时课堂</a><a href="/index.html"> 客户端下载</a><a href="/index.html"> 帮助</a></h1>
 </div>
 <div id="menu">
 <ul>
 <li><a href="#">首 页</a></li>
 <li><a href="#">学习论坛</a></li>
 <li><a href="#">学员问答</a></li>
 <li><a href="#">IT圈子</a></li>
 <li><a href="#">实时课堂</a></li>
 <li><a href="#">客户端下载</a></li>
 <li><a href="#">帮助中心</a></li>
 </ul>
 </div>

 </body>
 </html>

用css实现列表菜单的效果