Question

我正在从事房地产网站项目。我已经创建了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进行后端开发。

期待从您那里得到一个好的解决方案。

Answer 1

一切似乎都对我有用，请检查一下=> https://codepen.io/anon/pen/MBXzjK

.phone-1{
 background-color: black;
 }

.navbar-nav li:nth-child(2){
 background-color: red;
 }

引导程序导航问题：无法更改不同列的背景颜色

1 个答案: