时间戳

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

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

问题描述

我在尝试使用 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 中引用这些元素的方式，但我不知道如何正确引用它们。

在此先感谢您的帮助

标签： htmlcss

解决方案

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

您在.banner浮动内提供 1 个兄弟姐妹，而另一个不浮动。这将使它们重叠。不给它们一个或两个都浮动。

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

使用background-colorcss 属性。

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

在你的css中改变.header成。header第一个以类为目标header，后一个以headerhtml-tag 为目标。

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

推荐阅读