什么是css框架
实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。
css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:
下面一起来了解一下各种不同的CSS框架吧:
960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。
……

最近很懒,估计是春天到了,老是犯困,一本书啃了好几天~~,《Don’t make me think 》确实是本好书,推荐从事互联网工作的朋友阅读一下,
点击下载PDF
周末去图书馆翻了几本css的书,翻了《eric meyer谈css》,《CSS那些事儿》,《精通CSS与HTML设计模式》,《CSS权威指南》,学了些新东西。
印象最深的是eric大师的css驱动的下拉菜单,和大家分享一下啊:
提示:你可以先修改部分代码再运行。
IE6下面需要csshover.htc文件,示例代码下载(包括csshover.htc文件)
大师的《eric meyer谈css》书(英文)和示例代码下载
个人总结了在开发css框架中的一点经验,献丑了。希望大家的讨论能使我们共同进步。:)
1、css框架
中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中,有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器。为什么呢?因为框架是包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。
……
兼容浏览器:IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2
提示:你可以先修改部分代码再运行。
原文:http://www.14px.com/?p=183
(一) 常用的CSS命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
……
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } |
区别 IE5.5、IE6、IE7、IE8、w3c
1 2 3 4 5 6 7 | .qq{ background:#f00; /* w3c IE8 IE7 IE6*/ background/*\**/:#fdd\9; /* IE8 IE7 IE6 */ *background:#00f; /* IE7 IE6 */ _background:#0f0; /* IE6 */ _background /**/:#ccc /* IE5.5 */ } |
针对Opera、Safari 、Chrome
1 2 3 | .qq { background: #000; } /* IE FF */ @media all and (min-width:0px){ .qq { background: #000; } /* Opera、Safari 、Chrome */ |
FireFox 3 Only
1 2 | .myClass { color:#666; }/* other*/ html>/**/body .myClass, x:-moz-any-link, x:default { color:#f00; }/* Only FireFox 3 */ |