文章/答案/技术大牛

发布

社区首页 >问答首页 >具有页眉、主程序和页脚的网页结构的语义实现

问具有页眉、主程序和页脚的网页结构的语义实现
EN

Code Review用户

提问于 2020-06-09 08:17:09

回答 1查看 48关注 0票数 1

我对web开发很陌生，目前正在学习HTML和CSS的基础知识。许多网页遵循页眉、主页和页脚的结构模式；因此，我认为尝试实现这种结构是个不错的主意，看看事情是如何雕刻的。

body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  margin: 0;
  min-height: 100vh;
}

header,
footer {
  background-color: dodgerblue;
  color: white;
  text-align: center;
}

main {
  background-color: snow;
  flex: 1;
  padding: 1rem;
}

footer {
  margin-top: auto;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Test</title>
  <link rel="stylesheet" href="main.css">
  <meta charset="UTF-8">
</head>

<body>
  <header>
    <h1>Header</h1>
  </header>

  <main>
    <h2>Main content</h2>
  </main>

  <footer>
    <h3>Footer</h3>
  </footer>
</body>

</html>

我正在寻找各种各样的反馈，从风格，到反模式，做事情更简洁的方法，以及任何你能发现有用的其他观察。我确实有一些具体的问题：

语义HTML元素使用正确吗？在主元素中不需要一个项目元素，对吗？
在CSS中，我选择了页眉和页脚作为它们的共同点，这是一个很好的实践吗？还是应该分别保留一个页眉和一个页脚选择器？这样会更容易维护吗？
这是否通常使用Flexbox来处理？还是网格显示是一个更好的工具呢？
你会做什么不同的事情？

beginner

html

css

html5

回答 1

Code Review用户

回答已采纳

发布于 2020-06-17 13:35:39

我自己也是一个网络开发世界的初学者(因此，任何关于我的答案的评论都是非常欢迎的！)但也许我的建议在某种程度上仍然是有用的。;-}

想到的第一件事是你的页眉和页脚元素--在CSS中用这种方式将它们组合在一起--因为它们在common...My中有简单的答案。我会为此修改我的HTML，或者更好地说，添加一个类或id属性，并以这种方式将它们组合在一起。

示例：

 <header class = "topAndBottom">.....</header>
         <footer class = "topAndBottom">.....</footer>

CSS示例：

 .header, topAndBottom {
.......
}

我个人更喜欢类属性而不是id，因为您可以在HTML中更频繁地使用它，因此id属性在HTML中可以接受一两次(不是我的规则)。

或者，您只能在页眉中设置<h1>样式，在页脚内使用<h3>，如果您想要的主要是文本，我建议您这样做。

还有一点关于CSS顺序的小小评论，这纯粹是针对个人的，但是要更好地阅读CSS中HTML中的顺序，尤其是当您的代码更加高级和复杂的时候。

祝您的学习万维网发展好运！我也是不久前开始的，我上瘾了！

票数 4

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/243593

复制

相似问题

问具有页眉、主程序和页脚的网页结构的语义实现
EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有页眉、主程序和页脚的网页结构的语义实现EN

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有页眉、主程序和页脚的网页结构的语义实现
EN