Question

我想更改活动页面的颜色，

Html代码：

<html>
    <head>
        <title>Anwar Othmane - Portfolio</title>
        <link rel="stylesheet" href="Zwa9.css">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / media="screen" type="text/css" title="Design" href="design.css">
    </head>
    <script>
        $(function() {
            $('#mainnav li a').click(function() {
            $('#mainnav li').removeClass();
            $($(this).attr('href')).addClass('active');
            });
        });
    </script>
    <body>
        <div id="nav-bar" class="nav-bar">
            <img src="Img/.png"></img>
            <ul class="mainnav" id="mainnav">
                <li><a href="portfolio.php">PORTFOLIO</a></li>
                <li><a href="about_me.php">ABOUT ME</a></li>
                <li><a href="contact.php">CONTACT</a></li>
            </ul>
        </div>
    </body>
</html>

Css代码：

#nav-bar { 
height:100%; 
width: 20%;
color: #070707; 
background-color: #efefef;
font-size: 14px;
box-shadow: -6px 0px 10px rgba(0, 0, 0, 0.5);
}
#nav-bar img {
margin-left: 10%;
margin-bottom: 10px;
margin-top: 20px; 
vertical-align: middle;
}
#nav-bar a {
text-decoration: none;
color: #070707;
}
#nav-bar a:active {
color: red;
}
#mainnav > .active > a {
color: red;
}
#nav-bar ul.mainnav {
list-style-type: none;
margin: 0;
margin-bottom: 100px;
padding: 0;
}
#nav-bar ul.mainnav li {
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
border-bottom: 1px dashed #070707;
}

我想举例来说（活动导航项目的背景）是＃4B77BE ...你有什么想法吗？也许JavaScript技巧？还是只是CSS？

非常感谢！

Answer 1

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
	lenght: 500;
}

li {
    float: left;
}

li a {
    display: block;
    color: #000005;
    padding: 14px 16px;
    text-decoration: none;
}

a:hover; a:active; {
    background-color: #00015b;
}

.active {
background-color:#00015b;
}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

我想更改导航栏的活动项目的颜色

1 个答案: