0

HTML/CSS でミニ障害に遭遇したようです。このクロスフェード テクニックをインデックスで使用しようとしましたが、うまくいきましたが、2 番目のレイアウトで使用しようとすると、画像を開いたときに表示されませんか? :(

レイアウト 2 の HTML は次のとおりです。

<!DOCTYPE html>

<html>
<head>

    <title>Welcome!</title>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
</head>

<body>
<img class="image5" src="../images/header.png" alt="header">
<a href="../index.html"><div id="cf" >
    <img class="bottom2" src="images/logo4.png" alt="logo4"/>
    <img class="top2" src="images/logo3.png" alt="logo3"/>
</div>

</body>
</html>

CSS は次のとおりです。

.image5 {
    position: absolute;
    top: 0px;
    left: 0px; 
    width: 1500px;
    height: 700px;
        }

 #cf {
  position:relative;
  top: 20px;
  left:20px;
  height:277px;
  width:277px;
}

 #cf img {
  position:absolute;
  left:0;
  opacity: 1;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

 #cf img.top2:hover {
  opacity:0;
}

バリデーターに通してみましたが、2 つのエラーが表示されました。

 - Error 1:

Line 20, Column 7: End tag for body seen, but there were unclosed elements.
</body>

 - Error 2:

Line 15, Column 24: Unclosed element a.
<a href="../index.html"><div id="cf">

それが何を意味するのかわかりません。すみません、まだまだ初心者です。^^;;

4

1 に答える 1

1

CSS はタグ#cfID を探し、そのimg中の を探しています。たぶん、それを台無しにしているのは不適切なネスティングです。検証エラーについては、リンク タグを閉じていません。<a href ...>で閉じる必要があります</a>。それを閉じてみて、それが役立つかどうかを確認してください。

于 2014-03-18T01:37:54.883 に答える