Question

我正在创建一个网页，我在其中创建了一个div。我已将div的背景颜色设置为#ffffff（白色），但我不知道颜色总是如何变黑。

enter image description here

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Quizilla</title>
<link rel="stylesheet" href="CSS/Styles.css" type="text/css">
        <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    font-size:20px;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>

</head>
<body style="background:url(Images/background.gif); background-size: 1350px 1000px;height:100%;width:100%;min-height: 100%;min-width: 100%;overflow-x: hidden;">

        <div id="head" style="position:absolute; top:0; left:0;background-color:#ffffff;height:56px;">
        <ul>
                    <li style="font-size:30px"><a href="Index.html">Quizilla</a></li>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;




                    <li style="float:right;"><a href="Contact.html">Contact Us</a></li>
                    <li style="float:right;"><a href="about.html">About Us</a></li>
                    <li style="float:right;"><a href="Features.html">Features</a></li>
                    <li style="float:right;"><a href="Index.jsp">Home</a></li>
                </ul>
        </div><br><br><br>
        <div id="lowerhead" style="position:absolute;left:0;color:#ffffff;height:56px;">
        <ul>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <li style="float:right;"><a href="login.jsp">Login</a></li>
            <li style="float:right;"><a href="Signup.jsp">Sign Up</a></li>
        </ul>
        </div>
        <center>
        <br><br><br><br>
        <h1>Build </h1>
        <div id="main" style="height:1024px; width:1024px; border:1px solid #000000">
        <div id="leftupper" style="height:500px; width:510px;float:left; border:1px solid #000000">
        <br>
        <h1 style="font-size:36px;color:rgb(58, 67, 86); font-family:comic sans MS;">Online Examination Website</h1>
        <div style="height:310px; width: 460px; float:none;">
 <p style="text-align:justify; font-size:22px; font-family:monospace cursive; font-style:italic">This is the simple website you are searching to organize
    examinations. Its simple interface will help you to create examinations, manage all the results and feedbacks with ease. Just create a list of Questions and Answers and you are good to go.</p>
        </div></div>
        <div id="rightupper" style="height:500px; width:510px;float:right; border:1px solid #000000"><br>
        <h1>Create free test right now!!!</h1>
        <div style="height:310px; width: 460px; float:none;">
        <p style="text-align:justify; font-size:18px; font-family:monospace cursive; font-style:italic">Just enter the title of your of your examination and click on create button to create your test.</p>
        </div></div>
        </div></center>
    </body>
</html><!-- end snippet -->

以下是输出的屏幕截图。请帮助

Answer 1

只需删除background-color: #333;的{{1}}。

<强> Working Fiddle

Answer 2

试试这个，

<DataGrid ItemsSource="{Binding YourDataCollectionWithEnumProperty}" 
yourbehaviors:GridEnumSortingBehavior.UseBindingToSort="True" >

Answer 3

我已经解决了你的问题。

我评论 ul 的背景颜色：＃333 ，并将 div 颜色更改为红色以获得正确的视图。

以下是更新后的代码

<!DOCTYPE html>
<html>
<head>
        <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
/* background-color: #333; Commented this line */
}

li {
    float: left;
    font-size:20px;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<p>This is some text.</p>

<div style="position:absolute; top:0; left:0;background-color:red;height:56px;">
        <ul>
                    <li style="font-size:30px"><a href="Index.html">Quizilla</a></li>
                    ]
                    <li style="float:right;"><a href="Contact.html">Contact Us</a></li>
                    <li style="float:right;"><a href="about.html">About Us</a></li>
                    <li style="float:right;"><a href="Features.html">Features</a></li>
                    <li style="float:right;"><a href="Index.jsp">Home</a></li>
                </ul>
        </div><br><br><br>

</body>
</html>

希望这有帮助！

Answer 4

您在基本CSS中使用背景颜色属性作为ul标记，这就是为什么这会将颜色＃333 应用于页面中的所有ul标记块，如果您想将背景添加到任何特定的ul或li块然后为它们分配一个类，然后分别添加背景颜色。只需删除或注释此行即可从ul块中删除黑色背景。

背景色：＃333;

即使将div设置为白色，div的颜色也总是如此

4 个答案: