欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

关于ul制作导航菜单图文实例

程序员文章站 2022-05-02 20:12:38
...
首先上图,最终效果:

关于ul制作导航菜单图文实例

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/new_file.css?1.1.11" />
</head>
<body>
<div id="qwe">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu Menu Menu</a></li>
<li><a href="#">Menu Menu</a></li>
</ul>
</div>
</body>
</html>

CSS代码:


#qwe{
width: 200px;
font-family: "微软雅黑";
margin: 50px;
}
#qwe ul{
list-style-type: none;
padding: 0;
}
#qwe ul li a{
text-decoration: none;
display: block;
width: 200px;
height: 25px;
border-left: 10px solid #333333;
border-right: 1px solid #666666;
border-bottom: 1px solid #555555;
padding-left: 3px;
margin-bottom: 1px;
}
#qwe ul li a:link,#qwe ul li a:visited{
color: crimson;
background-color: #999999;
}
#qwe ul li a:hover{
color: green;
background-color: #777777;
}
#qwe ul li a:active{
color: darkorange;
}

备注:其中包含伪类的设置

以上就是关于ul制作导航菜单图文实例的详细内容,更多请关注其它相关文章!