关于网页a:hover问题_html/css_WEB-ITnose-html教程-PHP中文网

关于网页a:hover问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:04:41

原创

1593人浏览过

现在我做的效果是这样

但是我现在想要的效果是这样

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>

登录后复制

到底该怎么整呀

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

回复讨论(解决方案)

<!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>

登录后复制