0

今まで習ってきたちょっとしたスキルでcssでページを作ろうとしています。ページの上部にタイトルがあり、見栄えは良いですが、ウィンドウのサイズを変更すると、タイトルが画像の境界線に重なります。firefoxでうまく表示されないことがわかりました。どうすればこれを修正できますか?ここに画像の説明を入力

<!DOCTYPE HTML PUBLIC "-//W3C//DTM HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>This is my website</title>
</head>
<style type="text/css">
body{
    background-image:url('bg-body.jpg');
    background-repeat: repeat;
    width:967px;
}
h1 {
    font-size: 40px;
    position:absolute;
    top: 47px;
    left: 27%;
    color:red;
}   
.venus {
    position:absolute;
    top: 160px;
    left: 44%;
}
#menu {
    position:absolute;
    top: 400px;
    left: 130px;    
    color:blue;

    height:500px;
    width:290px;
    background-color:#DCE1CA;
    border-top: 12px outset silver;
    border-left: 12px outset silver;
    border-right: 5px outset silver;
    border-bottom: 5px outset silver;
}
li {
    line-height:200%;
    font-size: large;
    list-style-type:none;
    list-style-image:none;

}
#textarea {
    position:absolute;
    top: 400px;
    left: 425px;    
    color:blue;
    text-align:left;
    height:500px;
    width:1149px;
    background-color:#DCE1CA;
    border-top: 12px outset silver;
    border-left: 12px outset silver;
    border-right: 5px outset silver;
    border-bottom: 5px outset silver;
}
</style>
<body>
<img src="sidebar.png" width="100%" height="2000px" class="sidebar" />
<h1>Welcome to my HTML/CSS/JavaScript Page</h1>
<img src="venus.jpg" width="200px" height="200px" class="venus" />

<div id="menu">
<ul>
<li>Mix of CSS & JS</li>
<li>Your Full Name</li>
<li>How Many Apples</li>
<li>Many Questions</li>
<li>Background Color</li>
<li>My Family Event</li>
<li>Images, Images</li>
</ul>
</div>
<div id="textarea">
Here is my story: I have been learning JavaScript and on the side I have been learning some CSS/HTML.
</div>
</body>
</html>

ここに画像の説明を入力

ここに画像の説明を入力

4

3 に答える 3

2

'sidebar.png'を<img>、htmlの実際の画像ではなく、背景画像として設定することをお勧めします。<img>HTML内は、venus.jpgなどの実際のコンテンツである場合にのみ使用する必要があります。背景はスタイリングと見なされ、コンテンツとは見なされません。

その蜂は私がこのようなことをしようとすると言った： フィドル

説明のほとんどをcssコードに入れて、物事を明確にしようとしています。おそらくそれは少し進んでいますが、あなたがcssを学んでいるとあなたが言うので...;-)

この種の「液体」デザインを使用する利点は、現在のようにコーナー画像が歪まないことです。また、タイトルが画像上に表示されるという問題は二度と発生しません。これが最終的な目標でした。

于 2012-08-06T19:56:18.837 に答える
1

サイズを変更したときにページがどのように見えるか心配な場合は、高さ、幅、および位置をピクセルではなくパーセンテージで設定する必要があります。これらの属性をパーセンテージで設定すると、ページのサイズが変更されたときにスケーリングされます。

元：background-size: 100%;

于 2012-08-13T21:32:13.427 に答える
1

幅を固定幅ではなく 100% に設定してから、背景位置を固定に設定してみてください。それが役立つかどうかを確認してください。

于 2012-08-06T18:53:20.160 に答える