时间戳

首页 > 解决方案 > 为什么我的背景颜色、宽度和高度的 CSS 样式不能在我的最后一个 div >gameover 上工作？

html - 为什么我的背景颜色、宽度和高度的 CSS 样式不能在我的最后一个 div >gameover 上工作？

问题描述

为什么我的背景颜色、宽度和高度的 CSS 样式不能在我的最后一个 div >gameover 上工作？

这第一部分是我的 html 代码： 

<head>
        <title>Maths Game</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user- 
   scalable=yes">
        <link rel="stylesheet" href="styling.css">
</head>

<body>

        <div id="container">
                <div id="score">Score: <span id="scoreValue">0</span></div>
                <div id="correct">Correct</div>
                <div id="wrong">Try Again</div>
                <div id="question">7x7</div>
                <div id="instructionBox">Click on the correct answer</div>
                <div id="choices">
                        <div id="box1" class="box">1</div>
                        <div id="box2" class="box">2</div>
                        <div id="box3" class="box">3</div>
                        <div id="box4" class="box">4</div>
                </div>
                <div id="startReset">start Game</div>

我猜这里是它开始搞砸的地方： 

     <div id="timeremaining">Time remaining:<span id="timeRemainingValue"> 
     60</span> sec</div>
                <div id="gameOver">
                        <p>Game Over!</p>
                        <p>Your score is __</p>
                </div>

        </div>

第二部分是我的 css 代码，只有最后一种样式“游戏结束”不起作用；

    html {
    height: 100%;
    background: radial-gradient(circle, white, grey);
}

#container {
    height: 440px;
    width: 550px;
    background-color: #9DD2EA;
    margin: 100px auto;
    /* this line directly above centers the container top and bottom 100px and left and 
     right to auto so that margin keeps getting 
    bigger and bigger on both sides till the element is center */
    padding: 10px;
    border-radius: 20px;
    /* above line curves corners of element */
    box-shadow: 4px 4px 6px 6px purple;
    -webkit-box-shadow: 4px 4px 6px 6px purple;
    -moz-box-shadow: 4px 4px 6px 6px purple;
    /* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color] 
    */
    position: relative;

}

#score {
    background-color: yellow;
    padding: 10px;
    position: absolute;
    left: 475px;
    box-shadow: 0px 4px purple;
    -moz-box-shadow: 0px 4px purple;
    -webkit-box-shadow: 0px 4px purple;

}

#correct {
    position: absolute;
    left: 240px;
    background-color: green;
    color: white;
    padding: 10px;
    display: none;
}

#wrong {
    /* line 45 makes it to where this element does not interact with other elements and 
    other elements behave as if it doesent exist*/
    position: absolute;
    left: 240px;
    background-color: red;
    color: white;
    padding: 10px;
    display: none;
}

#question {

    margin: 55px auto 10px auto;
    height: 150px;
    width: 420px;
    background-color: rgb(184, 53, 240);
    box-shadow: 0px 4px purple;
    font-size: 100px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif, sans-serif;
    line-height: 150px;
    color: black;
    border-radius: 5px;
    position: relative;
}

#question:active {
    box-shadow: 0px 0px purple;
    -moz-box-shadow: 0px 0px purple;
    -webkit-box-shadow: 0px 0px purple;
    top: 4px
}

#instructionBox {
    height: 60px;
    width: 420px;
    background-color: blue;
    margin: 1px auto 1px auto;
    text-align: center;
    line-height: 55px;
    box-shadow: 0px 4px purple;
    -moz-box-shadow: 0px 4px purple;
    -webkit-box-shadow: 0px 4px purple;
    border-radius: 5px;
    position: relative;
    /* transition: all 0.2s; line 71 & 72 with line 77 make the transition happen on click 
    */
}

#instructionBox:active {
    box-shadow: 0px 0px purple;
    -moz-box-shadow: 0px 0px purple;
    -webkit-box-shadow: 0px 0px purple;
    top: 4px;
}



#choices {
    /* background-color: sandybrown; */
    height: 100px;
    width: 420px;
    margin: 10px auto;
    color: black;
    text-align: center;
    line-height: -50px;
    margin: 10px auto;
    border-radius: 5px;
}

.box {
    /*these boxes are within a choices div to help them size together*/
    margin-right: 26px;
    width: 85px;
    height: 85px;
    background-color: white;
    float: left;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 4px grey;
    -moz-box-shadow: 0px 4px grey;
    -webkit-box-shadow: 0px 4px grey;
    line-height: 80px;
    position: relative;
    /* with position relative and .box:active { top: 4px; the box moves down 4px}*/
    /* transition: all 0.2s;
             -webkit-transition: all 0.2s;
             -moz-transition: all 0.2s;
             -o-transition: all 0.2s;
             -ms-transition: all 0.2s; */
}

.box:hover,
#startReset:hover {
    background-color: grey;
    color: white;
    box-shadow: 0px 4px purple;
    -webkit-box-shadow: 0px 4px purple;
    -moz-box-shadow: 0px 4px purple;
}

.box:active,
#startReset:active {
    box-shadow: 0px 0px purple;
    -webkit-box-shadow: 0px 0px purple;
    -moz-box-shadow: 0px 0px purple;
    top: 4px;
}

/* #box1{
            margin: 10px 10px;
            background-color: red;
            width: 30px;
            height: 30px;
        }

        #box2{
            margin: 10px 10px;
            background-color: white;
            width: 30px;
            height: 30px;
        }

        #box3{
            margin: 10px 10px;
            background-color: blue;
            width: 30px;
            height: 30px;
        }*/

#box4 {
    margin-right: 0;
}

#startReset {
    /*these boxes are within a choices div to help them size together*/
    margin-left: 230px;

    width: 100px;
    height: 45px;
    background-color: rgb(255, 255, 255, 0.5);
    float: left;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 4px grey;
    -moz-box-shadow: 0px 4px grey;
    -webkit-box-shadow: 0px 4px grey;
    line-height: 45px;
    text-align: center;
    position: relative;

}

/* instead of writing these same pargraphs of code just at the element id to the similar 
  code alrady made like above */
/* #startReset:hover{
            background-color: grey;
            color: white;
            box-shadow: 0px 4px purple;
            -webkit-box-shadow: 0px 4px purple;
            -moz-box-shadow: 0px 4px purple;
        }

        #startReset:active{
            box-shadow: 0px 0px purple;
            -webkit-box-shadow: 0px 0px purple;
            -moz-box-shadow: 0px 0px purple;
            top: 4px;
        } */

#timeremaining {
    /*these boxes are within a choices div to help them size together*/
    visibility: hidden; 
    /* display: none; */
    margin-left: 10px;
    width: 200px;
    height: 45px;
    background-color: greenyellow;
    float: left;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 4px grey;
    -moz-box-shadow: 0px 4px grey;
    -webkit-box-shadow: 0px 4px grey;
    line-height: 45px;
    text-align: center;
    position: relative;

}

下面是 >gameover 样式或gameOver div 的损坏部分：

#gameOver {
    height: 200px;
    width: 500px;
    background-color: linear-gradient(blue, green);
    font-size: 1.0em;
}

标签： htmlcss

解决方案

推荐阅读