1

だから私はちょうどいじっていて、画面上で 3 つの W を重ねるという素晴らしいアイデアを思いつきました。その部分はうまく機能します。私がやりたいことは、その下に 1 行または 2 行のテキストを表示することです。なんらかの理由で、テキストを WWW の下に表示する方法がわかりません。テキストの div がその上に表示されます。

これが私のスタイルシートです...

body {
background-color:#000000;
color:#ffff00;
font-size:10pt;
font-family:arial;
}

#WWWHolder {
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
display:block;
}

.w {
font-size:400px;
font-family:times;
color:#f8f8f8;
position:absolute;
}

#w1 {
z-index:2;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#w2 {
z-index:1;
font-size:350px;
margin-left:225px;
margin-top:50px;
color:#d8d8d8;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#w3 {
z-index:2;
margin-left:395px;
text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


.YReg {
color:#ffff00;
font-size:10pt;
font-family:arial;
}

.WReg {
color:#ffffff;
font-size:10pt;
font-family:arial;
}

これが私のHTMLコードです...

<div id="WWWHolder">
<div id="w1" class="w" title="Winslow">W</div>
<div id="w2" class="w" title="Web">W</div>
<div id="w3" class="w" title="Works">W</div>
</div>

<div class="YReg" style="text-align:center;">
Some Text Goes Here.
</div>

これは、CSS の専門家の一部にとっては簡単なことであるに違いないと確信しています。

4

3 に答える 3

1

要素を絶対配置すると、ドキュメント フローから除外されるため、 を調べる#WWWHolderと、高さが 0 であることがわかります。

この問題を解決するには、 and を作成#WWWHolderし#w1 position:relative;、 and#w2と#w3stylesを指定すると、問題top:0; left:0;なく動作するはずです。

参照: http://jsfiddle.net/kelervin/WKm3M/

于 2012-11-09T01:03:14.803 に答える
0

テキストを 3 つの W 以上の値に押し下げる必要があります。

.YReg {
   position: relative;
   top: 400px;
}
于 2012-11-09T01:36:29.683 に答える
0

主なアイデアは相対/絶対位置を使用しますhttp://jsbin.com/uhagef/2/editしかし、それを行うには多くのエレガントな方法があり、クロムでのみテストされています

于 2012-11-09T01:12:49.500 に答える