0

http://www.chacha.comのようなヘッダーを作成したい(移動せず、その幅と高さについてであり、その中に div を収めることができ、画像でなければなりません)

空白の html ドキュメントと空白の css ページから始めているので、現時点ではコードを記述していません。

私は今、これを行うために 2 日間続けて取り組んできました。

私はgimpを持っているので、誰かが完璧なヘッダーと完璧な背景サイズの画像サイズを教えてくれたら、さらに感謝します.

4

3 に答える 3

6

CSS:

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: url(yourimage.png) repeat-x;
}

<!--html -->
<div id="header"></div>

これで出発点が得られるはずです。レイアウトがどうあるべきかを正確に確認しないと、これ以上は言えません。

于 2012-08-09T19:50:58.900 に答える
1

探しているCSSプロパティはposition: fixed、ビューポートを基準にして要素を配置するプロパティです。これはポジショニングの良い内訳です：https ：//developer.mozilla.org/en-US/docs/CSS/position

この特定のケースでは、あなたが持っているのは、おおよそこれらの線に沿ったスタイルを持つ要素です：

#header_id {
    position: fixed;
    width: 100%;
    height: 35px;
}

高さを設定する必要はありませんが、固定要素にコンテンツがない限り、高さが指定されていないと折りたたまれます。彼らはまたdrop-shadow、きちんとしたフローティング効果を得るために要素にを付けたようです。

画像を内部に配置する場合は<img>、ヘッダー要素の内部に配置するかbackground-image、CSSのURLとして使用して配置します（ https://developer.mozilla.org/en-US/background-positionも参照） 。 docs / CSS / background-positionですが、このプロパティで特定しすぎることをしたい場合は、下部の互換性テーブルが重要です）。

これは、任意のブロックレベルの要素（またはdisplay:block設定されている任意の要素）で実行できます。あなたの例では、彼らはHTML5<header>タグを使用しています。あなたのページに適切<div>でなければ、aも機能します。<header>

FirefoxでFirebugアドオン（または他の最新のブラウザで同様の開発者コンソール）を使用することをお勧めします-ページ上の要素を右クリックして、ドロップダウンメニューから[要素の検査]を選択すると、マークアップとマークアップの両方の内訳を取得できます他のWebサイトがどのように構築されているかを確認するためのスタイリング。インターネットを閲覧しているときに何かを見て、「それは巧妙なトリックですが、どのように機能するのですか？」と考えるときに非常に便利です。

于 2012-08-09T20:00:16.510 に答える
0

全幅固定ヘッダーの場合

 header { 
    width:100%;
    background:green;
    height:60px;
    margin:-8px;
    position:fixed;
}

FOR NONFULL WIDTH FIXED HEADER
div を作成し、幅と高さを設定します (左右に設定することもできますfloat:left, float:right)。次に、この div に上記のコードを配置しますがmargin:-8px;、幅を div の幅に変更します。ここにテストがあります

于 2014-08-23T15:48:20.813 に答える