西红柿爱番茄

Feed Rss

编写HTML、CSS的一点点经验

12.31.2009, (X)HTML, CSS, by .

刚入职口碑网三个星期的时间,感觉这段时间最大的收获是在HTML、CSS的学习方面。经过一两个星期的总结,今天在编写一个栏目的HTML、CSS的时候,终于编写出了只在 Firefox调好样式,其他浏览器都兼容了,特别是Fuck IE全部现代版本都兼容了,不用修改任何一处不兼容的代码,也都没有写一个hack能实现视觉效果,小赞了一下自己,:)。记得大豆说过:“我编写的HTML页面,基本在Firefox调试好 ,其他的浏览器我基本都不用调试啦,因为我在编写的时候就知道了它在其他浏览器将会出现什么效果了。”,这或许就是大师的境界吧!

因为HTML、CSS这方面功力不足,所以一方面要求乌龙茶师傅多分配这样的一些作业或者多接一些日常任务来提高这方面的能力。N个月没有写HTML了,对HTML语意化、创建良好的HTML结构都比较模糊,经过观察内网(http: //www.koubei.com)的HTML结构,也开始使用Firefox的Firebug来查看淘宝网等等一些知名网站的HTML各模块的 HTML结构编写方式,从中也开始悟出了一些门道。

关于HTML的良好的结构性的说法网上都有很多论述,总结一点就是:根据你要展现内容的特点来使用跟内容语意相符的HTML标签。这个总结或许是片面点了吧,不过基本思路还是这样滴。:)

页面上比较常用到的模块有:导航、图文并排、列表、图文列表、列表里又细分为图文并排等等,这些都是经常需要使用到的。我在入职后刚开始写页面的时候也是碰到了很多这样的模块的HTML的编写。按照我现在的习惯方式的话,当接到一个页面的需求的时候,首先不是入手开始编写HTML,而是先从整个页面上、结构语意化的角度考虑去如何规划结构,将每个模块细分出来,在细分的过程中去归纳哪些模块或者哪些样式是可以整合为使用一个css类来编写的,细分和归纳好之后,开始入手编写每个版块的HTML结构。所以,刚开始做任务的时候,我都会在这方面花费一点点时间来审视和规划页面,这些基本工作准备好了之后,就开始编写HTMl结构啦。这样一个过程的好处在于使得我编写的HTML的结构会尽量的保持精简而又能完成视觉效果,而且还有一个好处就是可以精简你的css的编写,使得你的css代码将会非常的清晰。

关于上面提及的精简css代码的一点点技巧就是:使用好css类!!这点再夸大也不为过。归纳整个页面哪些元素的样式可以通过一个通用的类来是实现视觉效果,再根据每个模块的不同点来额外添加css类或者通过元素的id来额外添加独立的样式,比如:

[html]
<div class="common hotsport">
<ul>
<li><a href="#">…</a></li>
<li><a href="#">…</a></li>

</ul>
</div>

<div class="common hotfood">
<ul>
<li><a href="#">…</a></li>
<li><a href="#">…</a></li>

</ul>
</div>
[/html]

假如上面的两个列表有非常多相似的地方,不如margin,padding,background等等,但是在颜色方面有一些不同的话,相同的可以在 common类里定义css样式,不同的可以独自写多个不同的类来编写。通过这种方式,就可以使得你的css代码精简多了,不会出现重复累赘的样式规则。

其他的一些收获是用好inline-block和overflow属性,inline-block的详细的说明可以在口碑的UED里乌龙茶师傅的一篇文章里得到详细的论述:《inline-block从入门到精通》。

推荐阅读:《Object Oriented CSS (OOCSS): The Lowdown

编写HTML、CSS的一点点经验 有1条回应

  1. 你的文章写的真好,期待有更多的内容更新 :)

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>