我想网

下面这个CSS布局参考大全太有用了，是大量CSS布局模板，这些CSS代码通过了所有浏览器的测试，对于基于CSS的复杂web布局提供了一个优秀的切入点。

要想查看某个CSS布局，点击图片，如果要下载，使用右键，选择“链接另存为”。很棒，点击下面图片进入。

Tags: CSS
Posted in CSS 评论关闭

1. CSS-Tricks

(全文 …)

Tags: Design, Web
Posted in Design, WEB 评论关闭

来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html 翻译:http://parandroid.com
下面为你准备了13个利用Javascript实现的网页导航菜单
转载请注明：我想网 板凳 编辑
1) Sexy Sliding Menu – 基于mootools的Javascript网页导航菜单，漂亮的滑动门技术，看到下面的图了没有，用它来设计你的Sidebar，非常之炫，Sexy，是的。

Demo: Mootols Version
Demo: Script.aculo.usVersion

2) FastFind Menu Script -这个脚本基本动态的Ajax技术，可以让你创建多级嵌套的菜单。

Demo: FastFind Menu

3) Webber 2.0 Dock Menu -一个典型的Dock类型网页导航菜单。

Demo: Webber 2.0 Dock Menu

4) Phatfusion- Image Menu -这这是一个使用Javascript的图片导航菜单，它最大的特点是除了悬浮展开图片链接之外，还保持当前选定的菜单链接状态。

Demo: Phatfusion- Image Menu
Demo: Mootools version with XML parser

5) Drag and Drop ordering in a TreePanel -这个好像是从著名的Ext JS提取的，一个树型导航菜单，灵感当然是来源于Windows的资源管理器，我相信是这样的。

Demo: Drag and Drop ordering in a TreePanel

6) Custom Menu Events

在同一时间内显示展示菜单的介绍和其它相关信息，其动态效果甚至达到Flash。不过缺点是需要再次刷新才能进行导航菜单的动态显示。

Demo: Custom Menu Events | ThinkVitamin.com

7) Context Menu Functionality 一个简洁轻巧的上下文本导航菜单，利于在用户浏览时达到一个良好的交互作用。

Demo: Context Menu Functionality

这是另一个DemoAnother Context Menu

8 ) LavaLamp jQuery Sliding Menu 一个基于jquery的滑动菜单效果，体积比较小巧。另一个版本是来自Guillermo Rauch 基于mootools所构建的。

Demo: LavaLamp jQuery Sliding Menu
Demo: Mootools Fancy Menu

9 ) Slashdot Menu- Dynamic Drive 这是一个流行的滑动/折叠导航菜单，是设计爱好者从著名网站Slashdot中提取的。其可控制性非常强，比如你可以设置为只准打前主菜单打开，或者全部打开，或同时收缩所有的子菜单等，且可以根据Cookie判断来显示菜单。

Demo: Slashdot Menu

10 ) Mootools menu with Accordeon and Effects 非常整洁的一个导航菜单，当鼠标悬浮的时候，当前链接就会伸展出来并且可以显示一个手风琴效果的二级菜单。

Demo: Mootools menu with Accordeon and Effects

11 ) CSS Dock Menu 这又是来自Nick la的Mac风格的鱼眼效果菜单，如果你对这种效果感兴趣，可以看一下我的另一篇文章:
多个Mac风格的鱼眼菜单(Dock Menu)免费下载和教程

Tags: JavaScript, Menu
Posted in JavaScript, Menu 评论关闭

1.Elements CSS Frameworks

(Source: Project Designs)

2.WYMstyle: a CSS framework

(Source: Daniel Reszka)

3.YAML CSS Framework

(Source: High Resolution)

4.YUI Grids CSS

(Source: Yahoo)

5.Boilerplate CSS Framework

6.Blueprint CSS

7.Schema Web Design Framework
(Source: David Golding Design)

8.CleverCSS

9.Tripoli Beta CSS Framework
(Source: Monc)

10.ESWAT Web Project Framework
(Source: Philip Karpiak)

11.CwS CSS Framework
(Source: Content with Style)

12.My (not really mine) CSS Framework

Tags: CSS
Posted in CSS 评论关闭

从这里http://stylizedweb.com/2008/02/14/10-best-css-hacks/看来的，总结得很不错，对UI设计师和前端开发人员很有帮助，同时在他的blog里也有黑多这方面的学习资料，是个不错的地方。

1. Vertical align div

http://stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height

Tags: CSS
Posted in CSS 评论关闭

记得上个月Dejan Cancarevic才为我们介绍了一篇CSS好文“10 best CSS hacks”，想不到他又为我们贡献了一篇力作：Most used CSS tricks，感谢DC。本文章延用了上篇文章的风格，另外还为每个tips添加了效果图，让大家有了更直观的感觉。tips列表如下：

1. Rounded corners without images

Tags: CSS
Posted in CSS 评论关闭

1. Vertical centering with line-height

line-height:24px;

2. Prevent oversized content to break fixed width floated layouts

#main{
	overflow:hidden;
}

3. Prevent line breaks in links

a{
	white-space:nowrap;
}

4. Always show Firefox scrollbar

html{
	overflow:-moz-scrollbars-vertical;
}

5. Centering block elements horizontally

margin:0 auto;

6. Remove vertical textarea scrollbar in IE

textarea{
	overflow:auto;
}

7. Force page breaks when printing your document

h2{
	page-break-before:always;
}

8. Remove active link borders

a:active, a:focus{
	outline:none;
}

Tags: CSS
Posted in CSS 评论关闭

最近才看到的一个开源项目：Hartija，它是通过Css来控制通过浏览器打印网页的效果，目前版本是0.8版本。因为目前所有信息都放在Css文件中，所以使用比较简单，就跟平常使用CSS一样，添加以下语句：

Html代码

1. <link rel=“stylesheet” href=“print.css” type=“text/css” media=“print”>

(全文 …)

Tags: CSS
Posted in CSS 评论关闭

作者将他认为最重要的6个CSS技巧加以例子和文字说明展示给大家，在我看来，作者认为的最重要的6个CSS技巧其实是最普通，最常用的几个技巧，列表如下，如果你还不熟悉这些技巧，可以花20分钟时间了解一下。

1. Get a Consistent Base Font Size
2. Get Consistent Margins
3. Set a Float to Clear a Float
4. Image Replacement
5. Faux Columns
6. CSS Sprites

1. 设置字体基准值
2. 设置margin基准值
3. 相对于浮动清除另一个浮动层
4. 图片替换
5. 栏目设置
6. CSS技巧(CSS hack处理)

毛糙地翻译了下，哈

Tags: CSS
Posted in CSS 评论关闭

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.
(全文 …)

Tags: Assemble, CSS, Marrow
Posted in CSS 评论关闭