Question

这些是我的代码：

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}
li {
    float: left;
}

li a{
    display:block;
    color: white;
    text-align: center;
    padding: 14px 50px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active { 
    background-color: #111;
}   

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

body {
    background: dimgrey;
    font-family: 'Gill Sans MT', sans-serif;
    color: white;
    font-weight: 300;
}
body ::-webkit-input-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  font-weight: 300;
}
body :-moz-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body ::-moz-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body :-ms-input-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  font-weight: 300;
}

HTML

<body> 
<ul>
  <li><a href="home.html" target="_parent">Home</a></li>
  <li><a class="active" href="log-in.html" target="_parent">Sign In/Sign Up</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#order">Order</a></li>
  <li><a href="movies.html" target="_parent">More Movies</a></li>
  <li><a href="contact.html" target="_parent">Contact</a></li>
</ul>

</body>

我想添加另一个具有不同的background-color的按钮，并且可能会放在最右侧，与其他按钮分开。我不知道如何将它与其他按钮分开，所以我只是尝试改变它的背景。我尝试创建另一个类，因为另一个按钮不会被点击，只是为了显示，并且也没有悬停效果。但它仍然没有奏效。你能给我一些建议吗？

Answer 1

＆＃13;

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}
li {
    float: left;
}

li a{
    display:block;
    color: white;
    text-align: center;
    padding: 14px 50px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active { 
    background-color: #111;
}   

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

body {
    background: dimgrey;
    font-family: 'Gill Sans MT', sans-serif;
    color: white;
    font-weight: 300;
}
body ::-webkit-input-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  font-weight: 300;
}
body :-moz-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body ::-moz-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body :-ms-input-placeholder {
  font-family: 'Gill Sans MT', sans-serif;
  color: white;
  font-weight: 300;
}
.special {
  float: right;
  background: red;
}

＆＃13;

<body> 
<ul>
  <li><a href="home.html" target="_parent">Home</a></li>
  <li><a class="active" href="log-in.html" target="_parent">Sign In/Sign Up</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#order">Order</a></li>
  <li><a href="movies.html" target="_parent">More Movies</a></li>
  <li><a href="contact.html" target="_parent">Contact</a></li>
  <li class="special"><a>special</a></li>
</ul>

</body>

＆＃13;

这是我的解决方案，给特殊的li一个类，并设置右浮动

Answer 2

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Admin Home Page</title>
</head>

<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd">;
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Page1</title>
    <style> ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0;
        width: 100%;
    }
    li {
        float: left;
    }

    li a{
        display:block;
        color: white;
        text-align: center;
        padding: 14px 50px;
        text-decoration: none;
    }
    li a:hover:not(.active) {
        background-color: #111;
    }
    button{
        float: right;
        background-color: #2e6aab;
        text-align: center;
        padding: 14px 50px;
    }

    .active {
        background-color: #111;
        display:block;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-weight: 300;
    }

    body {
        background: dimgrey;
        font-family: 'Gill Sans MT', sans-serif;
        color: white;
        font-weight: 300;
    }
    body ::-webkit-input-placeholder {
        font-family: 'Gill Sans MT', sans-serif;
        color: white;
        font-weight: 300;
    }
    body :-moz-placeholder {
        font-family: 'Gill Sans MT', sans-serif;
        color: white;
        opacity: 1;
        font-weight: 300;
    }
    body ::-moz-placeholder {
        font-family: 'Gill Sans MT', sans-serif;
        color: white;
        opacity: 1;
        font-weight: 300;
    }
    body :-ms-input-placeholder {
        font-family: 'Gill Sans MT', sans-serif;
        color: white;
        font-weight: 300;
    }
    </style>

</head>
<ul>
    <li><a href="home.html" target="_parent">Home</a></li>
    <li><a class="active" href="log-in.html" target="_parent">Sign In/Sign Up</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#order">Order</a></li>
    <li><a href="movies.html" target="_parent">More Movies</a></li>
    <li><a href="contact.html" target="_parent">Contact</a></li>
    <li><button>AnotherBtn</button></li>

</ul>
</html>

CSS：导航栏中的另一个按钮

2 个答案: