html - HTML/CSS: jQuery などのサイトでの横棒/デザイン

Question

単純なhtml/cssだと確信していますが、バーを何と呼ぶべきかわかりません（水平バーhtmlをグーグルで検索すると、常に水平ルールになります）。

http://jquery.com/には、ページのコンテンツからメニューを分離する上部を横切る灰色がかったバーがあります。自分だけの一台を作ってみたい。

score 3 · Accepted Answer

これを行うにはいくつかの方法があります。

jquery.com では、body タグが適用された背景画像の一部です。

背景が画像として下部に配置されたヘッダーセクションと、テキスト/コンテンツがその部分に重ならないようにする下部パディングを持つことができます。最後に、単色にしたい場合は、太い境界線を使用できます。これを行うには他にも多くの方法があると確信しています。

score 2 · Accepted Answer

最も簡単な解決策:

<!-- content above bar goes here -->
<div style="height:30px;background-color:lightgray;clear:both;" ></div>
<!-- content below bar goes here -->

バーの上に保持したい要素をフローティングしている場合に備えて、clear:both を実行します。

score 1 · Accepted Answer

デザインが十分に静的である場合、(私の意見では) 最良の方法は、ページの背景画像を使用する方法です。それ以外の場合は、正しい高さで div を作成し、その背景画像を適切な高さ/色/グラデーションプロパティを持つ非常に薄い (1 または 2 ピクセル) 画像に設定し、x 軸に沿って並べて表示します。

ブラウザーによってレンダリングが異なる可能性があるため、太い境界線の方法は避けます。

score 1 · Accepted Answer

body タグに適用されたBG 画像です。

body {
    background: #2a3139 url(../images/bg_home_tile_sml.jpg) repeat-x 50% 0;
}

IMO これは、この効果を達成するための最良の方法です。

4 に答える 4