小杰的博客

导航

渴切-开源中文css框架

渴切:是国内优秀的开源css框架。

渴切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可以让每个网站防 止枯燥的跨浏览器兼容性测试。你可以将他理解成一套模板,里面包含了大多数站点中所需要的那些css类。

渴切框架用途

渴切css开源框架是一款能够帮助快速切图的css衍生产品,实现原理是采用了官网的css重写,重写掉了所有不兼容浏览器的html标签的默认样 式,使之达到浏览器识别上的统一,其次规范了css命名,方便团队协作。还有定义了很多兼容的css样式属性,例如fix固定浮动样式,透明样式等等。是 前端开发人员简化开发的一个不错的产品。

渴切的来源

渴切的前身分别是QuickCSS,ThinkCSS,这两款分别是06年的产品,在08年更名至ThinkCSS,运营至今,是国内最早的css 开源框架产品。在2012年更正式收购keqie域名之后。将ThinkCSS再度改名为中文名称:渴切。QuickCSS和ThinkCSS依然保留存 在,只是版本已经不会再更新。

官方网站:http://www.keqie.com

下载:http://download.keqie.com

模板:http://template.keqie.com

风格:http://theme.keqie.com

渴切css之重写

body {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

* {
}

a {
outline: none;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

html {
zoom: 1;
}

html * {
outline: 0;
zoom: 1;
}

html button::-moz-focus-inner {
border-color: transparent!important;
}

body {
overflow-x: hidden;
font-size: 12px;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}

table {
/*border-collapse:collapse;border-spacing:0;*/
}

fieldset,a img {
border: 0;
}

address,caption,cite,code,dfn,em,th,var {
font-style: normal;
font-weight: normal;
}

li {
list-style: none;
}

caption,th {
text-align: left;
}

h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}

q:before,q:after {
content: '';
}

渴切css之清除浮动

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: block;
}

.clear {
clear: both;
}/* 清除浮动*/

渴切css之ie6透明

/*png图片ie6下透明滤镜实现写法*/
.pngimg {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/x.png');
}

渴切css之透明度

.transparent {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
/** Firefox 3.5即将原生支持opacity属性,所以本条属性只在Firefox3以下版本有效 ***/
-khtml-opacity: 0.5;
opacity: 0.5;
}

渴切css之固定不动

/* 兼容IE6的定位属性fixed,固定不动样式 */
.fixed {
position: fixed;
clip: rect(0 100% 100% 0);
_position: absolute;
/* 底部 */
bottom: 0px;
left: 0px;
_top: expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
/*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/
/* 左侧 */
/*left:0px;*/
/*_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);*/
/*_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);*/
}
/* 解决固定层在IE6下闪的问题 */
*html {
background-image: url(about:blank);
background-attachment: fixed;
}

  

posted on 2013-12-30 11:39  梁晓杰  阅读(461)  评论(0编辑  收藏  举报