-2

在我的默认分辨率下一切正常；但是，当我在另一个分辨率上运行我的网站时，一切都向右而不是中心。为什么是这样？我尝试将溢出设置为 0%。

这是 HTML 文件：

<html>
    <head>
        <script type="text/javascript">
        </script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>   
    <body>
        <div id="banner">
        <h2 id="bannertext"> Websites4u </h2>
        </div>

        <div id="buttonbar">
            <a id="homeb" href="webpageone.html">Home</a>
            <a id="aboutb" href="fake.html">About</a>
            <a id="contactb" href="webpage2.html">Contact Us!</a>

        </div>

        <div id="mainbody">

        <p id="radio">
        3gb:   <input type="radio" name="age" value ="<3gb"> <br> <br>
        4gb:   <input type="radio" name="age" value ="4gb"> <br> <br>
        8gb:   <input type="radio" name="age" value ="8gb"> <br> <br>
        16gb: <input type="radio" name="age" value ="16gb"> <br>
        </p>

        <h4 id="bodytext"> Please Select Your Hardware </h4>

        <h3 id="Ram"> Ram </h3>

        </div>
    </body>
</html>

这是CSS：

  *{
        margin:0;
        padding:0;
    }

    h1 {
        color:blue;
    }
    body{
        width:1280px;
        height:720px;
        background-image:url("background colour.jpg");
        overflow:hidden;
    }
    #banner{
        position: relative;
        height: 50px;
        width: 148%;
        border: medium solid BFBDBA;
        background-color:F1C43E;
        margin:0 auto;
    }

    #bannertext{
        color:white;
        text-align:center;
        font-family:Comic Sans MS, cursive, sans-serif;
        margin:0 auto;
    }

    #buttonbar {
        position: relative;
        height: 30px;
        width: 148% ;
        border: medium solid BFBDBA;
        background-color:lightgrey;
        color:white;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
        font-style:bold;
    }
    #homeb {
        position: relative;
        left: 450px;
    }

    #aboutb{
        position: relative;
        left: 500px;
    }

    #contactb{
        position: relative;
        left: 550px;
    }

    a { 
        color: white; 
        font-weight:bold;
    }
    a:hover {
        COLOR: orange;
        font-weight:bold;
    }

    #bodytext{
        position: relative;
        top:50px;
        left:50px;
        color:red;
        font-size:35px;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
    }

    #mainbody{
        position: relative;
        background-color: white;
        height: 1000px;
        width: 80%;
        left: 30%;
        top: 5px;
        border:medium solid F1C43E;
    }

    #radio{
        position: absolute;
        top: 240px;
        left:100px;
        font-size: 18px;
        margin:0 auto;
    }

    #Ram{
        position: absolute;
        top: 176px;
        left: 100px;
        font-size: 30px;
        color: Green;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
    }
4

2 回答 2

1

很难快速解决所有问题。您的基本错误是您对每个项目都有绝对值。

例如：

 body{
    width:1280px;
    height:720px;
    background-image:url("background colour.jpg");
    overflow:hidden;
 }

由于那里指定了宽度，当您在宽度较小的屏幕上打开内容时，您的内容将始终具有 1280 像素的宽度，它仍将以 1280 像素的宽度呈现，并且由于溢出：隐藏，您将看到它就像它被转移到右边。当你用计算机做某事时，它不会做你想做的事，而是你要求它做的事。并且溢出：隐藏只是隐藏可见区域之外的所有内容，而不是您想要的中心内容。

对于#buttonbar：

 #buttonbar {
    position: relative;
    height: 30px;
    width: 148% ;
    border: medium solid BFBDBA;
    background-color:lightgrey;
    color:white;
    margin:0 auto;
    font-family:Comic Sans MS, cursive, sans-serif;
    font-style:bold;
    }

- 甚至不知道你为什么需要width:148%这里。其中的按钮以绝对位置居中：

#homeb {
    position: relative;
    left: 450px;    
}

left:450px 对浏览器严格地说：嘿，把这个#homeb 放在它的父块内的第 450 px 上。浏览器会这样做，并且不会因为您希望它居中而将其向左移动。您可以告诉他将所有按钮放在中间：

  #buttonbar {
        height: 30px;
        text-align:center;
        border: medium solid BFBDBA;
        background-color:lightgrey;
        color:white;
        margin:0 auto;
        font-family:Comic Sans MS, cursive, sans-serif;
        font-style:bold;
    }

文本对齐：居中；- 这将告诉浏览器在#buttonbar 内将内容居中而不取决于其宽度，并且无需为#homeb、#aboutb 和#contactb 定义类。

等等。有很多地方要修复。我给了你一个起点。这是已经为您完成一些更改的演示：http: //jsfiddle.net/2rM6K/7/

如果您想让某些东西正常工作，您只需要了解每一行代码对浏览器的含义。如果您不明白某事是如何工作的 - 网络上有很多信息，人们随时准备帮助您。只是不要期望在编写代码时会发生一些神奇的事情——你必须了解事情是如何工作的。阅读、尝试、实验、再阅读、再尝试、再实验，直到你开始理解某些东西为什么以及如何工作。

于 2012-12-24T19:08:56.117 回答
0 
page
{
Margin-right:auto;
margin-left:auto;
width:800px;
}

您可以根据您的要求更改宽度。

于 2012-12-25T05:01:32.910 回答