Question

我正在使用div运算符创建一个网页的一部分。所以我有一个带有光滑边缘和一些内容的大盒子，但是我想在这个盒子里面创建一个按钮，我想再次使用div属性。我如何通过CSS设置这个新按钮的样式？显然，如果我只是改变CSS中的div属性，我会覆盖旧的按钮。

到目前为止，这是代码：

<!DOCTYPE HTML>
<html>-
   <header>-
       <title> Derps</title>-
       <link type="text/css" href="stylesheet.css" rel="stylesheet"/>
   </header>
<body>
<div>
    <h1> Derpsps</h1>
    <p>
        Random text for my website
    </p>
      <img src="picture1.jpg " class="left"height="300" />
      <img src="logo-thingymchee.png" class="right"height="100" />
</div>
</body>
</html>

CSS：

div{
    height:800px;
    width: 1300px;
    border-color:#6495ED;
    background-color:#BCD2EE;
    border-width:2px;
    border-style: solid;
    border-radius:5px;
    margin: auto;
    text-align: center;
}

Answer 1

您只需使用这些类即可。

使用“按钮”类创建另一个div

通过CSS设置div.button的样式

<强> HTML

<div>
    <h1> Derpsps</h1>
    <p>
        Random text for my website
    </p>
    <img src="picture1.jpg " class="left"height="300" />
    <img src="logo-thingymchee.png" class="right"height="100" />
    <div class="button">Button</div>
</div>

<强> CSS

div
{
    height:800px;
    width: 1300px;
    border-color:#6495ED;
    background-color:#BCD2EE;
    border-width:2px;
    border-style: solid;
    border-radius:5px;
    margin: auto;
    text-align: center;
}
div.button
{
    border-color:#6495ED;
    background-color:#BCD2EE;
    border-width:2px;
    border-style: solid;
    border-radius:5px;
    margin: 10px auto 10px auto;
    text-align: center;
    padding: 10px;
    width: auto;
    height: auto;
    display: inline-block;
}

Answer 2

我猜你正在努力实现的目标是：

<!-- this is your original box -->
<div class="container">
    <!-- this will be the button -->
    </div>
    </div>
</div>

通过向第一个div添加一个类，您可以为其指定一个特定的样式。你现在可以这样做：

div.container {
    height:800px;
    width: 1300px;
    border-color:#6495ED;
    background-color:#BCD2EE;
    border-width:2px;
    border-style: solid;
    border-radius:5px;
    margin: auto;
    text-align: center;
}
div div {
    // Other style here
}

或任何其他形式的CSS。

我建议使用HTML <button>而不是<div>。

将一个盒子放入另一个盒子

2 个答案: