Question

我有一个简单的html脚本，只包含一个导航栏，但由于某种原因，我无法在css中为我的身体添加颜色。我经常一遍又一遍地试过。任何人都可以在这里看到我的错误。

HTML

<html>

<head>
        <title>OUZO</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="animate.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="images/logo-4.ico">
</head>

<body>

    <nav align="middle">

        <ul>
            <li><a href="#"><img src="images/video-menu.png" class="vid" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/video-menu-hover.png'"onmouseout="this.src='images/video-menu.png';"></a></li>
            <li><a href="#"><img src="images/news-menu.png" class="news" style="height:35px; width:70px; margin-bottom:20px; border-left:8px solid black; border-right:8px solid black;" onmouseover="this.src='images/news-menu-hover.png'"onmouseout="this.src='images/news-menu.png';"></a></li>
            <li><a href="#"><img src="images/logo.png" class="home" style="height:80px; width:80px;" onmouseover="this.src='images/logo-hover.png'"onmouseout="this.src='images/logo.png';"></a></li>
            <li><a href="#"><img src="images/games-menu.png" class="games" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black;border-left:8px solid black;" onmouseover="this.src='images/games-menu-hover.png'"onmouseout="this.src='images/games-menu.png';"></a></li>
            <li><a href="#"><img src="images/music-menu.png" class="music" style="height:35px; width:70px; margin-bottom:20px; border-right:8px solid black; border-left:8px solid black;" onmouseover="this.src='images/music-menu-hover.png'"onmouseout="this.src='images/music-menu.png';"></a></li>
        </ul>



    </nav>



    </body>

    </html>

CSS

    li {

display: inline;
margin-right: .75em;
padding: 2px;

}

body {
height: 100%;
overflow: hidden;  
background-color: #d8d8d8;
}



@font-face {
font-family: Font;
src: url('fonts/font.woff') format('woff'),
url('fonts/font.woff');
}

a {
font-size: 15px;
color: black;
text-decoration: inherit;
}


ul {
 position: fixed;
 left: 0;
 right: 0;;
 margin: 0;
 padding: 0;
 border-bottom: 8px solid black;
 border-width: 100%;
 background-color: #d8d8d8;

}

Answer 1

我将您的身体背景颜色更改为红色，以表明它在这里工作是小提琴http://jsfiddle.net/DIRTY_SMITH/abtuj3xj/2/

这是你的代码

body {
height: 100%;
overflow: hidden;  
background-color: red;
}

我的猜测是：您的第二个样式表是否覆盖了第一个样式表，将styles.css下的链接放在animate.css下面

Answer 2

您正在使用JQuery Mobile，因此您必须覆盖JQM样式。另外，您需要将style.css放在JQM样式链接下面。

.ui-page { background:#000; }

为什么我不能给我的身体添加背景？

2 个答案: