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。背景被认为是样式而不是内容。

那个beeing说我会尝试做这样的事情： Fiddle

我已经将大部分解释放在 css 代码中，试图让事情变得清晰。也许它有点先进，但是既然你说你正在学习 css ... ;-)

使用这种“液体”设计的优点是角落图像不会像现在那样失真。您的标题在图像上运行的问题也将不再发生，这就是最终的目标。

于 2012-08-06T19:56:18.837 回答
1

尝试将宽度设置为 100% 而不是固定宽度，然后将背景位置设置为固定。看看是否有帮助。

于 2012-08-06T18:53:20.160 回答
1

如果您担心重新调整页面大小时页面的外观，您应该按百分比设置高度、宽度和位置，而不是像素。当页面重新调整大小时，按百分比设置这些属性会缩放它们。

前任：background-size: 100%;

于 2012-08-13T21:32:13.427 回答