ホームページ >ウェブフロントエンド >htmlチュートリアル >Web ページについて: ホバー問題_html/css_WEB-ITnose
Web ページについて: ホバー問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:04:411281ブラウズ
今あるエフェクトはこんな感じです
でも今欲しいエフェクトはこんな感じです
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 までご連絡ください。