CSS, HTML, 很久以前的工作记录, 网页设计

近期作品:麻将电视赛官网UI设计+前端开发

天津麻将-电视大奖赛-UI设计-前端开发

今天展示一下五月底用4天时间完成的一个小项目,天津麻将电视大奖赛的专题官网UI设计+前端开发。这个项目要的很急,呵呵,所以非常非常赶…界面方面可能还有很多不如意的地方,但是网页的前端代码我是在既追求效率又追求质量的基础上完成的。这个项目的交互原型和详细需求不是我出的,所以内容结构和内容量、布局等不是我能大规模修改的。我只能在原型的基础上进行创意设计和修饰配色等。

(更多…)

CSS, 很久以前的工作记录, 网页设计

展示:大学时期做的第一个xHTML+CSS项目

彬Go-xHTML-css-作品

今天我要向大家展示一下我早在大学三年级时为学校的心理咨询健康中心做的一个网站,呵呵,也许大家会纳闷为什么现在拿出来展示?因为我从毕业工作到现在已经一年了,想把当初自己为之骄傲的作品拿出来让大家拍拍砖,也是给自己一年的努力做一个对比,过两天我会再发一个近期的UI设计+前端项目作品,就是想总结一下从我开始学UI设计和CSS到现在到底都有哪些进步,也希望大家多多拍砖,但恳求手下留情,嘎嘎嘎~~
(更多…)

CSS, 网页设计

CSS Sprites(CSS图像拼合技术)教程、工具集合

css-sprites-教程

今天彬Go将向大家推荐目前为止最全的CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合,该集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。CSS Sprites这个词如果直译的话是”CSS精灵”的意思,它显然无法表达其技术的内涵。通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做”CSS贴图定位”。无论怎么叫,它的技术核心是不变的,下面让我们来了解一下这篇CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合吧。
(更多…)

CSS, 网页设计, 资源

Web UI 设计(网页设计)命名规范

Web UI 设计命名规范
最近工作实在是繁忙,所以好久没有更新自己的博客了,实在是对不起各位读者。今天好不容易闲下来半天,所以和大家分享一下我之前总结的一套Web UI 设计命名规范,也就是网站用户界面设计(俗称网页设计)命名规范。

这套规范并非单纯的CSS、html或JavaScript命名规范,它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了,有点罗嗦,吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的,还有一个原因就是网上大多命名规范都是关于编码的,也就是那些css、html、js和一些服务器端语言的,至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员,而且前端开发工程师是要使用设计师的效果图源文件的,所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
(更多…)

CSS, HTML

43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程

div+css-教程

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。彬Go也希望通过博客让所有读者正视代码语义化的重要性,请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CSS”替代吧!

今天彬Go将向大家推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程,在国外也可以叫做PSD2XHTML。如果你是以为网页设计师,可能会对将自己的效果图实现成语义化的xHTML页面感到头痛,还有一些CSS初学者对于xHTML+CSS处于懵懂状态,希望大家通过这43个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓,即使你已经成为高手,我也相信其中有你值得学习的地方。
(更多…)

CSS

目前最全的浏览器/CSS选择器兼容性总结(2009-8-10更新)

css-浏览器-兼容性

最近更新日期:2009年8月10日

2009年2月24日,Safari 4.0 beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3)。不过为了方便大家的工作,下面提供了最新版本的CSS选择器浏览器支持情况,其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estelle Weyl的总结。
2009年6月30日,FireFox 3.5发布,类似Safari 3.1及更新的版本 (包括Safari 4 beta),Opera 9.64 (及更新版本) 和 Google Chrome 都支持所有 CSS2.1 和 CSS3 选择器。以下是我对所有浏览器测试后的兼容性统计表,希望对大家有所帮助。
(更多…)

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里 导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种 的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不 理会下面的内容。
(更多…)