Question

我最近编写，设计并上传了我的第一个网站http://www.autismsees.com。

我今天第一次把它放在网上，我意识到在很多浏览器上整个页面看起来都向右移动了。

这是因为我对所有元素使用绝对定位而不是相对定位，这通常是首选。这是一个我非常渴望纠正的错误，但我很难理解如何转换到相对定位。

网页的CSS可以在http://autismsees.com/style/stylesheet.css找到。

我想知道是否有人可以就如何更改样式表提供一些建议，或者是一个有助于教我如何执行此操作的在线资源。

非常感谢。

Answer 1

哇..我很惊讶地看到你的HTML和CSS代码，我记得我第一次学习HTML和CSS。但只是一个建议，也许你需要改进结构并整理你的HTML代码。可以这样：

<html>
<head>......</head>
<body>
<div id="wrapper">
   <div id="container">
   ......
   <!-- YOUR CONTENT HERE -->
   ......
   </div>
</div>
</body>
</html>

我使用两种方式（使用CSS）可以使网页居中：

#container{
    position: relative;
    margin : 0 auto;
    width: 900px; 
}

或者

#container{
    position: absolute;
    width: 900px;
    left: 50%;
    margin-left : -450px;
}

这里是小提琴：http://jsfiddle.net/z9vVu/

希望这有用。

Answer 2

这个网络广播可能会帮助您更好地了解定位： -

http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

Answer 3

从您的所有200属性中减去left，然后换行 <div style="position:relative; margin:0 auto;">...</div>围绕整个页面（就在<body>...</body>内）。这应该很好地解决你的问题。

Answer 4

我的建议是在CSS中学习the box model和how floats work的所有内容。在使用HTML和CSS构建设计时，这将具有重要意义。 沟渠绝对定位和使用流量。

要研究的另一件事是类和id之间的区别。请记住，id用于元素/样式的单个实例，而类可以应用于页面上的许多元素。使用类的好处是你可以获得大量的代码重用，最终你的整体文件大小要小得多。我通常只保留id用于JavaScript。

最后，我会研究像Twitter Bootstrap这样的网格框架。在查看您网站的源代码时，您似乎已将Bootstrap CSS包含为“slidestyle.css”。这个文件有一些很好的可重用的程式化元素。正如弗雷迪所提到的，你应该尝试这样的事情：

<!doctype html>
<html>
    <head>
        <title>AutismSees</title>

        <link rel="stylesheet" href="slidestyle.css">
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <div class="container">
            <header class="row span12">
              <!-- Header and Navigation Here -->
            </header>
            <div class="row span12">
              <!-- Slide control here -->
            </div>
            <!-- Create the three content columns -->
            <div class="row">
              <div class="span4">
                <h2>Contribute</h2>
                <p>Text here.</p>
              </div>
              <div class="span4">
                <h2>Stay Connected</h2>
                <p>Text here.</p>
              </div>
              <div class="span4">
                <h2>Our Friends</h2>
                <p>Text here.</p>
              </div>
            </div>
            <footer class="row span12">
              <p class="copyright">&copy; 2013 AutismSees.</p>
            </footer>
        </div>
    </body>
</html>

container，span4，span12和row类都来自Twitter Bootstrap。在Bootstrap中使用这些和其他有用的类实际上有助于加快页面布局。

或许有助于说明所有这些，我已经创建了一个结构可能如下的粗略草图：http://jsfiddle.net/matthewkimber/JmsSx/10/embedded/result/。这只是那里的一部分，但你可以看到我没有使用绝对或相对定位。只是流动和漂浮。如果调整浏览器大小，页面将居中并保持居中。通过一些调整，您可以轻松将其转换为您当前的外观和感觉。

基本CSS定位（相对与绝对）

4 个答案: