0

Div の開始タグと終了タグを使用してコードをブロックしようとしています。

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

しかし、#header を使用して css でコーディングしようとすると、どのルールにも従わないのでしょうか? HTMLとCSSは初めてなので、無知なことをお許しください。

編集:これは、私を助けるために必要な必須の CSS です。それを忘れてすみません、また私はここに新しいです。

.header{ 
    width:300px; 
    height:300px;
    display:block; 
    margin: auto;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;}

最後の部分はヘルプ Web サイトからコピーされたもので、マウスがその上に置かれたときにフェードインおよびフェードアウトできるようになっています。「。」を変更しようとするたびに 「#」を使用すると、ルールが完全に無視されます。

4

2 に答える 2

1

CSS が含まれていないため、CSS が何であるかはわかりませんが、次のようなことをしようとしているという事実に言及していると思います。

#header {
    height:50px;
}

そして、何も起こっていません。これは、デフォルトで #header のオーバーフロー値が 'visible' であり、画像が非常に大きいため、オーバーフローして必要なだけのスペースを占有するためです。

これが発生したくない場合は、オーバーフローを別の値に変更する必要があります。たとえば、次のようになります。

#header {
    height:50px;
    overflow: hidden;
}

ヘッダーの高さ制限 50px を超えるコンテンツは非表示になります。

画像のサイズを変更しようとしている場合は、ヘッダーではなく、画像の高さ/幅の属性を設定してください。または、できれば、より適切なサイズの画像にリンクします。200x160 などに縮小するだけなら、1000x800 までの画像をロードしても意味がありません。

また、同じ名前の ID とクラスを持つこともおそらく悪い考えです。わかりやすくするために、クラス 'header' を使用して画像を取得して css スタイリングに従う場合は、

.header {
}

セレクターであり、そうではありません

#header {
}

CSS を投稿していただければ、あなたが間違っていると思われることに基づいて暗闇でのショット以外に、より関連性の高い回答を提供できます。

編集：

CSS セレクターに問題があるようですが、

#header {
}

次のようなヘッダーのIDを持つ要素を参照します。

<div id="header"></div>

一方、CSSセレクター

.header {
}

次のようなヘッダーのCLASSを持つ要素を参照します。

<div class="header"></div>

コードに戻ります

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

    #header { // these styles will apply to your div with ID header
    }

    .header { // these styles will apply to your image with the class header
    }

面倒に思えるかもしれませんが、CSS を初めて使用する場合は、セレクターについて読むことを強くお勧めします。これらは CSS で何かを行う上で非常に重要です。

ここにドキュメントがあります

第5.8.3章では、クラスセレクターについて説明しています

Chapter 5.9 で ID セレクターについて説明

（オフトピック）

あなたのリンクは間違っています。

 <a href="http://www.hugowolfdesigns.tumblr.com">

別のウェブサイトを指している場合、または単に

 <a href="/">

同じウェブサイトのホームページを指している場合

于 2013-09-02T15:50:12.673 に答える