這是我的代碼:CSS:在導航欄上另一個按鈕
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
並且可能會被放置在與其他按鈕分開的正確的一側。我不知道如何將它與其他按鈕分開,所以我只是嘗試改變它的背景。我嘗試製作另一個類,因爲另一個按鈕不可點擊,僅用於顯示,也沒有懸停效果。但它仍然行不通。你能給我一些建議嗎?
你可能privide一個feedle,所以我們可以直接採取行動? – holden