我正在从事一个房地产网站元素。我已经创建了 Photoshop 模板并将其上传到 Behance。 https://www.behance.net/csc103falld848 https://www.behance.net/gallery/66727753/Blog-Design
现在，我正在创建房地产商店模板的静态版本。
我遇到了一个问题。在导航中，我无法更改不同列的背景颜色。例如，电话号码 (1-800-000) 的背景颜色应为银色。另一方面，“登录”、“我的属性”和“收藏夹”的背景颜色应该是白色。但我无法改变它。
这是 HTML 代码:
<html>
<head>
<title>Kanon's Smartphone Store</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/custom.css" rel="stylesheet">
<!-- FontAwesome icon fonts -->
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<!-- Custom Theme files -->
<!-- <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />-->
<!-- <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
<link href="css/fasthover.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- Website Logo -->
<link rel="icon" href="assets/img/KS%20Large.jpg">
<!-- Animate.css -->
<link href="assets/css/animate.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section id="navigation">
<header class="site-header" role="banner">
<nav class="navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="index.html">Menu</a></li>
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-home"></i></a></li>
<li><a href="store.html">Apartments</a></li>
<li><a href="blog.html">Townhouses</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="row">
<div class="col-md-12">
<div class="col-md-2 logo-1">
</div>
<div class="col-md-10">
<!--
<div id="rectangle">
<div class="col-md-2 phone-1">
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-phone"></i>1-800-000</a></li>
</div>
</div>
-->
<div class="col-md-10">
<ul class="nav navbar-nav navbar-left">
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-phone"></i>1-800-000</a></li>
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-sign-in"></i>Login/Sign up</a></li>
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-building"></i>My Properties</a></li>
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-star"></i>Favorites</a></li>
</ul>
</div>
<div class="col-md-12">
<ul class="nav navbar-nav navbar-left">
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-chevron-down"></i>Location (Any)</a></li>
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-chevron-down"></i>Property Type (Any)</a></li>
<li><a href="index.html"><i id="home-font-awesome-icon" class="fa fa-chevron-down"></i>Property Status (Any)</a></li>
<li><a href="index.html">Search Here</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
</section>
这是CSS代码:
.navbar-custom{
color: white;
font-weight: bolder;
overflow: hidden;
}
#navigation {
background-color: grey;
width: 80%;
margin-left: 400px;
}
.navbar-brand{
color: black;
font-weight: bolder;
}
.navbar-brand:hover{
color: #00ff00;
font-weight: bolder;
}
.nav.navbar-nav.navbar-left li a{
color: black;
font-weight: bolder;
}
.nav.navbar-nav.navbar-left .active{
background-color:#F0B616;
font-weight: bolder;
}
.nav.navbar-nav.navbar-left li a:hover {
background-color: wheat;
color: #00ff00;
}
.icon-bar {
background-color:#FF0000 !important;
}
#home-font-awesome-icon{
font-size: 1.3em;
}
.logo-1 {
background: url(../img/Golden-real-estate-logo-vector.jpg);
height: 15%;
width: 15%;
background-size: cover;
text-align: center;
}
.phone-1 {
background-color: azure;
}
这是 Codepen.io 链接: https://codepen.io/kanan292/pen/xJzygG
我真的对编码充满热情。我真的需要你的帮助来完成这个元素。然后，我将能够使用 WordPress、Django 或 ASP.NET Core 进行后端开发。
期待您提供出色的解决方案。
最佳答案
一切似乎都对我有用，看看这个 => https://codepen.io/anon/pen/MBXzjK
.phone-1{
background-color: black;
}
.navbar-nav li:nth-child(2){
background-color: red;
}
关于html - Bootstrap 导航问题 : Can't Change the Background Color of Different Columns，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51683342/