Question

我是html和css的新手。我正在努力学习它们，但我遇到了一些问题。基本上我一直在尝试使用背景图像创建网站，该背景图像顶部有导航栏（这在使用括号进行预览时仍然有用）。

我可以更改导航栏的颜色吗？
此外，如何将h5标题置于页面左侧的中心位置，标题下方有h5标题，但是四条线，而不是覆盖图像的2条长标题。

如果有人能帮忙，那就太好了。

.navbar-nav>li {
  float: none;
}
.navbar-default {
  background-color: rgba(255, 255, 255, 0);
  border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: rgba(150, 155, 155, );
}
.navbar {
  margin-bottom: 0 !important;
}

}
.txtpic {
  position: absolute;
  text-align: center;
  background-image: http: //i.imgur.com/pE2NrKh.jpg;
  color: white;
}
.list {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 25px;
  font-weight: bolder;
}

<!DOCTYPE html>
<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport">

  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <title>Kyrgystan</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
  <title>Kyrgystan exped</title>
  <link href="Calums2.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
</head>

<body>
  <img height="100%" src="http://i.imgur.com/pE2NrKh.jpg" style="position: relative; top: 0; left: 0;" width="100%">
  <div class="list" style="Position: absolute; top: 0px; left:0px;">
    <nav class="navbar navbar-default">
      <ul class="nav nav-justified navbar-nav">
        <li><a href="/">Home</a>
        </li>
        <li><a href="group.html">Team</a>
        </li>
        <li><a href="services.html">Krygyzstan</a>
        </li>
        <li><a href="positions.html">Blog</a>
        </li>
        <li><a href="positions.html">Expeditions</a>
        </li>
      </ul>
    </nav>
    <style>
      text-align:justify;
    </style>
      </div>
      
      
        <div class="txtpic" style="top: 100%;">
          <div class="row-sm-3"></div>
          <h3>Title is H3</h3>
          <h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5>
        </div>
</body>

</html>

Answer 1

如果您想更改导航栏文字颜色，请尝试

.navbar-default .navbar-nav>li>a {
    color: red !important;
}

修改

假设这是html标记

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="/">Home</a> </li> <li><a href="group.html">Team</a> </li> <li><a href="services.html">Krygyzstan</a> </li> <li><a href="positions.html">Blog</a> </li> <li><a href="positions.html">Expeditions</a> </li> </ul> </div>  </div>  </nav> <div class="list"> <div class="txtpic" style="text-align: center"> <h3>Title is H3</h3> <h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips. We have over a thousand nights under canvas between us, and there are more in the pipeline. We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart. So far our outings have taken us across Europe, Asia and Africa.</h5> </div> </div>

1- /您之前的代码是您尝试将图片作为背景添加img元素

1-1 /更好的方式用css做

.list { background: url(http://i.imgur.com/pE2NrKh.jpg); background-size: cover; }

你也说你不能改变导航栏文字的颜色，你需要用.navbar-nav > li > a选择一个元素

.navbar-nav > li a{ color: white !important }

Answer 2

要将h5的内容设为4行而不是默认显示方式，请尝试使用<br>标记。此标记会破坏该行并开始一个新行。所以你可以用以下方式编写它：

<h5>Text is h5.. We are a group of old school friends (plus a few others who tag along) who go on expeditions and good trips.
    <br> We have over a thousand nights under canvas between us, and there are more in the pipeline.
    <br> We have done trips on foot, by car, on water in the boat we built, by bicycle and even in a wooden burger cart.
    <br> So far our outings have taken us across Europe, Asia and Africa.
</h5>

查看以下link以帮助您更好地理解此标记

这不是在背景图像之上的原因是你已经在课程中定义了绝对定位＆＃39; txtpic＆＃39;。尝试将其更改为其他内容并告诉我发生了什么。

当我尝试这样做时，导航栏背景颜色似乎也会改变。如果要更改文字颜色，请使用颜色：＆＃39;而不是＆＃39; background-color＆＃39;。

为什么我的导航栏文字颜色不会改变

2 个答案: