庇护祝福的分享

Be worthy

前端样式库小结

之前整理了一些标准化的的样式作为公司的前端类库,总结一下主要内容:

scss和compass的应用

渐变色,圆角等在IE上的实现

使用PIE,但是只能实现二维度的颜色渐变,也无法指定圆角的位置,但足以应付大多数的需求。

表单样式的统一与美化

label标签的应用

example:

<label class="numberborder">
    <input id="s1" class="number" value=1></input>
    <div class="numberadjust" id=1>
        <div class="numberup"></div>
        <div class="numberdown"></div>
    </div>
</label>     

点击label标签可以直接获取与label标签关联表单的焦点,由于表单元素在不同浏览器下的默认样式都不一样且不够美观,
而且有些表单样式无法通过css修改,那么通过隐藏原有表单并设置label标签的样式来实现。

滚动条样式的美化

example:

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track        //滑轨
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb           //滚动条里的滑块
{
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(200,200,200,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive
{
background: rgba(200,200,200,0.4); 
}

浏览器兼容性问题整理

IE6,7下的z-index问题

inline-block纵向显示问题

IE不支持position:fixed问题

如何去除IE虚线框

js插件的整理

作为一种面向对象的语言,实际工程中,我们更多的使用现成的js类库,需要对好用的类库做一些整理,以加速开发进度。

前端表单验证:

自定义<select>标签样式:

Bootstrap中整合的js部分: