在程序开发中，标签ul与css样式实现菜单，也是经常用到的技巧，这里给大家介绍2个实例：标签ul与css样式实现菜单特效实例1如下图所示：标签ul与css样式实现菜单特效实例1menu1.html网页代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312"><head><title>标签ul与css样式实现菜单特效</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" type="text/css" href="css.css" /></head><body><div id="mymenu"><ul><li><a href="" title="">首页</a></li><li><a href="" title="">产品介绍</a></li><li><a href="" title="">热门推荐</a></li><li><a href="" title="">行业动态</a></li><li><a href="" title="">加盟我们</a></li><li><a href="" title="">联系我们</a></li><li><a href="#" id="rightcorner"> </a></li></ul></div><br style="clear: left" /></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"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>标签ul与css样式实现菜单特效</title> <style type="text/css"> * { 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 id="menu"> <li><a href="" title="Index">首页</a></li> <li><a href="" title="Produces">产品介绍</a></li> <li><a href="" title="Hot">热门推荐</a></li> <li><a href="" title="">行业动态</a></li> <li><a href="" title="">加盟我们</a></li> <li><a href="" title="">联系我们</a></li> </ul></body></html>看完代码实现后，大家是不是觉得比较简单呀，赶快来DIY吧。
本文出自快速备案，转载时请注明出处及相应链接。
