Currently Browsing: XHTML & CSS

精选15个国外CSS框架

什么是css框架

实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

  • typography.css 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

 

下面一起来了解一下各种不同的CSS框架吧:

1.960 Grid System

CSS-框架-960

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。
……
read more...

Don’t make me think pdf 下载


最近很懒,估计是春天到了,老是犯困,一本书啃了好几天~~,《Don’t make me think 》确实是本好书,推荐从事互联网工作的朋友阅读一下,
点击下载PDF

纯css下拉菜单-出自eric meyer谈css

周末去图书馆翻了几本css的书,翻了《eric meyer谈css》,《CSS那些事儿》,《精通CSS与HTML设计模式》,《CSS权威指南》,学了些新东西。
印象最深的是eric大师的css驱动的下拉菜单,和大家分享一下啊:

提示:你可以先修改部分代码再运行。

IE6下面需要csshover.htc文件,示例代码下载(包括csshover.htc文件)
大师的《eric meyer谈css》书(英文)和示例代码下载

浅谈css框架开发

个人总结了在开发css框架中的一点经验,献丑了。希望大家的讨论能使我们共同进步。:)

1、css框架

中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中,有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器。为什么呢?因为框架是包含工具、函数库、约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。
……
read more...

IE6bug总结

强文:http://www.vfresh.org/w3c/727

弹出div居中

兼容浏览器:IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2

提示:你可以先修改部分代码再运行。

原文:http://www.14px.com/?p=183

CSS命名规划整理

(一) 常用的CSS命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
……
read more...

Eric Meyer Reset

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: "" "";
}

Eric’s Archived Thoughts

CSS hack 完全手册 ( IE5.5 IE6 IE7 IE8 FF Opera Safari…)

区别 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 */

css布局精髓

css布局精髓

很好的参考案例,值得研究,打开

Page 1 of 3123»