标签归档:css

元素添加class,页面不显示

有的时候我们copy别人的代码,然后自己修改样式,这时候就会容易犯错误。

比如:

<input class="input1" type="text" name="email" id="email" value="" />

当我们想要新添加一个样式,比如添加一个class form-control

.form-control{
       display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

我们可能会这样写

<input class="input1" type="text" name="email" id="email" value="" class="form-control"/>

我们刷新页面的时候,发现页面没有添加form-control.我们不自觉的认为这是缓存,结果却不是,我们这是后就崩溃了,其实问题的原因就是前面有了input1这个class,如果我们想添加class,直接添加到前面那里就行了。。

<input class="input1 form-control" type="text" name="email" id="email" value="" />

最后想说的就是“细节决定成败”,当我们看不出问题的时候,不如重新自己敲打一遍代码,问题就解决了.

有效解决float,导致DIV高度无法自适应的方法

本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。

DIV高度自适应的三种有效解决方法

DIV+CSS设计俨然已成网页设计界的标准了。这种设计的好处大家都是知道的,但有些小问题确实很棘手,例如令人头痛的“DIV高度自适应”问题。

现在有三种解决DIV高度自适应行之有效的办法,一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。

1、JS法

用JS判断左右DIV的高度,若不一致则设为一致。
$(document).ready(function(){
if($(“.right”).height()>$(‘.left’).height()){
$(“.left”).height($(“.right”).heght)();
}
});

2、背景图填充法

第二种解决DIV高度自适应的方法是背景图填充法,这是大站用得比较多的方法。

这里是给父DIV设置了背景图片填充,所有DIV都不设高度。

3、补丁大法

最后一种DIV高度自适应的方法就是补丁大法。就是 “隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法。比较另类一点的方法,在IE6、IE7、FF3下测试通过。原理自己理解。

父DIV设置 overflow:hidden;