Question

我正在尝试使用您在下面看到的css代码更改HTML代码中的框的颜色，但由于某种原因，颜色不会改变。

<div class="menu">
    <ul>
        <li>The Flight</li>
        <li>The City</li>
        <li>The Island</li>
        <li>The Food</li>
    </ul>
</div>

<div class="main">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

css如下：

* {
    box-sizing: border-box;
}

.menu{
    width:25%;
    float: left;
    border:1px solid red;
    height:75%;
}

.main{
     width:75%;
     height:75%;
     float: left;
     border:1px solid red;
 }

如何更改盒子（网格）的颜色？我还添加了在线代码，以防有人喜欢看： https://jsfiddle.net/Wosley_Alarico/b2htLvcj/

Answer 1

只需添加css背景：colorcode;

Like This:
* {
    box-sizing: border-box;
}



.menu{
    width:25%;
    float: left;
    border:1px solid red;
     height:75%;
     background:lightblue;
}

.main{
    width:75%;
    height:75%;
    float: left;
    border:1px solid red;
    background:skyblue;
}

<div class="menu">
            <ul>
                <li>The Flight</li>
                <li>The City</li>
                <li>The Island</li>
                <li>The Food</li>
            </ul>
        </div>

        <div class="main">
            <h1>The City</h1>
            <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
            <p>Resize the browser window to see how the content respond to the resizing.</p>
        </div>

Jsfiddle链接：gr-osmosdr

在css中更改框的颜色

1 个答案: