Html 为网站[Web Design/CSS]创建横幅

我一直在试图弄清楚这方面的标准方法是什么，或者什么可以被认为是“良好的web开发标准”，但是网站通常如何实现它们的横幅呢

例如，我知道您可以使用CSS为其创建背景，并将图像和文本放置在CSS背景之上以创建横幅，但假设您希望放置一个带有空白的徽标。你将如何去除空白以匹配背景CSS？这是否需要额外的软件，或者是否存在人们通常用来修复此问题的CSS黑客

或者，对于另一种方法，您可以使用Photoshop设计整个横幅，并调整图像大小，使其与网站标题匹配

所谓横幅，我指的是网站顶部的导航栏，比如

---

web开发人员使用什么方法？为什么？

这是一个太笼统的问题，无法得到一个好的、全面的答案，但我要做的是首先考虑标记，而不是关注网站的外观。（请注意，您链接到的站点根本不遵循此方法）

HTML

Spring源代码社区

这将为您提供一个非常简单的标题，后面是链接的项目符号列表。虽然这可能与您在页面上看到的视觉效果不同，但实际上它包含相同的内容，并且功能相同。搜索引擎和屏幕阅读器也很容易理解它

---

然后，您可以使用图片交换文本。

我个人更喜欢将其作为标题元素的背景，这在语义上对我来说最有意义。我不确定我是否理解您对空白的担忧，在我看来，使用透明背景制作徽标不会留下任何问题谢谢您的回答：）嗯……我想我应该补充一个问题，那就是如何使徽标背景透明？是否有特定的CSS属性？或者我应该使用Photoshop将徽标背景与CSS背景匹配？只需弹出Photoshop，在创建新图像时，您可以选择背景颜色-您应该选择透明的位置-旧图像：好的，这很有意义，感谢您的解释。我不太清楚为什么我没有想到这一点>。每个人都必须从某个地方开始，祝你好运：）我会把它全部打包成一个

，删除

class=“title”

-你可以通过

header>h1

或

header>h1:first child

免费获得它，

class=navigation

应该是一个id，因为你的站点上可能只有一个顶级导航，可能是一个class+idI，因为你仍然需要处理旧版本的IE，使用javascript polyfill对于OP来说可能太高级了。关于IDs与类，我可以理解你的观点，但我同意那些反对在几乎所有情况下使用IDs的人的观点（主要是为了避免特殊性问题）。我理解你的担心，那可能有点太难理解，我对此表示同情，但教授古老的语义学（但愿很快过时，祈祷好运）也可能是一点“浪费时间”。。。多么矛盾：）以下是关于为什么不应该使用ID（不是我写的）的一些想法：

<h1 class="title">Spring Source Community</h1>
<ul class="navigation">
  <li><a href="/features">Features</a></li>
  <li><a href="/get_started">Get Started</a></li>
  <li><a href="/get_involved">Get Involved</a></li>
  <li><a href="/news">News & Events</a></li>
  <li><a href="/subscribe">Subscribe</a></li>
</ul>