监控平台项目之CSS总结——基于angularjs、bootstrap、jquery等框架

1.新加一个类名，实现切换页面主题

在需要变色的标签处，添加该类名，即可实现最简化切换页面主题。

HTML：

<section ui-view="">  </section>/*页面切换容器 */
<div class="A red">/*A页面 */
    <input type="button" class="red-border" value="确定"/>
</div
<div class="B blue">/*B页面 */
    <input type="button" class="blue-border" value="确定"/>
</div 

CSS:

 section{  }/*两个页面的基础样式 */
 .red{background-color:#f06963;}
  .red-border{border-color:#f06963;}
  .blue{background-color:#337ab7;}
  .blue-border{border-color:#337ab7;}

2.新加一个类名，实现下拉菜单右侧图标样式更改（如图标旋转或图标更改），具体如下。

HTML:

 <a class="advanced" data-toggle="collapse" data-parent="#accordion" data-target="#collapse">高级选项
       <span class="caret "></span>
 </a>

CSS:

a.advanced span.caret{
    -webkit-transform: rotate(270deg);/*角度根据页面调试，范围从0~360°*/
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
}

a.caret-changed span.caret{
    -webkit-transform: rotate(360deg);/*角度根据页面调试，范围从0~360°，与上一个旋转值之差为90*/
    -moz-transform: rotate(360deg);

}

JS:

<script type="text/javascript">
    $(function(){
       $("a.advanced").click(function(){
          if($(this).hasClass('caret-changed')){
             $(this).removeClass("caret-changed");
         }else{
             $(this).addClass("caret-changed");
          }
      });
   });
</script>

 

3.子div溢出父div：

子div样式中可能存在float:left/right样式，在父div添加clearfix类名。

<div class="clearfix">/*父div*/
    <div>/*子div*/
    </div>
 </div> 

4.后续