改变行hr的颜色

时间:2015-05-29 22:38:42

标签: html css navigation hover

这是我的网站..我需要第三部分的那条线是黑色的..我使用hr标签并在css上将其设置为白色,因为之后的页面我需要它是白色的吗?那么我如何以不同的方式设计它们?对不起,我是html / css的新手!

请帮忙!

http://opax.swin.edu.au/~9991042/DDM10001/brief_2/Amalfi%20Coast/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 }

2 个答案:

答案 0 :(得分:2)

<hr>使用的是border,而不是background-color。事实上,它有各方面的边界。我通常会在设置border-width: 0px;属性

之前设置border-bottom-*来覆盖此设置
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;
}

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

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

答案 1 :(得分:1)

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