Question

我目前有一个＆lt; div＆gt;广场，但不知道如何制作另一个不同风格的广场。我什么时候使用＆lt; div＆gt;要在css中制作另一个正方形，样式将与第一个正方形相同。

CSS:                                  

div{                                  
 height:100px;
 width:95px;
 background-color:#B80000;
 border-radius:4px;
 text-align:center;
 margin-left:132px;
}

html:
<div>
<a href="http://www.mcdonalds.com/us/en/home.html"><span>M</span>i'm lovin' it<l>™</l></a></div>

Answer 1

试试这个

CSS：

#squareA{                                  
 height:100px;
 width:95px;
 background-color:#B80000;
 border-radius:4px;
 text-align:center;
 margin-left:132px;
}

#squareB{                                  
 height:100px;
 width:95px;
 background-color:#B8FFFF;
 border-radius:4px;
 text-align:center;
 margin-left:132px;
}

HTML：

<div id="squareA">
<a href="http://www.mcdonalds.com/us/en/home.html"><span>M</span>i'm lovin' it<l>™</l></a></div>

<div id="squareB">
<a href="http://www.mcdonalds.com/us/en/home.html"><span>M</span>i'm lovin' it<l>™</l></a></div>

说明：

您正在为divs中的所有css设置样式。相同的style将适用于您divs中的所有markup。如果您需要将separate styles应用于单独的元素，例如两个divs，一种方法是为它们提供different ids并将样式应用于特定ID。

P.S：还有很多其他方法。尝试阅读有关CSS样式的更多信息。

Answer 2

为每个人使用不同的身份。

然后为你的css

Div＃first {

}

div＃second {

}

Answer 3

在CSS中使用类而不是id或文字div选择器。创建一个表示方形的类和两个代表颜色的类。

HTML：

<div class="square a">
    <a href="http://www.mcdonalds.com/us/en/home.html">
    <span>M</span>i'm lovin' it<l>™</l>
    </a>
</div>
<div class="square b">
    <a href="#">
    <span>B</span>bee<l>™</l>
    </a>
</div>

CSS：

.square {
    border-radius:4px;
    height:100px;
    width:95px;
    border-radius:4px;
    text-align:center;
    margin-left:132px;
}
.a {
    background-color:#B80000;
}
.b {
    background-color:#00ff00;
}

http://jsfiddle.net/mSA6E/

Answer 4

您可以使用html“id”属性。见jsfiddle：

div {
    width: 100px;
    height: 100px;
}

#red {
    background-color: red;
}

#green {
    background-color: green;
}

<div id="red"></div>
<div id="green"></div>

Answer 5

您可以将任意数量的css类添加到html标记中。例如：

.square { display:block; width:100px; height:100px; }
.red { background:#f00; }
.green { background:#0f0; }
.blue { background:#00f; }

然后

<div class="square red">Red square</div>
<div class="square green">Green square</div>
<div class="square blue">Blue square</div>

这种方法比多次重复相同的指令更加冗长。

如何使用html和css创建多个方块？

5 个答案: