0

を。画像 (960x7) b. div (幅:960、パディング:10)

(a) を上から 50px 中央に配置したいと思います。(b) を (a) の真下にスペースなしで配置したいと考えています。

私のCSSは次のとおりです。

@charset "utf-8";
* {margin:0;padding:0;}
body {background-color:#999;}
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

私のHTMLは次のとおりです。

<body>
<div class="pagetop" />
<div class="page">
<p>Warning <a href="#">sign</a>, warning sign...I see it but I...pay it no mind.</p>
</div>

灰色の背景に丸みを帯びたエッジを持つ白いコンテナーを作成しようとしています。どうすればこれを簡単かつインテリジェントに行うことができますか?

4

3 に答える 3

1

丸みを帯びたエッジについては、この質問を確認してください。

CSSの丸みを帯びた角

そして、オブジェクトの配置については、次のようなものを使用します。

topimage {
   position: absolute;
   top: 50px;
   text-algin: center;
}
于 2009-07-15T18:09:02.333 に答える
0

要素の間にマージンを入れずに要素を配置するには、上部の画像の下部のマージンをゼロにする必要があります。

margin: 50px auto 0;

（ゼロ以外の測定には単位（たとえば、px）を指定する必要があることに注意してください。）

背景画像は上部の要素にそのサイズを表示しません。画像のサイズに一致するように幅と高さを指定する必要があります。高さが通常の文字よりも低い場合は、Internet Explorerが要素を1文字行の高さに拡張しないようにするために何かを使用する必要があります。たとえばoverflow: hidden;、コンテンツが要素のサイズに影響を与えないようにするために使用します。

width: 960px; height: 10px; overflow: hidden;

要素のサイズにパディングが追加されるため、page要素を20ピクセル狭くする必要があります。

padding: 10px; width: 940px;
于 2009-07-15T18:10:11.630 に答える
0

丸みを帯びた角の画像の高さが30ピクセルの場合は、.pagetopの高さを30ピクセルに設定し、上部に50ピクセルのパディングを追加して、背景画像の上部を50ピクセルに設定します。

.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}
于 2009-07-15T18:46:00.183 に答える