css 样式收集

以下为项目常用的样式：

1、自定义滚动条样式：

/*控制滚动条样式*/

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: #337ab7;
    border-radius: 4px;
}

2、背景图片定位、大小设置

.box{
    content:"";
    position: fixed; /*div浮动在屏幕上*/
    background:url(/scripts/apps/images/bgn.png) no-repeat -245px 0px;  /* -245向左移动245px到达指定位置，0px控制纵坐标位置 */
    width:10px;  /*显示宽度*/
    height:100%; /*显示高度*/
    z-index:50;  /* 保证div可以显示在其他div之上 */
    cursor: pointer; 
}

如果想改变背景图上，某图形元素的实际大小，需要设置background-size属性；
注意：background-size属性必须在background属性之后使用才有效；

以下为我的bgn.png图片
这里写图片描述

3、div的特定位置

.box-l {
    float: left;  /*靠左显示*/
    left:17%;     /*距离屏幕左边的宽度*/
    margin-left:-12px;
    z-index:50;   /*当前div显示其他div之上*/
}

.box-l {
    float: right;
    right:17%;
    margin-right:-13px;
    z-index:50;   /*当前div显示其他div之上*/
}

html代码
<div class="container-fluid" style="padding-left:5px; padding-right:5px;">
    <!-- 浮动框 -->
    <div id="float_box">
        <div class="box box-l"></div>
        <div class="box box-r"></div>
    </div>
</div>

利用2、3两个样式，我最终出现的效果图如下：
这里写图片描述

下面摘抄一段z-index属相的用法：
这里写图片描述

4、table-td自动换行

字母一般会被浏览器默认是一个字符串或者说一个单词，不会自动换行

1.一般标签把style设置成”word-wrap:break-word;word-break:break-all;”（一般情况只需要设置word-break:break-all即可，但是有时候需要加word-wrap:break-word ）

2.table比较特殊，首先需要把table的sytle设置成”table-layout:fixed”，意思是表格需要固定宽度，同时也需要自适应他外面的容器，也不要撑出去，其次设置td的style=”word-wrap:break-word;”换行，这样td就可以自动换行了，具体代码如下：

<table class="table table no-margin" style="table-layout:fixed;">
    <thead>
        <tr>
            <th width="10%">序号</th>
            <th width="70%">条件</th>
            <th width="20%">数量</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>189</td>
            <td style="word-wrap:break-word;word-break:break-all;"> <!-- 必须设置 table style="table-layout:fixed;" -->
            ((devicetype="router"||devicetype="broadband router"||devicetype="switch"||devicetype="load balancer"||devicetype="bridge"||devicetype="hub") && e) && os%3d%22windows%22                       
            </td>
            <td>4</td>
        </tr>
    </tbody>
</table>

这里写图片描述

猜你喜欢