1、垂直菜单
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>垂直菜单</title>
<style>
*{ margin:0px;padding:0; font-size:14px;}
ul{ list-style:none;width:100px;}
a{ text-decoration:none;display:block;height:30px;line-height:30px; width:100px; background-color:#ccc; margin-bottom:1px; text-align:center;}
a:hover{ background-color:#F60;color:#fff;}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
2、水平菜单
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>水平菜单</title>
<style>
*{ margin:0px;padding:0; font-size:14px;}
ul{ list-style:none;}
li{float:left;}
a{ text-decoration:none;display:block;height:30px;line-height:30px; width:100px; background-color:#ccc; margin-bottom:1px; text-align:center;}
a:hover{ background-color:#F60;color:#fff;}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
3、圆角菜单
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>水平菜单</title>
<style>
*{ margin:0px;padding:0; font-size:14px;}
ul{ list-st
最低0.47元/天 解锁文章
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
