之前整理了一些标准化的的样式作为公司的前端类库,总结一下主要内容:
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类库,需要对好用的类库做一些整理,以加速开发进度。