Question

好的，我对这里的网页设计标准有点新意。：P

这是使用CSS设计网站的正确方法吗？

每个“Box”都有自己的DIV标签，它有自己的设置。我猜测背景图片：heirarchy中的一个盒子优先于外盒子，对吗？

具有网站背景图片的“Box”。

另一个较小的“Box”，充当网站的内容容器。

其他较小的“盒子”，作为内容“Box”内特定事物的容器。

这是关于我的意思的小图片：

alt text

Answer 1

好的，一些简单的要点可以为你澄清......

“整个网站框”可能是网页的正文元素。你可以为它添加一个完整的包装div，但在第一个实例中它不会获得太多收益。

使用“内容框”是可以的，但我会谨慎使用它，除非您想要将您的网站专门限制为固定宽度的布局。

其他框可以直接添加到您的身体元素，并单独定位/样式。你最终可能会得到这样的东西......

<html> <*-- include your doctype and stuff, obviously -->
  <head>
    <title>My site</title>
    <link rel="stylesheet" type="text/css" href="sytle.css" />
  </head>
  <body>
    <div id="header">Your site header content here</div>
    <div id="mainNav">navigationhere</div>
    <div id="content">main content here</div>
    <div id="footer">footer stuff here</div>
  </body>
</html>

周围有很多定位资源等。我找到了最好的学习方法（尽管我现在对此非常生疏）是看实例，取消他们正在做的事情并自己动手。尝试查看http://meyerweb.com/eric/css/和http://www.csszengarden.com/，了解可能的起点。

HTH，但我确信拥有最新html技能的人会在一分钟内出现。

Answer 2

我完全同意samuil的观点，即你不应该有功能性的div。这就是让我们首先陷入困境的原因（如果你不知道这是什么乱七八糟的话，那就去做一个关于tabled-layout的搜索）。

BUT

需要注意的事项：如果你设置一个外部元素（比如正文或者甚至是html，但要小心），它需要一个明确的高度，或者它可能会缩小或不再包含（直观地）子元素。但是如果你将主体设置为100％的高度，它将是窗口的100％而不是文档，这意味着当用户向下滚动时，主体不会随之滚动。这非常奇怪而烦人。

老实说，我建议不要担心布局。使副本看起来很好，干净，人们会徘徊（见：这个网站）。显然有一些方面使网站更有用或更具吸引力，但我总是使用经验法则：如果我关闭所有内容，它是否仍然有用并且有意义吗？我宁愿一个页面看起来很无聊但没有CSS的可读性然后开始搞乱布局和颜色然后有一个网站变成一堆div和p它是一个浏览器（咳嗽，IE）不播放。 / p>

Answer 3

您的方法存在轻微缺陷 - 您不应将“Content Box”div放在HTML中，除非它具有某些含义。为此目的已经存在body元素（在良好的浏览器中html和body元素可以设置样式。然而，很有可能这个漏洞是不可克服的，因为目前常用的浏览器很难支持CSS 2.1的一些重要功能。

除了你的设计似乎是正确的。

Answer 4

我认为“大”（绿色）内容div实际上是一个包装div，可以帮助您设置网站的宽度（现在大多数wesites不喜欢使用所有可用的屏幕宽度 - stackoverflow是一个例外）。< / p>

关于为网站编写CSS布局的问题

4 个答案: