-1
我無法在菜單欄的「主頁」按鈕中放置「a：hover」。甚至無法刪除文字修飾。當我在媒體查詢中嘗試我的手時，只是感到困惑。菜單欄中的活動鏈接不工作
****堆棧溢出的設置是不是讓我張貼的問題，除非我添加更多的細節*****
body {
\t background-image: url("blue-bokeh.jpeg");
\t width: 100%;
\t height: 100%;
}
.wrap {
\t height: auto;
\t width: 90%;
\t margin: auto;
}
header {
\t background: #333;
\t color: white;
\t height: auto;
\t width:100%;
\t float: left;
}
header nav {
\t width: 100%;
\t height: auto;
}
header nav ul {
\t list-style: none;
\t height: auto;
\t width: auto; /* what happens if i change the value to 100% */
\t float: right;
\t margin-right:30px;
}
header nav ul li {
\t display: inline;
\t padding: 15px 30px;
\t float: left;
\t border-radius: 5px;
}
header nav ul li a.active {
text-decoration: none;
}
header nav ul li:hover {
\t background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
\t /*background: tomato;*/ /* get the code checked , if its repeated in .top class */
\t float: left;
\t margin-top: 20px;
\t border-radius: 10px;
\t /*padding: 20px 20px;*/
\t height: auto;
\t width: 60%;
\t margin-right: 2%;
}
.top {
\t background: tomato;
\t margin-bottom: 10px;
\t float: left;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.top h3 {
\t color: darkslategray
}
.bottom {
\t background: tomato;
\t margin-bottom: 50px;
\t float: left;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottom h3 {
\t color: darkslategray
}
.sidebar {
\t float: left;
\t height: auto;
\t width: 38%;
\t margin-top: 20px;
}
.topside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.middleside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottomside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
footer {
\t background: darkslategray;
\t float: left;
\t width: 100%;
\t height: auto;
\t border-radius: 10px;
}
footer p {
\t padding-left: 50px;
}
/* ------------------------------------------------------------------------------------------------------------------------------------------
\t ---------------------------------------------------------------------------------------------------------------------------------------------
\t ------------------------------------------------------MEDIA QUERY STARTS HERE---------------------------------------------------------------*/
@media screen and (max-width: 700px) {
body {
\t background-image: url("blue-bokeh.jpeg");
\t width: 100%;
\t height: 100%;
}
.wrap {
\t height: auto;
\t width: 90%;
\t margin: auto;
}
header {
\t background: #444;
\t color: white;
\t height: auto;
\t width:100%;
}
header nav {
\t width: 100%;
\t height: auto;
}
header nav ul {
\t list-style: none;
\t height: auto;
\t width: 100%; /* what happens if i change the value to 100% */
\t margin: 0;
padding: 0;
text-align: center;
}
header nav ul li {
\t display: block;
\t padding: 15px 30px;
float: none;
}
header nav ul li:hover {
\t background-color: #111;
}
header nav ul li a.active:active {
background-color: #4caf50;
}
.mainbody {
\t /*background: tomato;*/ /* get the code checked , if its repeated in .top class */
\t margin-top: 20px;
\t border-radius: 10px;
\t /*padding: 20px 20px;*/
\t height: auto;
\t width: 100%;
}
.top {
\t background: tomato;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.top h3 {
\t color: darkslategray
}
.bottom {
\t background: tomato;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottom h3 {
\t color: darkslategray
}
.sidebar {
\t height: auto;
\t width: 100%;
}
.topside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.middleside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
.bottomside {
\t background: orangered;
\t margin-bottom: 10px;
\t border-radius: 10px;
\t padding: 20px 20px;
}
footer {
\t background: darkslategray;
\t float: left;
\t width: 100%;
\t height: auto;
\t border-radius: 10px;
}
footer p {
\t padding-left: 50px;
}
}
\t
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="restheme.css" type="text/css" rel="stylesheet">
</head>
<body>
\t <div class="wrap">
\t \t <header>
\t \t \t <nav>
\t \t \t \t <ul>
\t \t \t \t \t <li><a class="active" href="#home">Home</a></li>
\t \t \t \t \t <li>Portfolio</li>
\t \t \t \t \t <li>Blog</li>
\t \t \t \t \t <li>Contact Us</li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t </header>
\t \t <div class="mainbody">
\t \t \t <article class="top">
\t \t \t \t <h3>First Post</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
\t \t \t </article>
\t \t \t <article class="bottom">
\t \t \t \t <h3>Second Post</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
\t \t \t </article>
\t \t </div> \t
\t \t <div class="sidebar">
\t \t \t <aside class="topside">
\t \t \t \t <h3>Top Sidebar</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
\t \t \t </aside>
\t \t \t <aside class="middleside">
\t \t \t \t <h3>Middle Sidebar</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
\t \t \t </aside>
\t \t \t <aside class="bottomside">
\t \t \t \t <h3>Bottom Sidebar</h3>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
\t \t \t </aside>
\t \t </div>
\t \t <footer>
\t \t \t <p>Copyright © 2016 Faltoo Webdesigns</p> \t
\t \t </footer>
\t </div>
</body> \t
\t
</html>
你能更準確？應該發生什麼？我沒有看到文字裝飾。 – mxlse
我希望它是這樣的（看到主頁按鈕是活動的，並有綠色） http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_responsive – Tarique
但你已經有了CSS代碼... – mxlse