在程序开发中，标签ul与css样式实现菜单，也是时常用到的技能，这里给大家介绍2个实例：
标签ul与css样式实现菜单殊效实例1文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
如下图所示：文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
标签ul与css样式实现菜单殊效实例1文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
menu1.html网页代码如下：文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
<!DOCTYPE html PUBLIC &34;文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
&34;>文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
<html xmlns=&34; lang=&34; xml:lang=&34;>文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
<head>文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
<title>标签ul与css样式实现菜单殊效</title>文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
<meta http-equiv=&34; content=&34; />文章源自微观生活（93wg.com）微观生活-https://93wg.com/2778.html
<link rel=&34; type=&34; href=&34; />
</head>
<body>
<div id=&34;>
<ul>
<li><a href=&34; title=&34;>首页</a></li>
<li><a href=&34; title=&34;>产品介绍</a></li>
<li><a href=&34; title=&34;>热点举荐</a></li>
<li><a href=&34; title=&34;>行业动态</a></li>
<li><a href=&34; title=&34;>加盟咱们</a></li>
<li><a href=&34; title=&34;>联络咱们</a></li>
<li><a href=&&34;rightcorner&34;clear: left&mymenu{
border-top: 7px solid black;
margin: 0;
padding: 0;
}
mymenu ul{
margin-bottom: 1em;
margin-left: 7px;
}
mymenu ul li a{
float: left;
color: white;
font-weight: ;
padding: 2px 11px 7px 7px;
text-decoration: none;
}
mymenu ul li a:hover, selected{
color: white;
background-color: darkred;
}
rightcorner{
padding-right: 0;
padding-left: 8px;
}
标签ul与css样式实现菜单殊效实例2
如下图所示：
标签ul与css样式实现菜单殊效实例2
<!DOCTYPE html PUBLIC &34; &34;>
<html xmlns=&34;>
<head>
<meta http-equiv=&34; content=&34; />
<title>标签ul与css样式实现菜单殊效</title>
<style type=&34;>
*
{
font-size:13px;
font-weight:800;
text-decoration:none;
margin:0;
padding:0;
}
body
{
background:menu
{
list-style-type: none;
border:1px solid 000 url 0 0 repeat-x;
}
fff;
float:left;
}
fff;
line-height:30px;
padding:0 10px;
}
menu li.current
{
background:34;menu&34;&34;Index&34;&34;Produces&34;&34;Hot&34;&34;&34;&34;&34;&34;">联络咱们</a></li>
</ul>
</body>
</html>
看完代码实现后，大家是否觉得比较简单呀，赶紧来DIY吧。
以上就是微观生活（93wg.com）关于“标签ul与css样式实现菜单殊效实例”的详细内容，希望对大家有所帮助！
评论