【转】120个优秀的水平导航菜单设计
2010年2月2日
没有评论
本文转自：前端观察，原文地址：http://www.qianduan.net/120-of-the-finest-design-navigation-menu.html
菜单是一个网站最重要的元素之一。菜单必须是用户友好的，而且要与网站设计风格保持一致，这样才能为用户提供简便的导航。
这里你将看到120个非常优秀的水平导航菜单。
存档
文章标签 ‘CSS’
9 个基于JavaScript 和 CSS 的 Web 图表框架【转】
2009年11月11日
没有评论
jQuery， MooTools， Prototype 等优秀的 JavaScript 框架拥有各种强大的功能，包括绘制 Web 图表，使用这些框架以及相应插件，我们可以非常轻松地实现曲线图，圆饼图，柱状图等 Web 图表的绘制，而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。
1. Flot
图1
Flot 是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8， Firefox 2.x+， Safari 3.0+， Opera9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象，目前所有主流浏览器都支持该对象，除了 IE， 因此在 IE中使用 JavaScript 进行模拟。这里有一些实例。
2. JS Charts
图2
JS Charts 是一个免费的基于 JavaScript 的图表生成器，表格绘制非常简单，几乎不需要编码，也不需要插件和服务器模块，使用XML 或 JavaScript 数组缓存数据。
3. TableToChart
TableToChart 是一个 MooTools 脚本，可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表，柱状图，曲线图，圆饼图等。
4. PlotKit
PlotKit 是一个 JavaScript 绘图库，支持 HTML Canvas 标签，也支持 SVG。
5. Yahoo UI Charts Control
图3
YUI Charts Control 可以在网页上将表格数据转换为图表，支持柱状图，曲线图以及圆饼图。支持 DataSource 工具，可设置的轴，鼠标盘旋提示，图表组合，以及皮肤等功能。
6. ProtoChart
图4
ProtoChart 是一个基于 Prototype 和 Canvas 标签的开源库，这个库深受 Flot， Flotr， Plotkit 等启发，支持曲线图，柱状图，圆饼图等，可以在同一个图表上显示多套数据，支持可定制的图例，网格，边界以及背景图。支持 IE6/7， Firefox 2/3 以及 Safari，甚至支持iPhone.
7. EJSChart
EJSChart 支持鼠标追踪，鼠标事件，按键追踪与事件，缩放，滚动，交互等功能，将用户体验上升到一个新高度。支持曲线图，面积图，离散图，圆饼图，柱状图等形式，拥有完备文档的属性和方法可以帮助实现很好的定制。
图5
8. fgCharting
fgCharting 是一个很出色的 jQuery 插件，支持多种图形。
9. Pure Css Data Chart
图6
以往的数据展示往往通过 flash 实现，现在，我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图，甚至不需要 JavaScript。
（CSS专题）页面布局
2009年11月10日
没有评论
（PS：还是来自于Neo翻译的HTML Dog CSS Tutorials的中文版的内容，假如你有兴趣你可以阅读不良标签和标准要点两篇文章…一口气看完了Neo翻译的HTML Dog CSS Tutorials的中文版HTML和CSS网页标准指南，真的不错，建议各位可以抽空看看~~~）
用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。
你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。
定位
定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）。
static值是元素的默认值，它会按照普通顺序生成，就如它们在HTML的出现一般。
relative很像static，但可用top、right、bottom和left属性来偏移原始位置。
absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只要设置了top、right、bottom和left的值。
fixed的行为也很像absolute，但参考于浏览器窗口相对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中工作得很好，但IE不会。
用绝对定位布局
你可以用绝对定位来创建一个传统两列布局，只要在HTML中使用如下面的类似规则：
<div id="navigation"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </div> <div id="content"> <h1>Ra ra banjo banjo</h1> <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p> <p>(Ra ra banjo banjo)</p> </div>
并且应用如下的CSS：
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; }
你将看到，长度为10em的导航条被设置在左边。因为导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。
实在是太容易了！然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需要增加第三列，你可以为HTML增加“navigation2”块并且应用如下CSS：
#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ }
绝对定位元素的唯一副作用是，因为它们生活自己的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域，没有什么问题，但是，特别是使用长度和宽度的相对值时，你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做，与其绝对定位它们，不如浮动它们。
浮动
浮动将移动一个元素到同一线上的左边或者右边，而周围也会有内容浮动。
浮动经常用在定位一个页面内的小型的元素（在本站的原始默认CSS中HTML初级指南和CSS初级指南的“下一页”连接就是浮动到右边的。同样参阅伪元素中的:first-letter例子），但同样可以用在更大的块中，比如导航列。
拿下面的HTML例子，你可以应用随后的CSS：
#navigation { float: left; width: 10em; } #navigation2 { float: right; width: 10em; } #content { margin: 0 10em; }
如果你不希望下一个元素环绕浮动对象，你可以使用clear（清除）属性。clear: left将清除左边元素，clear: right将清除右边元素，而clear: both会清除左边和右边。所以，举个例子，你需要一个页面脚注，你可以用id“footer”为HTML增加一个块，然后使用如下的CSS:
#footer {clear: both;}
嗯，你已经搞定了。一个脚注会出现在所有列的下边，不管任何一个列有多长。
/*
注意
我们已经大体上介绍了地位和浮动，着重强调了页面的“大”块，但请记住，这些方法也可以用在这些块内的任何元素。综合定位、浮动、边界、补白和边框，你可以再现任何的版式设计，在布局方面，没有CSS完成不了表格所能完成的的事情。
使用表格布局的唯一理由是你试图适应古老的浏览器。这也是CSS实际上显示其先进的地方──在文件大小上，高易用性的页面只相当基于表格的页面的一小部分。
*/
（960 Grid System专题）动手学960 Grid System之知识与技巧1
2009年11月10日
2 条评论
960 Grid System是一个非常棒的布局辅助设计系统，以960PX为基准宽度提供了12列和16列两种布局模式（PS：目前官方已经提供了24列的布局模式，相信作者以后还会提供更多的布局模式）。
1：alpha与omega
960 Grid System的布局宽度为960PX，但由于每列左右均由10PX的margin（外补丁），因此内容宽度实际为940px。
/*
alpha：用于清除左边10px的margin
omega：用于清除右边10px的margin
*/
PS：从作者取alpha与omega这两个名字可以想象一下或许作者很热爱希腊文化。alpha（α）在希腊字母表里，它是第一个字母，读作“阿尔法”（阿拉法），代表开始；omega（γ）在希腊字母表里，它是最后一个字母，读作“欧美噶”（俄梅嘎），代表终了。
2：prefix_XX与suffix_xx
/* 用于在每个单元网格的前面或后面添加空白的列（栏） */ /* 用法： <div class="grid_1 prefix_15">IT北瓜</div> */
3：clear与hr
/* 用于清除层的浮动 */ /* 用法： <div class="clear"></div> */ /* 但假如你查看过官网主页的源代码你会发现，作者用的是<hr /> */ /* 用法：可参考官网主页的源代码 <hr /> */
4：push_xx与pull_xx
/* 这是2009-06-29更新新增的类，用于重新定制布局顺序 */ /* 用法：引用官网主页源代码 */ <h1 class="grid_4 push_4"> 960 Grid System </h1> <!-- end .grid_4.push_4 --> <p id="description" class="grid_4 pull_4"> <a href="files/960_download.zip">Download</a> ← Templates for <a href="http://www.adobe.com/products/fireworks/">Fireworks</a>, <a href="http://www.adobe.com/products/indesign/">InDesign</a>, <a href="http://www.inkscape.org/">Inkscape</a>, <a href="http://www.adobe.com/products/illustrator/">Illustrator</a>, <a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a>, <a href="http://www.adobe.com/products/photoshop/">Photoshop</a>, <a href="http://office.microsoft.com/en-us/visio/default.aspx">Visio</a>, <a href="http://www.microsoft.com/expression/products/Design_Overview.aspx">Expression Design</a>. Sketch PDF. CSS code. The 960.css file is 5.4 KB. View <a href="http://bitbucket.org/nathansmith/960-grid-system/">repository</a>. </p> <!-- end #description.grid_4.pull_4 --> <hr /> <div class="grid_6"> <p> <a href="http://www.spry-soft.com/grids/"><img src="img/tool_css.gif" alt="Custom CSS generator" width="460" height="60" /></a> </p> </div> <!-- end .grid_6 --> <div class="grid_6"> <p> <a href="http://gridder.andreehansson.se/"><img src="img/tool_bookmark.gif" alt="Grid overlay bookmark" width="460" height="60" /></a> </p> </div> <!-- end .grid_6 -->
5：container_xx与grid_xx
/* 这是该系统最基本最重要的用法，其中xx代表列数 */ /* 用法： */ <div class="container_12"> <div id="sidebar" class="grid_2">sidebar</div> <div id="content" class="grid_10"> <div id="main_content" class="grid_6 alpha">main content</div> <div id="photos" class="grid_2">photo’s</div> <div id="advertisements" class="grid_2 omega">advertisement</div> <div class="clear"></div> </div> <div class="clear"></div> </div>
（960 Grid System专题）960 Grid System 简介
2009年11月10日
没有评论
一、960的奥妙
从数学着手： 960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为：
N(960) = N(2^6 * 3 * 5) = 26
根据上面的算法，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22 N(480) = N(2^5 * 3 * 5) = 22 N(720) = N(2^4 * 3^2 * 5) = 28 N(750) = N(2 * 3 * 5^3) = 14 N(800) = N(2^5 * 5^2) = 16 N(960) = N(2^6 * 3 * 5) = 26 N(1000) = N(2^3 * 5^3) = 14 N(1024) = N(2^10) = 9 N(1440) = N(2^6 * 3^2 * 5) = 34 N(1920) = N(2^7 * 3 * 5) = 30
从上述算法我们可以得出以下结论：
要使得N(width)最大，width的取值有两个系列： A系列： …, 320, 720, 1440, … B系列： …, 480, 960, 1920, … N越大，可组合的宽度值就越多。
目前绝大多数显示器都支持 1024 x 768 及其以上分辨率，而960恰好是1024 x 768 分辨率下最灵活也是最合适的尺寸，这些条件决定了960成了目前设计中最完美的尺寸。（PS：此部分内容大多摘自：960 Grid System 研究）
二、960网格系统简介
官网原文：
Essence
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Read more.
Dimensions
The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. View demo.
Purpose
The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.
Leeo译文：
本质：
960 Grid System 是一套基于宽度为 960px CSS 框架，它为网页布局提供了通用的尺寸设置，它提供了两种不同的尺寸布局：12列和16列，它们可以独立使用，也可以一起使用。
尺寸：
12列的布局，将总宽分成12份，每份的宽度是60px，而16列的布局分成16份，每份的宽度是40px，每部分左右边距都是10px，从而每列产生20px的空隙。
目的：
该系统以快速原型开发为出发点，但同时也能很好地集成到生产环境中去。它同时提供了打印布局、设计布局和一个能提供一致尺寸的 CSS 文件。
（CSS专题）完美DIV+CSS自适应高度后台框架
2009年9月13日
2 条评论
以前做后台管理框架基本都是采用iframe来布局，即便是现在这种布局还有着广泛的应用。众所周知现在不管是前台还是后台都提倡采用DIV+CSS布局，至于这样左右什么好处这里不做阐述，Google一下就能找到一大堆资料。Leeo本人也比较喜欢DIV布局，并且一直在各个项目中努力由表格布局转向DIV+CSS布局。
我们知道用iframe框架做后台基本上都不用考虑什么高度自适应问题，因为iframe自动会自适应浏览器高度。但是用DIV+CSS来做布局，自适应浏览器高度就成了令人头疼的问题，因为即使你给DIV加上了height: 100%结果你还是发现根本不起作用，DIV依然只显示了其包含的内容的高度。难道是DIV对这样的高度设置根本就不认帐吗？其实不是的，只是因为DIV的高度属性跟它的父元素的高度属性是有关系的，前面说到的高度设置不起作用，其实是因为它的父元素的高度没有做相应设置造成的。
下面是Leeo我写的一个完美DIV+CSS自适应高度后台框架，这里我之所以给它加上“完美”这两个字，是因为这个布局框架在IE5.5、IE6、IE7、IE8、Firefox、Chrome、Safari各浏览器下均表现完美，直接看代码吧：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV布局——IT北瓜原创</title>
<style type="text/css">
html,body{
font: 100% 微软雅黑, 宋体, 新宋体;
margin: 0; /* 最好将 body 元素的边距和填充设置为 0 以覆盖不同的浏览器默认值 */
padding: 0;
text-align: center; /* 在 IE 5* 浏览器中，这会将容器居中。文本随后将在 #container 选择器中设置为默认左对齐 */
color: #FFF;
height: 100%; /*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
background-color: #000;
}
#layout {
width: 100%;
height: 100%;
margin: 0px auto;
}
#header {
height: 13%;
background-color: #09F;
}
#container {
height: 82%;
background-color: #CC3;
}
#container #sidebar {
height: 100%;
width: 20%;
background-color: #C03;
float: left;
}
#container #main {
height: 100%;
width: 80%;
background-color: #CFC;
float: left;
}
#footer {
height: 5%;
background-color: #930;
}
.clearfloat { /* 此类应当放在 div 或 break 元素上，而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style>
</head>
<body>
<div id="layout">
<div id="header">
</div>
<div id="container">
<div id="sidebar">
</div>
<div id="main">
</div>
<br class="clearfloat" />
</div>
<div id="footer">
</div>
</div>
</body>
</html>
实际效果请看这里DEMO
（CSS专题）纯CSS实现圆角框
2009年9月8日
没有评论
其实W3C很早就制订了实现了CSS圆角的CSS3属性：border-radius，可恨的是现在依旧占据浏览器市场主导地位的IE系列浏览器（甚至最新的IE8）仍然不支持该属性，IE浏览器方方面面的“独树一帜”简直可以让程序员们（尤其是搞前端开发的）痛心疾首。但说到底“存在就有其合理性”，那我们也只有想办法去特殊照顾一下IE们了。
首先，我们简单了解一下CSS3的圆角属性border-radius，主要分为两大系列：Firefox和基于webkit内核的浏览器（Safari、Chrome等）
/*for Firefox*/ -moz-border-radius-topleft; -moz-border-radius-topright; -moz-border-radius-bottomleft; -moz-border-radius-bottomright; /*for webkit(Safari,Chrome...)*/ -webkit-border-top-left-radius; -webkit-border-top-right-radius; -webkit-border-bottom-left-radius; -webkit-border-bottom-right-radius;
接下来我们来看一个实例在不同浏览器下的实际效果,源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IT北瓜——纯CSS实现圆角框</title>
<style type="text/css">
.rounded-box {
margin: 50px auto;
background: #000;
padding: 10px;
width: 160px;
height: 50px;
border: 1px solid #F00;
-moz-border-radius: 8px;/*简写方式，圆角半径为8px*/
-webkit-border-radius: 8px;
}
</style>
</head>
<body>
<div class="rounded-box"><img src="images/logo.png" /></div>
</body>
</html>
不同浏览器下的实际效果如下，顺序为Firefox、Chrome、IE7
从以上效果图，我们可以清楚的看出，在Firefox下实现的圆角效果是最完美的，圆角很圆滑，而在Chrome下则会产生锯齿，IE下就跟不用说了，根本没有圆角效果。实际页面效果请在不同浏览器下浏览该页面：CSS Rounded Box Demo
那么，现在我们就利用CSS来模拟一下兼容各浏览器的圆角效果（当然这是为了兼容IE浏览器），源代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IT北瓜——纯CSS实现圆角框For IE</title>
<style type="text/css">
.rounded-box {
margin: 50px auto;
padding: 10px;
width: 160px;
height: 50px;
}
.rounded-box .r1,.rounded-box .r2,.rounded-box .r3,.rounded-box .r4 {
background-color: #000;
display: block;
height: 1px;
overflow: hidden;
font-size: 1px;
}
.rounded-box .r2,.rounded-box .r3,.rounded-box .r4 {
border-width: 0 1px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.rounded-box .r1 {
margin: 0 6px;
}
.rounded-box .r2 {
margin: 0 3px;
}
.rounded-box .r3 {
margin: 0 2px;
}
.rounded-box .r4 {
margin: 0 1px;
height: 2px;
}
.rounded-box .rounded-box-ie {
background: #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="rounded-box">
<span>
<span class="r1"></span>
<span class="r2"></span>
<span class="r3"></span>
<span class="r4"></span>
</span>
<div class="rounded-box-ie"><img src="images/logo.png" /></div>
<span>
<span class="r4"></span>
<span class="r3"></span>
<span class="r2"></span>
<span class="r1"></span>
</span>
</div>
</body>
</html>
效果如下，各浏览器效果一致：CSS Rounded Box In IE
OK，就这样，欢迎给我留言，( ^_^ )/~~拜拜
（CSS专题）链接美化之去掉虚线框
2009年9月1日
没有评论
忙碌的一天就这么过了，但睡觉前还是要把北瓜Update一下的，另外，今晚收到一个喜讯，至于喜讯的内容嘛，这里就不公布啦！Ok，进入正题。
如果你自己做过网页，那么我想你一定知道当点击一个超链接的时候会出现一个矩形虚线框，个人觉得那样看着心里挺别扭的，也有些影响美观，以下就总结一下去掉虚线框的几种方法：
方法一：利用javascript的onfocus事件：
<a href="#" onfocus="this.blur();">链接</a>
假如你的页面引入了jQuery框架（PS：我最喜欢的js框架）则可以利用它的事件绑定机制：
$('a').bind('focus', function(){
if(this.blur){ //如果支持this.blur
this.blur();
}
});
方法二：利用css样式：
a{
blr: expression(this.onFocus=this.close());
} /* 只支持IE，过多使用效率低 */
a{
blr: expression(this.onFocus=this.blur());
} /* 只支持IE，过多使用效率低 */
a:focus {
-moz-outline-style: none;
} /* IE不支持 */
:focus {
outline: none;
} /* for Firefox */
方法三：利用标签属性，仅支持IE：
<a href="#" hidefocus="true">链接</a>
方法四：利用Web行为
IE从5.5版本开始支持Web行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX控件）来完成这个功能。Web行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML行为库栏目里提供了几个定制的Web行为：WebService行为。
将以下代码保存为.htc后缀的文件：
<public:attach event="onfocus" onevent="quit()" />
<script language="javascript">
function quit(){
this.blur();
}
</script>
然后，在需要去除超链虚框的页面的<head>和</head>之间加入：
<style type="text/css">
a {behavior:url("htc文件")}
</style>
如果页面已经有了style标签，则只需要将 a {behavior:url(”htc文件”)} 一句插入里面即可。
最新评论：
- IE 下用 ajaxSubmit...
- @颓然 ajaxSubmit...
- ajaxSubmit 那来...
- 低调的飞过
test
