近两年来,程序员有一句话很流行,“不要重复制造轮子”,所以出现了许许多多让我们非常受用的各种框架。Framework在开发的各个领域给我们减少了很多工作量。而对于网页设计师来说,一直以来,缺少这样的Framework来帮助设计师们减轻工作量。
今天给大家推荐一些不错的CSS Framework:
首先是本文的主角:
这是一个非常轻量级而且很少侵入性的框架(这话怎么看都不是网页设计师能熟悉的,:-) ),换句话来说,这是一个很底层的CSS Framework,并没有替你实现任何布局,也没有提供很多好看的模板。它只是帮你把一些最基本的事情做掉了,剩下的交给自己来了。非常适合那些具有一定开发经验的网页设计师使用。我做了一些中文化修改,大家如果发现问题,可以联系我。
reset.css
html, body, div, span,applet,
object, iframe,h1, h2, h3, h4, h5, h6,
p, blockquote, pre,a, abbr, acronym,
address, big, cite, code,del, dfn, em,
font, img, ins, kbd, q, s, samp,small, strike,
strong, sub, sup, tt, var,dd, dl, dt,
li, ol, ul,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
tr, th, td {
margin: 0;padding: 0;border: 0;
font-weight: inherit;font-style: inherit;
font-size: 100%;line-height: 1;
font-family: inherit;
text-align: left;vertical-align: baseline;
}
a img, :link img, :visited img {border: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
q:before, q:after,blockquote:before, blockquote:after {content: “”;}
首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。
global.css
body{background-color:#FFFFFF;}
body, p, td, th, li
{
font-family: “宋体”,verdana,helvetica,sans-serif;
font-size:0.875em;
line-height:1.5em;
color:#000000;
}
注意两点,这里定义了背景色和前景色,这是标准要求的,是网页可用性的一个基本方面,大家可以执行修改。
第二点,就是font-size的问题,为了让网页更好的支持网页缩放功能,应该使用em来替换px,这样会让ie6等上古浏览器也能良好的支持网页缩放。浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em,也就是12px=0.75em, 10px=0.625em,通过1px=0.0625em大家可以在CSS编写时通过px转换成em。
/* Standard Definitions
—————————————-*/
.left {float:left;}
.right {float:right;}
.clearIt {clear:both;}
/* =10px */
.small {font-size:.625em;}
/* =14px */
.large {font-size:0.875em;}
/* =16px */
.larger {font-size:1em;}
.soft {color:#D3D3D3;}
.hide {display:none;}
p.last {margin-bottom:0px;}
提供了一些比较实用的预定义类。
print.css
感谢Hartija Css Print Framework提供,这里面有个非常好的idea,我们来看一下,大大提高了打印效果:
/*hide various parts from the site
#header, #footer, #navigation, #rightSideBar, #leftSideBar
{display:none;}
*/
对于网页打印来说,我们更需要的是正文内容,这样可以将那些美丽的元素暂时藏掉。
打包下载:element_css_framework_modify.rar
//———————————————————————
下面介绍些其他出色的框架:
更多请参看:http://webtecker.com/2008/04/17/list-of-css-frameworks/
本文来源:http://www.1x3x.net/blog/web-design/2008/04/css-framework.html
分享到:
相关推荐
跟我学HTML+CSS--框架元素
广告------css---css广告------css---css
This is a code copy for Emastic, which as so fas as saying, is a hackable CSS framework,which home page is [ https://code.google.com/p/emastic/ ]. This copy comes from the politics reason between ...
前端开源库-postcss-css-variablespostcss css变量,postcss插件,用于将css自定义属性(css变量)语法转换为静态表示形式
未命名是一个简单的彩色css框架,建议在学习某些东西时使用它,而您又懒得为创建的样式设计组件或构建原型。 Npm npm install --save unnamed 纱 yarn add unnamed CDN <link rel="stylesheet" href=...
Box-CSS-Framework:Box-CSS框架
HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 ...
nec规范之css框架文件,详见博文:http://blog.csdn.net/chen_zw/article/details/47908475
ez-css初次体验,请不要和bootstrap等...而且EZ-CSS的扩展性很强,对浏览器兼容性较为友好,利用EZ-CSS,你可以快速的实现较为复杂的网页布局排版。介绍地址:http://blog.csdn.net/lht0211/article/details/45670537
学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习html-css学习html-css学习html-css学习html-css 学习...
Hartija --- CSS-Print-Framework:网页打印通用CSS
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
npm install postcss-css-variables --save-dev 目录 -- ---嵌套规则 为什么? -互操作性-与postcss-custom-properties差异 注意事项 选项 快速参考/注释 测验 变更日志 代码游乐场 在操场上尝试一下,看看您的想法...
响应式页面 引用的两个js 兼容ie8 ie7的html5标签与media属性 css3-mediaqueries.js html5.js
演示版要查看此简单的PostCSS框架提供的内容,请访问: ://simple-postcss-framework.hjemmesidekongen.dk/这个框架提供了什么? 网格纽扣排版(段落,链接和标题) 布局(向下压页脚) 形式元素重置常见元素安装及...
Tailwind CSS 一个实用第一的CSS框架,用于快速构建自定义UI
Kntnt CSS框架( KCF )是一整套级联的样式表,可让您更轻松地构建网站。 背景 有很多CSS框架。 可以说最广为人知的是 ,它是一个了不起的工具包,“具有Sass变量和mixin,响应式网格系统,广泛的预建组件以及强大...
CSS Pro布局 CSS库,用于构建响应式和可自定义的...import 'css-pro-layout/dist/css/css-pro-layout.css' ; CDN 您也可以使用的CDN链接 < link href =" https://unpkg.com/css-pro-layout/dist/css/css-pro-layout
响应式css+兼容手机+平板+电脑PC 拼图跨屏响应式布局前端开发CSS框架-综合示例
前端项目-cascade-framework,CSS framework that puts back the C in CSS