css - 用 div 布局...你能有太多吗?

标签 css layout html

开发布局的最佳做法是什么?限制div更好吗?我正在浏览一些流行网站的 html/css,它们似乎都在 div 中有 div。例如,一个 div 用于整个页面,一个 div 用于顶部栏,顶部栏内的一个 div 用于 Logo 、搜索栏等。

这是一个好的做法吗?我想正确定位所有 div 比在 div 中放置必要的元素更容易。这是我到目前为止一直在做的事情,但我想确保我正在学习正确的方法。

在此方面的任何帮助表示赞赏。谢谢!

最佳答案

使用 <div>当你需要 divide (这就是 div 应该用于)页面的各个部分。例如,来自内容的页眉/页脚,或博客上的个别帖子。
但是,当另一个元素在语义上有意义时,您不应使用它们。

如果前面提到的博客上的存档仅显示存档中每篇文章的两行摘要,则有序列表可能更有意义,因为您正在定义有序的元素列表。 <li>元素也是 block 元素,可以用完全相同的方式设置样式。

有时,嵌套 <div> 是有意义的标签,有时你不应该。
作为一项基本测试,假设您的页面正在被一位视障用户解析。它需要知道文档的每个节点中有什么,以便它可以正确地宣布它。它不关心您的视觉 CSS 需求是什么,它只想尽可能准确地将其解析为语音。

要记住的基本要点:

  • 编写 HTML 主要是为了结构而不是视觉效果
  • 查看您网站的人可能没有使用您的 CSS
  • 查看您网站的人可能没有使用传统的网络浏览器
  • 如果 CSS 不能很好地工作,您可以随时调整您的结构,前提是它在语义上保持不变。

关于css - 用 div 布局...你能有太多吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8280039/

相关文章:

android - 如何创建一个填充父级高度并显示尽可能大的 Image 的 ImageView?

css - 无法使用 CSS 网格布局正确布置行

html - 我应该如何正确地将 .png Logo 作为中心对齐导航栏的一部分?

javascript - 如何替换父元素的内容,忽略使用 jQuery 的子元素

html - 对齐div中的内容

html - html按钮的媒体查询

javascript - 顶部菜单粘贴在旋转木马上

HTML5 列的内容从左到右

javascript - 当我重叠图像和 Canvas 时,我无法让它保持一致

html - CSS 33.3333% 留下一个像素