0

ヘッダー、左、右、フッターの 4 つの部門があります。ヘッダーを左ヘッダーと右ヘッダーの 2 つのセクションに再度分割したいと思います。右のヘッダーでは、画像を同じセクションに保持したいので、ホームなど、私たちについての他のオプションについて言及したいと思います。一方、左部門にはテキストが必要です。

HTML と CSS を使用してどのように作成できますか? 以下は、HTML と CSS のスニペットです。

 <html>
 <head>
  <title>Search Engine Title Goes Here</title>
  <link rel="stylesheet" type="text/css" href="style1.css">
  </head>
  <body>
  <div id="container"> </div>
  <div id="header">
    <div id="header-left-container">
    <h1>heading1,<br> heading2 and <br>heading3</h1>
    </div>
    <div id=header-right-container>
    <img border="0" src="tra.jpg"  alt="drug"align="right" width="750" height="150">
    </div>
    </div>
   <div id="sidebar"> Left </div>
   <div id="content"> <p></p></div>
   <div id="footer"> </div>
   </body>
   </html>

CSS コード:

  body {background: #ffffff; margin: 0; padding: 0;}
  a {color: #2b2bf6;}

  #container
  {width: 900px;
   margin: 0;
   padding: 0;
   background: #dddddd;}

   #header
   {width:1000;
   height: 150px;
   margin: 0;
   padding: 0;
   border: 0;
   background: #FFFFA3;}

   #sidebar
   {width: 200px;
   height: 400px;
   margin: 0;
   padding: 0;
   border: 0;
   float: left;
   background: #f0e811;}

  #content
  {width: auto;
  height: 400px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  background: #8be0ef;}

  #footer
  {width: auto;
  height: 70px;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  background: #000000;
  clear:both;}

Web制作初心者ですので、よろしくお願いします。

4

3 に答える 3

1

HTML:

  • 必ずクラス名を引用してください
  • 空の div 要素がある場合は、それら&nbsp;の中に追加することで、より予測可能な動作を見つけることができます
  • img や br などのタグは自己終了にする必要があります ( <img ... />and<br /> ではなく<img ...>and <br>)
  • インデントの一貫性を保つようにしてください。これにより、コードの保守とデバッグが容易になります
  • 属性を使用して img 要素を揃えようとするよりも、CSS スタイルを使用することをお勧めします。
  • 属性を使用して img 要素の境界線を削除しようとするよりも、CSS スタイルを使用することをお勧めします。
  • 親要素 (#header-right-container) がその位置を決定するため、画像要素の配置は機能しません。
  • コンテナー div で他のすべての要素をラップするかどうかを確認します。その場合は、ヘッダー div よりも 100 ピクセル小さいため、幅も確認してください。

これにより、次の HTML コードが残ります。

<div id="container">&nbsp;</div>
<div id="header">
    <div id="header-left-container">
        <h1>heading1, <br />heading2 and <br />heading3</h1>
    </div>
    <div id="header-right-container">
        <img src="tra.jpg" alt="drug" width="750" height="150" />
    </div>
</div>
<div id="sidebar">Left</div>
<div id="content"><p>&nbsp;</p></div>
<div id="footer">&nbsp;</div>

CSS:

  • 幅に単位が割り当てられていることを確認してください (たとえば、width: 1000px;
  • Dan Goodspeed が提案したように、フロートを子ヘッダー クラスに追加します。
  • メンテナンスとデバッグを容易にするためにインデントの一貫性を保つ

提案が実装されたクリーンアップされたコードは次のとおりです。 http://jsfiddle.net/fD3dN/

于 2013-11-06T10:38:08.663 に答える
0

このペンで HTML と CSS を簡略化しましたhttp://cdpn.io/CgBIuまた、コンテナーが下のコードのラッパーであるという前提で書きました。

CSS 内ですべてのスタイリングを行い、HTML を非常にシンプルに保っていることがわかります。これにより、ファイル サイズが小さくなり、将来的にページの読み込みが速くなります。前述のように、ID 名に「」が欠落しているなどの欠陥がないかコードを確認してください。

セルフ クロージング タグは、使用している Doctype によって異なりますが、/> で閉じることをお勧めします。

両方の要素にフロートを追加する必要はありません。フロートをサイドバーに追加すると、コンテンツがその横に配置されます。必要のない余分なコードを書く必要はありません。

于 2013-11-06T11:24:39.740 に答える
0

スタイリングには CSS のみを使用し、border="0"、width="750" などは使用しないでください。HTML で ID を引用することを忘れないでください。header-right-container を引用するのを忘れているようです。また、CSS では、数値が 0 でない場合、#header 幅から省略した単位を指定する必要があります。あなたのコードを見ると、あなたが抱えている問題は、左右のヘッダーが重なって表示されていることだと思います。内容によって扱い方は色々ありますが、CSSで参考になれば…

 #header-left-container { float:left;}
 #header-right-container { float:right;}
于 2013-11-06T10:10:19.160 に答える