Css笔记

Css动态宽高calc

.dt{
    height: calc(67% - 10px);
    width: calc(63%);
    right: calc(37% - 1.5px);
}

 

Bootstrap与其他样式冲突（laydate、UMeditor、JqGrid）问题

/*解决Bootstrap3与JqGrid冲突问题*/
.ui-jqgrid *{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  .ui-jqgrid *:before,
  .ui-jqgrid *:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

 

滚动条样式

/**设置滚动条的样式**/
::-webkit-scrollbar {
    width: 10px;
}
/**滚动槽**/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #d1cfcf;
    border-radius: 10px;
}
/**滚动条滑块**/
::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background: #f7f7f7;
    -webkit-box-shadow: inset 0 0 6px #d1cfcf;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(245,245,245,0.4); 
}

 

/*滚动条样式*/
::-webkit-scrollbar {
            width: 7px;
            height: 7px;
        }

        ::-webkit-scrollbar-track { /*border-radius: 10px;*/
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
        }

            ::-webkit-scrollbar-track:hover {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
                background-color: rgba(0,0,0,0.01);
            }

            ::-webkit-scrollbar-track:active {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
                background-color: rgba(0,0,0,0.05);
            }

        ::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.05); /*border-radius: 10px;*/
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgba(0,0,0,0.2); /*border-radius: 10px;*/
            -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
        }

            ::-webkit-scrollbar-thumb:hover {
                background-color: rgba(0,0,0,0.4);
                -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
            }

            ::-webkit-scrollbar-thumb:active {
                background-color: rgba(0,0,0,0.4);
            }

 

text和select样式

.txt{
    border: 1px solid #dce4ec;
    color: #34495e;
    font-family: "Lato", sans-serif;
    font-size: 14px;
   
    text-indent: 1px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height:30px;
}
select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;

  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("http://images.cnblogs.com/cnblogs_com/elves/588391/t_arrow.png") no-repeat scroll right center transparent;


  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

 

<!--文字样式1：-->
<span class="sp_bt" style="letter-spacing: -3px;font-size: 21px;color: #0092ff;">o</span>
<!--文字样式2：-->
<span class="sp_bt" style="letter-spacing: -3px;font-size: 16px;font-weight: 600;color: #0092ff;">O</span>

<!--提示框样式（Gis气泡图）-->
<div style="height:160px;width:300px;border-radius:5px;background:#fff;box-shadow:0 0 10px 5px #aaa">
    <div style="height:50px;width:100%;border-radius:5px;background:#F8F9F9;border-bottom:1px solid #F0F0F0">
        <span style="line-height:50px;margin-left:18px">
            山东省
        </span>
        <span style="float:right;line-height:50px;margin-right:18px;color:#5396E3;cursor:pointer">
            点击查看详情
        </span>
    </div>
    <div style="height:110px;width:100%;border-radius:5px;background:#fff">
        <div style="padding-left:18px;padding-top:22px">
            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(92,169,235,1)">
            </span>
            <span>
                有效条数
            </span>
            <span style="float:right;margin-right:18px">
                2323万
            </span>
        </div>
        <div style="padding-left:18px;padding-top:14px">
            <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgba(92,169,235,1)">
            </span>
            <span>
                质量合格率
            </span>
            <span style="float:right;margin-right:18px">
                85%
            </span>
        </div>
    </div>
</div>

 

/*禁止点击*/
pointer-events: none;
/*禁止选中*/
user-select: none;