0

これをどのようにコーディングするのですか？

ここに画像の説明を入力

これがある場合：
ここに画像の説明を入力

なので

<html>
    <head>
        <style>             
            h2
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position:absolute;
                top:0px;
            }
            h3
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position: absolute;
                top:20px;
                left:20px;
            }
        </style>
    </head>

    <body>
        <h2>All right, Mate?</h2>
        <h3>All right, Mate?</h3>
    </body>
</html>
</html>

...元の機能/タグを変更せずに。
少しだけ追加 (または変更) します。

4

3 に答える 3

5

div で囲み、ボーダーを設定します。

html を次のように変更してみてください。

<div>
    <span id="h2">All right, Mate?</span>
    <span id="h3">All right, Mate?</span>
</div>​

そしてこれへのあなたのcss：

div {
    padding : 5px;
    border: 3px solid red;
    height: 70px;
    width: 440px;
}
div span {
    width: 420px;
    display: block;
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    position: relative;
}
div span#h2
{
    top:0px;
}
div span#h3
{
    top:-50px;
    left:20px;
}​

フィドル: http://jsfiddle.net/maniator/PJT9V/

于 2012-05-22T15:08:34.797 に答える
3

両方をラッパーに入れるか、解決策を試すことができますtext-shadow-このようなものhttp://dabblet.com/gist/2769678

于 2012-05-22T15:14:36.167 に答える
1

positionset toを使用してラッパーに両方を配置しrelative、fixed widthand heightto it を定義できます。

HTML 

<div class="wrapper">
    <h2>All righ, Mate?</h2>
    <h3>All right, Mate?</h3>
</div>​

CSS

.wrapper 
{
    border: 3px solid #ff0000;
    position: relative;
    width: 448px;
    height: 89px;
}    
h2
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position:absolute;
    top:0px;
}
h3
{
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    text-align:center;
    position: absolute;
    top:20px;
    left:20px;
}​

height両方の要素が にposition設定されているため、 a を定義する必要がありますabsolute。これにより、要素がドキュメントの通常のフローから削除されるため、親要素 (この場合はラッパー) はheight、絶対配置された子の を に追加しません。独自の。また、親の位置を
定義すると、子の位置が親の位置に関連して計算されるため、子の位置に影響することに注意してください。この動作を望まない場合は、ルールから を削除してください。positionrelativeposition: relative.wrapper

実際の例

それが役に立てば幸い。

于 2012-05-22T17:52:32.230 に答える