CSS, HTML5

一起感受HTML5和CSS3的能量

html5-css3-教程

  Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上,我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。
  虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在,HTML5和CSS3正跃跃欲试的等待大家,下面让我们来看看他们是否真的能让我们的设计提升到下一个高度吧…
(更多…)

CSS

5步让你的CSS样式表成功减肥

css-压缩-减肥

你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧,掌握之后你便能立即为你的CSS样式表修身了。
(更多…)

CSS, HTML

dl,dt,dd标签 VS 传统table实现数据列表

dl列表和table表格哪个更适合数据列表

近期博客忙着搬家,所以将近两周的时间都无法访问,还好现在已经解决,从windows主机迁移到了更适合php+mySQL环境的Linux主机,速度方面是否有所提升还不太清楚,总之现在博客恢复正常,还是比较欣慰的。从今天开始彬Go会一如既往的为大家奉献更多更好的技术文章,希望大家继续捧场,学到更多有用的东西。好了言归正传….

过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页,但是这样做会遇到一个比较麻烦的问题就是,后期调试和维护会相当的困难。现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!

如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松…
(更多…)

CSS, HTML

学无止境的CSS(xHTML+CSS技巧教程资源大全)

学无止境的CSS(xHTML+CSS技巧教程资源大全)

今天在看我博客的访问统计的时候,看到了一个比较熟悉的网址,就是帕兰映像的博客,遂点击链接过去看看,结果发现了一个非常非常值得收藏的文章,这篇文章总结了许许多多CSS(xHTML+CSS或称DIV+CSS)的技巧、教程及资源。其中也有很多值得我学习的知识,相信这些资源对大家来说也是非常值得收藏的,看过之后收获是一定滴!所以转载到自己的博客上跟大家分享一下,在这里先感谢帕兰映像的辛苦总结。值得高兴的是,这篇文章中也包含了很多彬Go以前发表过的一些CSS教程或资源等。各位读者瞪大眼睛准备好哦,以下是原文:

(更多…)

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

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

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

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

(更多…)

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布局的精髓,即使你已经成为高手,我也相信其中有你值得学习的地方。
(更多…)

HTML

浅析网页Transitional和Strict的文档声明的区别

在推广Web标准的今天,那些崇尚Web标准的人经常说XHTML比HTML更加严格,当然从某种意义上说是的,比如它要求所有的标签关闭并且所有的属性都用引号。但其实XHTML 1.0还分两种(加上Frameset DOCTYPE的话算三种,本文不讨论),Transitional(过渡型)和Strict(严格)DOCTYPEs。并且HTML 4.01也有同样的文档声明。
(更多…)

CSS, HTML, 网页设计

中国的Web标准现状

  在十月初的时候,我有幸在中国呆上了一段时间,与Web领域的专家、学生等交流Web标准以及他们的现状。很有意思的几个礼拜,也让我大开眼界。印象最深 刻的,在中国推行Web标准的仍在少数,并且通常是孤立无援的,无法实施、无法去解释为何需要标准及标准的价值。所以这里我想写一下我所了解的情况、面对 的挑战和一些希望能有效的方法。

  如果你有任何意见建议,欢迎留言!如果你有相关内容链接,也欢迎提供,我会更新文末的资源列表。

(更多…)

CSS

CSS代码命名惯例语义化的方法

  CSS代码的命名惯例一直是大家热门讨论的话题。今天暴风彬彬想通过分析一个流行三栏布局中的必要元素,来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

您还可以参考彬Go的相关文章:
整理及优化CSS代码的7个原则
10个CSS简写技巧让你永远受用
DIV+CSS网页布局常用的一些基础知识整理》 

CSS类命名的语义化VS结构化方式

  一般而言,CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”,独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

让我们看看下面这个例子:

CSS-语义化-结构化

  …而现在我们想把页面中的元素调换一下位置,如果你使用的是结构化方式(1),那么你就要把所有CSS类名重新进行定义,因为它们的位置变了。在布局(3)中,我们看到元素都倒转了: right-bar 现在成了 “left-bar”,而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。

(更多…)

CSS, 资源

推荐20个让你学习并精通CSS的网站

  CSS的学习过程既可以说简单又可以说是复杂。CSS的语法比较简单,但CSS的应用中有一些概念(一可以说是原理)还是很难掌握的。今天暴风彬彬向你推荐20个出色的CSS技术类(英语)网站帮你更好的理解和掌握CSS,其中包括各种各样的网站,从博客到清单风格列表甚至网站,它们都侧重于研究同一个主题,那就是CSS。

1. A List Apart CSS Topics

alistapart-css教程

  A List Apart,学习网页设计和最佳实践的首选网站。这个网站从1999年就开始发表关于CSS的文章,其中大部分文章都是面向那些更注重符合标准设计的中级到高级设计师。

(更多…)