1

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

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

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

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

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

非常感谢。

4

4 回答 4

3

哇.. 看到你的 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/

希望这有用。

于 2013-03-26T02:40:45.887 回答
2

也许这个网络广播可以帮助你更好地理解定位：-

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

于 2013-03-26T02:30:17.157 回答
1

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

于 2013-03-26T01:56:51.807 回答
0

我的建议是学习所有关于盒子模型以及浮动在 CSS 中的工作原理。在用 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/。这只是其中的一部分，但您可以看到我没有使用绝对或相对定位。只是流动和漂浮。如果调整浏览器大小，则页面居中并保持居中。稍作调整，您就可以轻松地将其变成您当前的外观和感觉。

于 2013-03-26T03:06:23.953 回答