0

右側のHTMLページの上部に配置したい色付きの背景を持つ小さな画像があり、同じ背景色のバンドが左側のスペースを埋めて、バナーのように見えるようにします。次に、ページの残りの部分（テキスト）をバナーの下に表示し、画像を折り返さないようにします。CSSよりもインラインスタイルを使用したいのですが、どちらでも構いません。

HTML構文に魔法の杖を振ることができれば、次のようになります。

<body>
<image-as-banner src='mylogo.jpg' align='right' background-color='black'>
<p>And my normal text starts here underneath the banner</p>
</body>

つまり...これを実現するために1行のHTMLを挿入できれば、それが何であるかを知りたいのです。画像、右揃えにするバナースタイル、残りのスペースを埋める色が黒であることを指定する必要があります。もちろん、image-as-bannerHTMLにはタグはありません。

4

3 に答える 3

0

次のように、背景画像と色の属性を持つ div コンテナーを使用することをお勧めします。

CSS:

<style type="text/css">
#banner{
 background-image:url(images/banner.jpg);
 background-color: #$$$$$$;
 background-position: right;
 background-repeat: no-repeat;
 width: $px;
 height: $px;
}
</style>

HTML:

<div id="banner">
&nbsp;
</div>
于 2012-10-10T21:15:32.120 に答える
0

上に貼り付けた例では、このようなものがうまくいくかもしれません

<html>
<head></head>
<body>

<style type="text/css">
.img-banner {
    background-color: black;
    align: right;
    /* etc etc etc */
}
</style>

<div class="img-banner">
    <img src='mylogo.jpg' alt=''>
</div>

<p>And my normal text starts here underneath the banner</p>

</body>
</html>
于 2012-10-10T21:56:25.190 に答える
0

このようなもの..？

<html>
<style type="text/css">
#container{width:100%;margin:0 auto;height:100%;background-color:grey;}
#banner{width:100%;height:100px;background-color:red;}
img{float:right;height:100px;}
#text{}
</style>
<body>
    <div id='container'>
    <div id='banner'><img src='http://darmano.typepad.com/logic_emotion/images/red.jpg'>
    </div>
    <div id='text'>
    <h3>Put your text here..</h3>
    </div>
    </div>
</body>
<html>
于 2012-10-10T21:17:13.623 に答える