在 html 中格式化 header

Question

我是这个社区的新手，也是编程方面的新手。我需要在我的网站中创建一个不同的 header，每个 header 都应该根据我的需要进行格式化。

我不知道我应该使用 id 来调用 header 有什么问题，或者我应该使用什么策略来进行良好有效的练习？如果是，我应该如何实施？这是我的样品，请告诉我我犯的错误？ HTML:

<div class="jumbotron">
<div class="container">    
<h6 class="text-center"><a href="#"></a>PEOPLE-THINGS RECOMENDATION</h6>

    <h6><a href="#">Actors/movies</a></h6>
</div></div>

CSS代码：

.jumbotron h6{
  position:relative;
  bottom:37px;
  color:#815cb8;
  font-weight:normal;
 }
.jumbotron h6 {
  position:relative;
  bottom:32px;
  font-weight:normal;}

我的 header 根本没有改变，每当我尝试添加新的时，它也表现出相同的功能。

非常感谢。

Answer 1

您正在为两个相同的选择器设置样式，这就是为什么什么都没有改变的原因。 h6 应该有两个不同的选择器，以便它们有两种不同的样式。

这里是 Html:

<div class="jumbotron">
    <div class="container">    
        <h6 class="text-center first-heading"><a href="#"></a>PEOPLE-THINGS RECOMENDATION</h6>
        <h6 class="second-heading"><a href="#">Actors/movies</a></h6>
    </div>
</div>

和 CSS 代码：

.jumbotron h6{
    position:relative;
    color:#815cb8;
    font-weight:normal;
}

.first-heading {
    text-align: center;
}

.second-heading a {
    color:black;
    font-weight: bold;
}

这是一个 jsfiddle：https://jsfiddle.net/4d9jqxeu/

Answer 2

我想如果你需要覆盖 h6 中的字体大小和其他东西你不需要 h6 然后放一个 div 并在里面写你的 css 如下所示

.jumbotron .header1 {
  font-size: 20px;
  color: #815cb8;
  font-weight: normal;
}
.jumbotron .header2 {
  color: #f715aa;
  font-size: 12px;
  font-weight: normal;
}
.jumbotron a {
  text-decoration: none;
  color: #237bba;
}

<div class="jumbotron">
  <div class="container">

    <div class="header1">
      <a href="#"></a>PEOPLE-THINGS RECOMENDATION</div>

    <div class="header2"><a href="#">Actors/movies</a>PEOPLE-THINGS RECOMENDATION</div>

  </div>
</div>

在 html 中格式化 header

formatting header in html

html

css

frontend

twitter-bootstrap