Question

我创建了这个网站，并且我做了一个导航栏。它在锚标签中有虚拟链接，我的按钮上有一个悬停属性。所有这一切都运作正常。我对代码做了一些更改，现在没有任何改变。我无法弄清楚我哪里出错了。我在下面提供了我的代码。我是个菜鸟，所以要温柔。

* {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Arial";
    color: white;
}

html, body {
    margin: 0 auto;
    background-color: black;
    max-width: 940px;
    min-height: 100%;
}

.wrapper {
    margin: 0 auto;
    width: 92%;
    background-image: url("images/backgrounds/wood.jpg");
}




/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/



.header {
    position: relative;
    height: 100px;
    background-color: #111111;
}

.header h1 {
    position: relative;
    margin: 0;
    height: 20px;
    text-align: center;
    font-size: 2.3em;
    top: 25%;
}

.header p {
    position: relative;
    top: 25%;
    width: 100%;
    font-size: 1em;
    text-align: center;
}




/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/



nav {
    height: 40px;
}

nav ul {

}

nav ul li {
    background-color: #111111;
    text-align: center;
    list-style-type: none;
    width: 25%;
    float: left;
    /*margin: 0 1%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #000;*/
}

nav ul li a {
    text-decoration: none;  
    line-height: 40px;
    display: block;
}

nav ul li a:hover {
    background-color: #222222;
}



/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/



.jumbotron {
    position: relative;
    background-image: url(images/jumbotron/studiopic.jpg);  
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    max-height: 53%;
}

.jumbotext h1 {
    display: inline-block;
    position: absolute;
    bottom: 0px;
    text-align: right;
}



/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/



.footer {
    height: 100px;
    width: 100%;
    background-color: #111111;
}

这是我的CSS。我正在编辑属性和刚停止工作的东西

var query = jQuery('#my_variable');
var myFile = query.myfile('formatText');

Answer 1

在nav ul li a中添加此内容：

position: relative;

* {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Arial";
    color: white;
}

html, body {
    margin: 0 auto;
    background-color: black;
    max-width: 940px;
    min-height: 100%;
}

.wrapper {
    margin: 0 auto;
    width: 92%;
    background-image: url("images/backgrounds/wood.jpg");
}




/*********************************************************************************************************************************************
HEADER STYLING
*********************************************************************************************************************************************/



.header {
    position: relative;
    height: 100px;
    background-color: #111111;
}

.header h1 {
    position: relative;
    margin: 0;
    height: 20px;
    text-align: center;
    font-size: 2.3em;
    top: 25%;
}

.header p {
    position: relative;
    top: 25%;
    width: 100%;
    font-size: 1em;
    text-align: center;
}




/*********************************************************************************************************************************************
NAVIGATION BAR STYLING
*********************************************************************************************************************************************/



nav {
    height: 40px;
}

nav ul {

}

nav ul li {
    background-color: #111111;
    text-align: center;
    list-style-type: none;
    width: 25%;
    float: left;
    /*margin: 0 1%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #000;*/
}

nav ul li a {
    text-decoration: none;  
    line-height: 40px;
    display: block;
    position: relative;
}

nav ul li a:hover {
    background-color: #222222;
}



/*********************************************************************************************************************************************
JUMBOTRON STYLING
*********************************************************************************************************************************************/



.jumbotron {
    position: relative;
    background-image: url(images/jumbotron/studiopic.jpg);  
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    max-height: 53%;
}

.jumbotext h1 {
    display: inline-block;
    position: absolute;
    bottom: 0px;
    text-align: right;
}



/*********************************************************************************************************************************************
FOOTER STYLING
*********************************************************************************************************************************************/



.footer {
    height: 100px;
    width: 100%;
    background-color: #111111;
}

 <div class="wrapper">
        <div class="header">
            <h1>CM Sound</h1><br/>
            <p>Create with us</p>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Audio</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>  
        <div class="jumbotron">
            <div class="jumbotext">
            </div>
        </div>
        <div class="footer">

        </div>
    </div>

Answer 2

nav {
height: 40px;
position: relative;
}

只需添加相对于nav的位置

我的网页按钮无法正常工作。悬停和链接不起作用

2 个答案: