[原]关于学习CSS布局,我的心得

psdshow 楼主

从开始认识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.多写多练
你发现自己多写了几个布局,或者出了一些问题并解决后,你已经基本掌握了布局的要点了.

ky4682

不错，正解！

江南行客

二、如何学习标准化
1、几本书、几个网站、几篇贴子、几个blog
《网站重构》掀起国内web标准热潮的第一本相关著作。理论性质多一些，全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途。建议在阅读学习《CSS网站布局实录》有了一定的技术基础了再回头学习，反思自己之前学习和设计过程中的问题，这样才能有效地提高。
《样式表中文手册》必备的工具，我一般放在桌面随时查询。里面提供了详细的使用说明和实例。
《CSS网站布局实录》较新的一本标准化著作。告诉你怎么去写符合标准的xhtml和css代码，告诉你一些常见布局和页面效果的代码是什么样子。这本书很适合初学者，基本上都是针对实例的布局、效果的实际操作，比较系统的讲述了如何进行标准化网站制作。这本书只是在讲具体的实现，关于标准化的概念、网站重构的目标这些指导实际操作的理念性东西几乎没有。可以在学习这本书之后读一下《网站重构》，二者结合起来学习效果不错。目前的版本可能因为时间问题，校对很仓促，有不少错别字和有问题的句子没，但涉及到代码到没有发现错误。
《CSS权威指南》详细阐述CSS1.0每个属性的规则和定义，并且展望了CSS2.0许多诱人的东西。对实现web标准化有着重要的意义。通过本书的学习可以深入理解浏览器如何解析属性的规则和定义，为准确实现设计意图提供保障。
《html和xhtml权威指南》应该是一本权威的工具书，没有必要通读，可以在实际设计制作过程中参考。详细的讲述了html和xhtml的规则定义使用技巧。
《javascript权威指南》作为行为层的主要技术，不学习javascript就不能完整地学习web标准。

网站设计师 最初接触web标准化学习必须访问并且认真阅读的网站。包含教程、资讯、参考资料等重要信息。
蓝色理想标准化专版 这个不用说吧，对几位版主热心勤劳在此致敬。不少牛人潜水与此。但近期的学习氛围略显浮躁，没有深入理解停留在css表现层次的朋友较多。
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、如何学习

1、读写 读书读上面我推荐的贴子、网站和blog。互联网的宗旨在于共享和传播，那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程。要静下心来，不能仅仅为了一个效果或者一个布局的实现去找答案。而是去理解教程给我们带来的实现思路。要系统地读书也要针对性的搜集某个问题的方法去总结提取。读到的时候就要写，写一些代码片断，一些布局结构，一些效果的实现。哪怕是照着书敲出代码来，加深记忆和理解，效果要比单纯的度过效果要好得多。
2、改动 改，不是抄袭。把别人的网站另存下来，改动其中的部分内容，看看页面显示有什么变化，在这些变化中去理解你所改动部分代码再实现页面效果中起到了什么作用。这是一个很重要的学习方法。你看到的效果变化来源于你的改动，这本身就是一个加深记忆和理解的过程。另外一种改法就是把复杂的页面简单化，简单到能演示效果为主，代码少了看起来清晰有利于学习。或者把简单的布局填充内容之后看页面怎么显示，会不会影响到布局，自适应的还是固定大小的，超出固定大小的内容hidden了还是流向了结构之外？有没有什么Bug？青蛙用永远逮不到一个安安静静站在那里的蜻蜓，只有蜻蜓飞起来了青蛙才能判断才能捕食。
3、睡觉 睡觉前的思考。在显示器之外去思考之前学习到的东西，要有一定的距离和空间高度去看待去思考，比如今天写的布局是不是合理，有没有必要这样复杂，如果把浮动改成绝对定位呢。等等，就像作平面设计一样，有时候椅子往后一仰，稍稍的远离屏幕，对之前的细节处理就能有一个全新的认识。
4、收藏 好记性不如烂笔头，总去发帖提问也不是办法。把看到的有用的教程收集起来分类整理，比如布局代码、导航特效、浏览器兼容hack写法等等。建立自己的文档库，时间久了整理整理，如果有合适的条件不要忘记和朋友们分享。
5、实践 作一个完整的网站/网页项目，未必要复杂或者庞大。但至少要有一个完整的页面，尽可能用熟悉的技术去实现。检验自己、发现问题给自己继续学习的动力。


半年前总结的一些东西，不知道有没有用：）

openwings

我是bird.不说什么了,跟你学到东西了,不能不顶一下.
顺便说一下:
8.#MyTaoBao {
    padding-left: 14px!important;
    margin-left: 9px!important;
    margin-left: 4px;
    background:transparent url(images/header_mm_mytb_icon.gif) no-repeat left center;
}
其中的background:transparent url,网络上没有查到完整的解释,请赐教

[ 本帖最后由 openwings 于 2007-4-16 22:57 编辑 ]

江南行客

transparent是background的默认值，即背景色透明，也可以理解为继承父标签的背景属性；

不用上网上找，Css2.0中文手册里就有，要用好这个手册。

phantom

哇哦，LZ真是有心了哦。

整理跟练习真的是少不了哦。

psdshow 楼主

