至顶网›网络频道 ›学习网站建设技术CSS布局心得

学习网站建设技术CSS布局心得

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了

来源：qqread 2008年1月5日

从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了

而且用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多,由于最近求职,很多公司都要求DIV,CSS,所以我再次尝试学习

1.学习方式

我以为,看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识),在查看别人的代码时可以去除一些重复的,或者一些于CSS无关的代码,将更利于我们分析,你可以从中了解到别人是怎么做的,更深一点,你可以考虑为什么要这样做,当然它们做的也不一定全对,就算淘宝,我发现它们的CSS里面也有不少的多余代码,我曾经从淘宝的网页代码里面学到不少的东西,我把基本的框架保留下来,然后分析,并且我将我的分析记录了下来,你可以在这里查看：

http://www.dayanmei.com/blog.php/ID_536.htm

2.练习方式

在了解到一些基本的布局方式,以及一些容器的属性之后,可以尝试自己,编写一些简单的布局,遇到出现问题的时候,可以在google搜索一下,或者想\象理想论坛以及其他一些讨论标准化的论坛询问一下,会有很多好心人的哦

3.一本手册

在遇到问题的时候或者对某个属性不是很了解,或者对于属性的兼容性不太清楚的时候,这就有很大的作用了

手册可以去这里下载

http://www.w3cn.org/resource/down/2004/73.html

4.多写多练

你发现自己多写了几个布局,或者出了一些问题并解决后,你已经基本掌握了布局的要点了.

如何学习标准化

1、几本书、几个网站、几篇贴子、几个blog

《网站重构》掀起国内web标准热潮的第一本相关著作。理论性质多一些，全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途。建议在阅读学习《CSS网站布局实录》有了一定的技术基础了再回头学习，反思自己之前学习和设计过程中的问题，这样才能有效地提高。

《样式表中文手册》必备的工具，我一般放在桌面随时查询。里面提供了详细的使用说明和实例。

《CSS网站布局实录》较新的一本标准化著作。告诉你怎么去写符合标准的xhtml和css代码，告诉你一些常见布局和页面效果的代码是什么样子。这本书很适合初学者，基本上都是针对实例的布局、效果的实际操作，比较系统的讲述了如何进行标准化网站制作。这本书只是在讲具体的实现，关于标准化的概念、网站重构的目标这些指导实际操作的理念性东西几乎没有。可以在学习这本书之后读一下《网站重构》，二者结合起来学习效果不错。目前的版本可能因为时间问题，校对很仓促，有不少错别字和有问题的句子没，但涉及到代码到没有发现错误。

《CSS权威指南》详细阐述CSS1.0每个属性的规则和定义，并且展望了CSS2.0许多诱人的东西。对实现web标准化有着重要的意义。通过本书的学习可以深入理解浏览器如何解析属性的规则和定义，为准确实现设计意图提供保障。

《html和xhtml权威指南》应该是一本权威的工具书，没有必要通读，可以在实际设计制作过程中参考。详细的讲述了html和xhtml的规则定义使用技巧。

《javascript权威指南》作为行为层的主要技术，不学习javascript就不能完整地学习web标准。

网站设计师最初接触web标准化学习必须访问并且认真阅读的网站。包含教程、资讯、参考资料等重要信息。

渡硐氡曜蓟ò?lt;/a> 这个不用说吧，对几位版主热心勤劳在此致敬。不少牛人潜水与此。但近期的学习瘴韵愿≡辏挥猩钊肜斫馔Ａ粼赾ss表现层次的朋友较多。

CSSer.org 这个网站不知道怎么关掉了……有段时间不去看了，等待站长再次开放吧。

网易作为门户网站里较早采用web标准的站点之一，其最新版本很值得研究。

下面是一些web标准届牛人朋友的blog，跟着他们能学习很多，而且通过blog这样亲切的形式学习效果应该很好。建议静心阅读他们的系列教程。

http://www.realazy.org/blog/

http://www.andymao.com/andy/

http://old9.blogsome.com/

http://www.greengnn.com/

http://blog.pr1984.com/

http://www.loaoao.com/

2、如何学习

读写

读书读上面我推荐的贴子、网站和blog。互联网的宗旨在于共享和传播，那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程。要静下心来，不能仅仅为了一个效果或者一个布局的实现去找答案。而是去理解教程给我们带来的实现思路。要系统地读书也要针对性的搜集某个问题的方法去总结提取。读到的时候就要写，写一些代码片断，一些布局结构，一些效果的实现。哪怕是照着书敲出代码来，加深记忆和理解，效果要比单纯的度过效果要好得多。

改动

改，不是抄袭。把别人的网站另存下来，改动其中的部分内容，看看页面显示有什么变化，在这些变化中去理解你所改动部分代码再实现页面效果中起到了什么作用。这是一个很重要的学习方法。你看到的效果变化来源于你的改动，这本身就是一个加深记忆和理解的过程。另外一种改法就是把复杂的页面简单化，简单到能演示效果为主，代码少了看起来清晰有利于学习。或者把简单的布局填充内容之后看页面怎么显示，会不会影响到布局，自适应的还是固定大小的，超出固定大小的内容hidden了还是流向了结构之外？有没有什么Bug？青蛙用永远逮不到一个安安静静站在那里的蜻蜓，只有蜻蜓飞起来了青蛙才能判断才能捕食。

睡觉

睡觉前的思考。在显示器之外去思考之前学习到的东西，要有一定的距离和空间高度去看待去思考，比如今天写的布局是不是合理，有没有必要这样复杂，如果把浮动改成绝对定位呢。等等，就像作平面设计一样，有时候椅子往后一仰，稍稍的远离屏幕，对之前的细节处理就能有一个全新的认识。

好记性不如烂笔头，总去发帖提问也不是办法。把看到的有用的教程收集起来分类整理，比如布局代码、导航特效、浏览器兼容hack写法等等。建立自己的文档库，时间久了整理整理，如果有合适的条件不要忘记和朋友们分享。

实践

作一个完整的网站/网页项目，未必要复杂或者庞大。但至少要有一个完整的页面，尽可能用熟悉的技术去实现。检验自己、发现问题给自己继续学习的动力。