关于网页a:hover问题_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:04:411276浏览
现在我做的效果是这样
但是我现在想要的效果是这样
CSS代码如下
[img=http:/
a{ color:#FFFFFF; text-decoration:none;} a:hover{ background-color:#F71469; text-decoration:none;background-image:none;} .mainNav{background:#ff478c; font-size:18px; height:45px; line-height:12px; overflow:hidden;} .mainNav ul{list-style:none; list-style-position:outside; list-style-image:none;} .mainNav ul li{ float:left;} .mainNav ul li a{padding:0 30px; text-decoration:none; text-align:center;} HTML代码
<body> <div class="mainNav"> <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> <li><a href="#">尚风</a></li> <li><a href="#">尚娱</a></li> <li><a href="#">瘦身</a></li> <li><a href="#">星座</a></li> </ul> </div></body>
到底该怎么整呀
回复讨论(解决方案)
<!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>无标题文档</title><style> a{ color:#FFFFFF; text-decoration:none;} a:hover{ background-color:#F71469; text-decoration:none;background-image:none;} .mainNav{background:#ff478c; font-size:18px; height:45px; overflow:hidden;padding-left:20px;} .mainNav ul{list-style:none; list-style-position:outside; list-style-image:none; margin:0;padding:0;} .mainNav ul li{ float:left;} .mainNav ul li a{padding:0 30px; text-decoration:none; text-align:center; display:block;line-height:45px;height:45px;}</style></head><body><div class="mainNav"> <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> <li><a href="#">尚风</a></li> <li><a href="#">尚娱</a></li> <li><a href="#">瘦身</a></li> <li><a href="#">星座</a></li> </ul> </div></body></html> 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn