改变线hr的颜色

Question

这是我的网站。我需要第三部分的那条线是黑色的…我使用的hr标签和样式为白色的css，因为它之后的页面，我需要它在一个白色?那么我该如何设计不同的样式呢?对不起，我是html/css的新手!

请帮忙!

http://opax.swin.edu.au/~ 9991042/DDM10001/brief_2/阿% 20海岸/www_root/

<div id="con2">
<div id="box3">
<span class="fontheading">RESEARCH, PLAN AND SAVE  </span> <br><hr /><br>
<span class="font1"> You&#39;ll collect all of <br>your favourite <br>
Amalfi activities <br>and attractions <br>in one place </span>
<br><br><span class="font2">Just sign up<br>for your free<br>account 
<a href="#">here</a></span>
 </div>
 </div>

CSS

 hr { width:100%; height:1px; background: #fff }

Answer 1

<hr>使用border，而不是background-color。事实上，它四面都有边界。我通常通过在设置border-bottom-*属性之前设置border-width: 0px;来覆盖这个

hr {
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;
}

如何设置不同的样式?

为<hr>标签添加一个你想要更改的类。

<hr class="white">

然后只对该类应用css

hr.white {
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;
}

你可以通过改变line-height属性的值来改变<hr>标签垂直占用的空间量。

hr.white {
    line-height: 1px;
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FFF;
}

Answer 2

为不同的hr标签添加不同的类，例如:<hr class='hr-black'/>然后在CSS中更改颜色