原帖由 江南行客 于 2007-4-16 23:03 发表
transparent是background的默认值，即背景色透明，也可以理解为继承父标签的背景属性；

不用上网上找，Css2.0中文手册里就有，要用好这个手册。

经常指的是url里面的背景图片透明

psdshow 楼主

原帖由 江南行客 于 2007-4-16 22:43 发表
二、如何学习标准化
1、几本书、几个网站、几篇贴子、几个blog
《网站重构》掀起国内web标准热潮的第一本相关著作。理论性质多一些，全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途 ...

这个总结比我的好，我目前依然在学习中

基本上能制作出用table能做的效果，当然也少不了table不能做的效果

欢迎和我一起探讨

blank

希望大家把自己的心得写出来，给别人一点光，将会得到一片天

hongfu

用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多

同感！但用table 看代码那叫一个苦！table tr td 一堆在那累！

yougucaofan

你们真有心，我学过了，以前学的经验什么的都忘了，现在也想不起来了。支持两下

leaon

[quote]原帖由 hongfu 于 2007-4-17 11:29 发表



同感！但用table 看代码那叫一个苦！table tr td 一堆在那累！ [/quot]

一年前自己这样认为过，快！现在好象也不慢，最主要是熟练了。

ky4682

叫我看了怎能不顶一个？

Elfnina

heihei 。。。
受益

66855

受益不过那几本书不知道哪里买啊，我在网上搜了搜没有啊！

ooiioo

希望大家把自己的心得写出来，给别人一点光，将会得到一片天

xiaoququ

原帖由 leaon 于 2007-4-17 13:44 发表
原帖由 hongfu 于 2007-4-17 11:29 发表



同感！但用table 看代码那叫一个苦！table tr td 一堆在那累！

一年前自己这样认为过，快！现在好象也不慢，最主要是熟练了。

确实TABLE所见所得，易上手，可涉及到网站优化方面的，DIV+CSS有过之而无不及啊！

fkueaps

冷冷，感动啊～居然让俺上榜了...

你总结的这个好像熟的很...貌似俺亦是这样过来滴。只是那时候BLOG没有这么盛行，现在滴新人真幸福啊。

[ 本帖最后由 fkueaps 于 2007-4-26 17:07 编辑 ]

shellwayhe

我个人认为，在了解了基本的XHTML和CSS知识之后，我们就可以动手编写代码了。一边编写一边学习。css一定要静下心来好好学，当作香茗一样来品尝，一页一页看，理解了再往下一页翻，千万别想走捷径！
好好地看几本书，就如LZ提到的那些，甚至在学得比较深入了以后，可以看些英文原著。不要以为，英文原著多么难度，只要里面的专业术语记住了，看起来就很轻松。东南大学出版社有很多网页设计方面的影印图书，质量都很好。比如：Head First系列，权威指南系列。网上也有很多电子书可以下载，感兴趣的上百度一搜就有了。

isans

我觉得CSS+DIV布局超级简单,学会几个浮动,相对绝对,简单的布局就可以拿下了,结合JS,没什么办不到的.表格算个什么,顶多只能显示下数据.不服的可以加我QQ:69419249.我和你比二局.

huming

收藏网站学习了哦！

rainoxu

最近帮人把一个表格布局的网站重构,痛苦...有些地方干脆就不想改了...

lovelian

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


这个好啊  我看几遍了 呵呵~

我感觉 布局的时候加个 broder{#ff000 1px solid;} 这个方面浏览看。 刚刚觉得的。 希望和我一样菜的人。注意一下。高手就别笑我了。谢

psdshow 楼主

布局的时候加个broder{#ff000 1px solid;}

我也经常这用做,看看效果是什么

llz243840857

好文章 顶下!
原本今天还郁闷着呢,我又重新燃起希望啦

gaoang

1. 整体结构
       
<html>
<head></head>
<body>
<div id="container">
<!---页头开始--->
<div id="header"></div>
<!---主体开始--->
<div id="content"></div>
<!---页尾开始--->
<div id="footer"></div>
</div>
</body>
</html>
2. 个体结构
<div id=" content ">
<div class="title"><h2><span>主体开始</span></h2></div>
<div class="content">
<div id="leftcontent">
<h2>左侧</h2>
<div class="content" >左侧内容</div>
</div>
<div id="middlecontent"></div>
<div id="rightcontent"></div>

</div>
</div>

通吃结构

jn127

我学习的道路是:
苏小雨的那本手册，入门砖
后来知道有本书叫重构，看了了解到做网站有个东西叫标准和DIV+CSS
开始追潮流，公司就我一个用DIV，也没打算招高手，孤军奋斗
看到DIV排的网站新鲜，参考代码，学到不少
做梦也在考虑如何使用DIV，第二天看到前一天的页面总觉得有些苯
CSS参考手册， 常备工具书
加了个群，大家资源共享，共同提高，认识不少朋友，自我感觉进步很快，很多兼容问题迎刃而解
后来有朋友说有个行业叫网页制作，开始了新的道路
呵呵，不知道有没有同路人
继续学习中。。。

manasheep

那个苏什么的手册不能看了啊～～怎么回事？网站也换成国外的一个什么玩意的了

joymv

不错...

happy07

汗，汗，汗，
   现在才知道自己有好大的差距了，
div+css初学者