需要CSS代码帮助

Question

我正在寻找如何在我的盒子里添加另一个盒子，这个盒子会褪色作为特定盒子的标题栏（如果有意义的话）！

所以基本上，在SOCIALBOX中，我希望在顶部放置一个褪色的栏，作为标题栏。

在一些人说他们不确定我的意思之后，我在photoshop中创建了一个快速图像作为参考点。

代码段：

＆＃13;

＆＃13;

body {
  background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */

#menubar {
  width: 98.5%;
  height: 40px;
  background-color: #000000;
  position: fixed;
  border: 2px solid #ffffff;
}
.inside_text {
  color: #FFFFFF;
  float: right;
  margin: 11px 7px 0 0;
}
.inside_text2 {
  color: #FFFFFF;
  float: left;
  margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */

#socialbox {
  width: 40%;
  height: 40%;
  position: relative;
  float: right;
  margin: 0 8px 0 0;
  background-color: #000000;
  border: 2px solid #126b72;
}

＆＃13;

<div id="menubar">
  <div class="inside_text">
    PLACEHOLDER TEXT
  </div>
  <div class="inside_text2">
    PLACEHOLDER TEXT
  </div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

所以你要求在SOCIALBOX div中有一条褪色的线，作为标题的下划线？

如果那样正确创建另一个类

.title-bar
{
    border-bottom:3px;
    solid black;
    opacity:0.3;
}

保证金左右的位置该类中的margin-top值基于您在SOCIALBOX中的位置。

例如：

.title-bar
{
    border-bottom:3px;
    solid black;
    opacity:0.3;
    margin-left:50px;
    margin-top:30px;
    float:left;
}

创建一个：

<div class="title-bar"></div> 

并将其置于

之内

<div id="socialbox"></div>

BTW习惯在使用CSS定位div时使用float:left，尽量避免使用position:absolute或修复，除非绝对必要。它就这样清洁干净。