Question

我在尝试使用 CSS/HTML 在网站导航栏上方创建“横幅”时遇到问题。

我无法在横幅中显示背景颜色，也无法使标题文本浮动到横幅徽标/图标的右侧。到目前为止，这是我的 HTML 标头和 CSS 代码。

HTML：

<header>

     <link href="index.css" rel="stylesheet">

<div class="banner">
    <img src="logo.png" class="profile-picture" alt="Header Logo">
    <h1 class="title">Header info 1</h1>
    <h2 class="title">Header info 2</h2>
    <h3 class="title">Header info 3</h3>
</div>

<nav>
    <! --this part works fine so code omitted -->
</nav>

</header>

这是CSS：

.header img{
   float: left;
}
.header .banner{
   display:inline-block;
   *display:inline;
   padding: 20px;
   background-color: #5C5F58;
   margin:10px;

}
.header .banner .title{
   display:inline-block;
   *display:inline;
   font-family: 'Bebas Neue', sans-serif; 
   color: #ffffff; 
   text-transform: uppercase;
}

总结一下我遇到的问题：

我无法让徽标浮动到标题的左侧（它们出现在徽标下方）
我无法更改横幅的背景颜色
我无法更改字体样式或字体颜色

我知道这可能是我在 CSS 中引用这些元素的方式，但我不知道如何正确引用它们。

预先感谢您的帮助

Answer 1

<块引用>

我无法让徽标浮动到标题的左侧（它们出现在徽标下方）

您在 .banner 浮动内给了 1 个兄弟姐妹，而另一个没有浮动。这将使它们重叠。不给浮点数或两个浮点数。

<块引用>

我无法更改横幅的背景颜色

使用 background-color css 属性。

<块引用>

我无法更改字体样式或字体颜色

将 css 中的 .header 更改为 header。第一个针对 header 类，后一个针对 header html-tag。

专业提示：尝试使用带有 HTML 和 CSS 的在线代码编辑器（例如 Codepen）来提问。这将使人们更容易尝试回答您的问题，从而得到更快、更详尽的答案。

Answer 2

您在 CSS 中的特殊性是错误的。如果您将这些修改为下面的代码，您将获得您正在寻找的行为。

.banner img{
  float: left;
}

.banner {
  display:inline-block;
  *display:inline;
  padding: 20px;
  background-color: #5C5F58;
  margin:10px;

}

.title {
  display:inline-block;
  *display:inline;
  font-family: 'Bebas Neue', sans-serif; 
  color: #ffffff; 
  text-transform: uppercase;
}

Answer 3

我已将 css 类替换为内联 css checkit 是否有帮助

<div style='background-color:red'>
    <img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_1280.jpg"   style="float:left; height: 80px; padding:5px;" alt="Header Logo">
    <h1 class="title" style='font-size: 25px; color:#ffff00;'>Header info 1</h1>
    <h2 class="title" style='font-size: 15px; color:#00ff00;'>Header info 2</h2>
    <h3 class="title" style='font-size: 10px; color:#0000ff;'>Header info 3</h3>
</div>
<nav>
    <! --this part works fine so code omitted -->
</nav>

使用 CSS 和 HTML 在导航栏上方制作横幅，徽标/图标在文本左侧浮动

3 个答案: