标签ul与css样式实现菜单特效实例

2019-11-22

加入收藏

在程序开发中，标签ul与css样式实现菜单，也是经常用到的技巧，这里给大家介绍2个实例：

标签ul与css样式实现菜单特效实例1

如下图所示：

标签ul与css样式实现菜单特效实例1

menu1.html网页代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>标签ul与css样式实现菜单特效</title>

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

css.css代码如下：

#mymenu{

border-top: 7px solid black;

margin: 0;

padding: 0;

}

#mymenu ul{

margin: 0;

margin-left: 15px;

float: left;

padding-left: 10px;

font: 12px 宋体;

background-color: black;

}

* html #mymenu ul{

margin-bottom: 1em;

margin-left: 7px;

}

#mymenu ul li{

display: inline;

}

#mymenu ul li a{

float: left;

color: white;

font-weight: ;

padding: 2px 11px 7px 7px;

text-decoration: none;

}

#mymenu ul li a:visited{

color: white;

}

#mymenu ul li a:hover, #mymenu ul li a#selected{

color: white;

background-color: darkred;

}

#mymenu ul li a#rightcorner{

padding-right: 0;

padding-left: 8px;

}

标签ul与css样式实现菜单特效实例2

如下图所示：

标签ul与css样式实现菜单特效实例2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>标签ul与css样式实现菜单特效</title>

{

font-size:13px;

font-weight:800;

text-decoration:none;

margin:0;

padding:0;

}

body

{

background:#ddd;

}

#menu

{

list-style-type: none;

border:1px solid #fff;

margin:50px auto;

width:770px;

height:30px;

overflow:hidden;

background:#000 url(a.png) 0 0 repeat-x;

}

#menu li

{

border-right:1px solid #fff;

float:left;

}

#menu li a

{

display:block;

text-align:center;

color:#fff;

line-height:30px;

padding:0 10px;

}

#menu li a:hover,#menu li.current

{

background:#fff url(b.png) 0 0 repeat-x;

}

</style>

</head>

<body>

</ul>

</body>

</html>

看完代码实现后，大家是不是觉得比较简单呀，赶快来diy吧。