0

画像 (href) にリンクを追加すると、メニュー スタイルが画像に影響します。紫色が Google 画像に影響していることに注意してください。

<!DOCTYPE html>
<html>
<head>
<style>
ul
{ float:left; width:100%; padding:0; margin:0; list-style-type:none;}
a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; 
padding:0.2em 0.6em; border-right:1px solid white; }
a:hover
{background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
body text
</p>
<a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif"

</body>
</html>
4

1 に答える 1

0

定義した CSS ルールは、ナビゲーション リンクと Google 画像を含む test.php リンクの両方に適用されます。そのルールでナビゲーション リンクのみをターゲットにする場合は、さまざまなアプローチがありますが、通常は、ナビゲーションを含む要素にクラスを適用してから、ナビゲーション リンクのルールを変更して、そのクラスが存在する場所にのみ適用します。このようなもの：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{ float:left; width:100%; padding:0; margin:0; list-style-type:none;}
ul.nav a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; 
padding:0.2em 0.6em; border-right:1px solid white; }
ul.nav a:hover
{background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul class="nav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
body text
</p>
<a href="test.php" target="_blank"><img src="http://www.google.se/images/google_80wht.gif"

</body>
</html>
于 2013-07-31T05:40:17.063 に答える