小编Der*_*ory的帖子

我已将页眉和页脚宽度设置为 100%，但不知何故页眉比页面宽，使滚动条出现在底部，内容和页脚匹配页面宽度，只有页眉更宽，可能是因为我在页眉内使用了媒体查询下拉菜单. 我的代码是

* {
 margin: 0px;
 padding: 0px;
 font-family: Arial, Helvetica, Sans-serif;
 font-size: 12px;
 background-color: #EDEDED;
 }

.headerMenu{
 width: 100%;
 padding: 30px;
 background-color:#BF3B3D;
 }
 #wrapper {
 width:100%;
 background-color:#BF3B3D;
 }

 .logo img {
  position: absolute;
  top:0;
  float:left;
  background-image: url(../img/menu_bg.gif);
  width: 110px;
  height: 58px;
  }
 .search_box {
  top: 7px;
  float:left;
  color: #198C9E;
  background-color:#BF3B3D;
  position: absolute;
  margin-left: 155px;
  } 

 @media screen and (max-width: 1280px) {
 .dd {
   background-color:#BF3B3D;
   position: absolute;
   right:0px;
   top:0;
   margin-right: 4%;
   }  
   }

  @media screen and (min-width: 1280px) { …

我使用HTML和一些JavaScript制作了一个计算器,但我不知道如何更改按钮的颜色,每个按钮在悬停时都会变成另一个颜色.以下是其中一行的代码:

<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="one" value="!" OnClick="Calc.Input.value += '!'">
<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="two" value="@" OnCLick="Calc.Input.value += '@'">
<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="three" value="#" OnClick="Calc.Input.value += '#'">
<input style="height:25px; width:40px;" type="button" class='btn btn-default btn-success btn-lg' name="plus" value="+" OnClick="Calc.Input.value += ' + '">

这是我用来在悬停时更改按钮颜色的CSS代码:

.btn:hover {
background-image: none;
background-color: #ff69b4;
font-weight: bold;
}

它会在悬停时改变按钮的颜色,但我想让每个按钮都有不同的颜色.

我有响应背景,我希望在该背景上有一个YouTube视频(不是全宽).

在这里,我尝试过这样做.

http://jsfiddle.net/audetwebdesign/EGgaN/#run

HTML:

<div class="bg-image">
            <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
             <iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
        </div>

CSS:

.bg-image {
position: relative;
}  
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}