CSS, 网页设计, 资源

30个基于CSS的导航和按钮优秀设计教程

css-导航菜单-教程

在当今标准的Web设计中,CSS是最重要的组成部分。为了让大家更好的理解如何通过CSS来设计,彬Go为大家收集了30个基于CSS的导航菜单和按钮的CSS设计教程,通过这些教程,您可以在您今后的项目中更方便的直接使用或参考,当然也可以用作平时的实践练习。希望大家能从中学到些什么。
(更多…)

CSS, HTML

为你的有序列表添加个性样式

在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p)来设计华丽的列表数字。

预览

基本上讲,你需要做的只是为ol元素定义Georgia字体,然后为p元素(在ol内)定义Arial字体。

CSS-有序列表

(更多…)

CSS

960网格系统

随着CSS 框架的流行升温不断,前端er们也越来越关注CSS框架的使用,国内也有很多关于各种CSS框架的使用技巧和教程,彬Go一直关注着各种CSS框架,尤其是960 grid system(960网格系统),由于国内关于960网格系统的文章并不多,所以彬Go会尽量多的去帮助大家翻译和收集一些相关的教程和技巧,今天这篇关于960 grid system的文章转自译言,简单介绍了960网格系统(960 Grid System)问世的过程及960网格系统的特性及使用方法等。希望对大家有所帮助。同时彬Go在此祝大家Happy 牛 year!

更新:

Bryan Veloso 在最近在他重新发布的网站Avalonstar 上应用了960网格系统(960 Grid System)中的16列的PS模板开发。

在这同时感谢他给960.gs提供了网站的截图以供使用。

960-grid-system

(更多…)

CSS

960 Grid System 基本原理及使用方法

960-网格系统

由于一些读者对于960 Grid System CSS Framework的原理和使用方法比较感兴趣,暴风彬彬今天将和大家一同分享这篇关于960 grid CSS Framework的基本原理和简单的使用方法。

关于CSS框架其实一直是一个比较热门且很有争议的话题,的确,国内的一些前端er们越来越关注CSS框架,并都开始尝试使用,觉得CSS框架能够节省更多的开发时间,显著提高工作效率。当然,还有很多人持相反意见,认为CSS并没有这么高级以至于要涉及到框架!我记得在cnBeta上曾经有位程序员讽刺道:”这年头,连CSS都有框架了?!”。今天暴风彬彬并不是要向大家介绍什么是CSS框架,也不会介绍各种CSS框架的优缺点。只是要讲解一下目前在国外很热门的一个框架,严格讲是网格系统,那就是960 Grid System。通过这篇教程你会知道使用960框架之后,你的开发工作会更快的开展。
(更多…)

CSS, HTML, JavaScript

你是一个职业的页面重构工作者吗?

做为一个专职的页面重构者,我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从PS里 导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种 的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不 理会下面的内容。
(更多…)

CSS

你应当了解的5个CSS3新技术

css3-教程

CSS是众所周知且应用广泛的网站样式语言,在它的版本三(CSS3)计划中,新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果,但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

(更多…)

CSS, JavaScript, 网页设计, 资源

2008年最佳Web设计/前端开发技巧、脚本及资源总结

2008-最佳-前端开发

今天是2008年的最后一天,彬Go为大家奉上今年的最后大餐,这篇文章将为大家总结08年国外一些比较不错的前端开发相关的教程、技巧、脚本、实例及工具资源等,有一些是曾经彬Go发表过的翻译文章。实在是丰盛的需要消化很久…无论您是刚入门的前端开发菜鸟,还是有多年前端开发经验的高手,我相信下面的这些日志总会有您需要的!
注:链接到的文章都是英文,如果您的英文不好可以尝试使用Google翻译,如果还是无法理解,可以将想看的文章的标题留言给我,暴风彬彬今后有时间会为大家翻译的。 (更多…)

CSS, HTML

简洁纯净的CSS表单设计实例

  很多CSS爱好者不喜欢HTML表格,尤其是在制作表单的时候,虽然现在已经是XHTML+CSS的年代,但表单的设计大多还在采用table来布局。那么,有没有更好的使用纯语义化XHTML+CSS设计表单方法呢?今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧!

  在这里暴风彬彬要说,并不是要完全摒弃table的使用,它有它的语义化布局作用,尤其是在存储数据的时候。我在大多数情况下会使用纯CSS来设计表单,但是,我也很喜欢表格,只要我们能在正确的地方使用正确的元素就可以了,不要太过追求所谓的DIV+CSS。直接使用table要比使用CSS来”模拟”(display:table;)表格更方便更快速。下面暴风彬彬将分享一种使用纯CSS代替HTML表格元素设计表单的方法。

您还可以参考以下CSS相关教程及资源:
使用CSS创建三列固定布局结构
使用CSS完美实现垂直居中的方法
通过不同的CSS设计字体大小来提高用户体验
可用性研究:为文字链接扩大可点击区域》 

CSS-表单

(更多…)

JavaScript, 资源

10种JavaScript特效实例让你的网站更吸引人

  今天的话题是如何改进自己网站的界面或提高网站的视觉体验,从而让用户记忆犹新。

  我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读。

  这里收集了10种强大的且容易上手的JavaScript特效来改进您的网页站界面,从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴,而且安装和使用都比较容易。

您还可以参考以下JavaScript/Ajax相关教程及资源:
10个非常棒的Ajax及Javascript实例资源网站
12种Javascript解决常见浏览器兼容问题的方法
300+Jquery, CSS, MooTools 和 JS的导航菜单资源》 

1.GreyBox

JavaScript-greybox

  GreyBox 允许你以模式窗口的形式运行其它网站(类似于弹出式窗口,但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接,但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话,这真的是一个很好的解决方案。使用GreyBox 非常简单。

(更多…)

资源

Lunascape:将FireFox、Safari和IE合为一体的浏览器

Lunascape-3engine

  作为前端开发/网页设计师,电脑中总是安装着各种不同内核渲染引擎的浏览器,如IE(Internet Explorer)、FireFox、Safari、opera、Chrome等,在编写网页时要经常在不同的浏览器中进行测试,以便能在这些浏览器中有相同的显示效果。暴风彬彬曾经介绍过整合了IE5、IE6、IE7和IE8的浏览器IETester。今天暴风彬彬向大家推荐一款将FireFox、Safari和IE三大浏览器引擎整合在一起的浏览器:lunascape

(更多…)