请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 3639|回复: 6

[教程] XHTML+CSS布局讨论 [复制链接]

chenzhe 楼主
帖子
398
体力
1065
威望
11
居住地
辽宁省 沈阳市
发表于 2007-2-4 22:28:06 |显示全部楼层
XHTML+CSS常规应用教程——XHTML+CSS布局

总结了几篇不错的文章,加了点自己的评论和总结。

1.典型的三行二列居中高度自适应布局
地址:http://www.w3cn.org/article/layout/2004/88.html

本文以实例的方式介绍了一种具体布局的代码,详尽地分析了各个CSS属性设置的目的。非常适合关于XHTML+CSS布局的学习和研究。小菜鸟注:文中利用了“margin-right: auto;margin-left: auto;”实现居中,可以略写为“margin:0 auto;”,效果相同。这是实现div页面居中的最常用方法。



2.Div+CSS布局入门教程(一共5节)
地址:http://www.tblog.com.cn/article.asp?id=283

详尽的手把手CSS布局教程——甚至连布局的思路都说明的十分详细。我小菜鸟是最喜欢这种教程了,不得不佩服作者的耐心!不过小菜鸟仍然要提一点不同意见,在测试盒子大小的时候作者使用了border。原文中有如下一段:

“为了可以查看到效果,建议在#sidebar和#mainbody中加入以下代码,预览完成后可以删除这段代码:border:1px solid #E00;height:200px”。

但是border事实上是会影响盒子的大小的(尽管影响实际也并不大),所以小菜鸟在测试盒子的时候通常是使用背景颜色background-color。



3.CSS基本布局16例
地址:http://www.w3cn.org/article/layout/2004/55.html

文中提供了许多常见的网页布局的XHTML和CSS代码。对于页面信息量不是特别大,分栏不是特别多的网站可以直接发挥拿来注意,简单的修改一下,用到自己的网站中。


小菜鸟个人对这三篇文章的总结
根据以上文章我们不难总结出布局的基本方法:

1.首先是要构思页面要分为几个大的部分,各个部分的位置。利用画图软件是首选。不过小菜鸟由于不会使用画图软件,所以是采用把网页画在草纸上的方法^_^。

2.将构思转换成代码。例如<div id="header"></div><div id="footer"></div>等等。

3.设置各个部分的CSS属性,主要是大小和margin、padding属性。

4.测试并且观察网页的实际效果与自己的构思是否一致。这里涉及到测试的方法,可以使用border或者是background-color,小菜鸟个人更喜欢使用背景颜色,上文已经指出原因。

5.完成布局,开始添加内容。

关于XHTML+CSS布局的更多资源
小菜鸟目前只找到这些XHTML+CSS布局的中文文章。如果您有好的关于布局的文章或者资源,希望您能够推荐给我们,我们会加到这篇文章里。如果看完了上面的内容,觉得还不过瘾,可以找一些XHTML+CSS布局的网站阅读代码。下面的信息可以帮助我们快速地找到合适的站点。

Owen在他的Blog“CSS 陈列馆 - 一网打尽”一文中,提供了一些专门收集CSS酷站的专业站点(都是英文站),相信您一定可以在那里找到很多适合学习的站点。而李光明则在“CSS展示网站收集”一文中给出了更多的专业CSS收集站点。在阅读源码或使用CSS布局网站的时候遇到困难可以到蓝色理想的网页标准化论坛讨论。

原文发表在:http://cainiao8.com/web/cssing/cssing-01-layout.html、蓝色理想论坛和51la站长论坛。将随时根据讨论更新。

[ 本帖最后由 chenzhe 于 2007-2-4 22:42 编辑 ]
西部数码顶级域名注册商39元抢注!
dason 
帖子
35
体力
80
威望
0
发表于 2007-2-5 10:05:35 |显示全部楼层
但是border事实上是会影响盒子的大小的(尽管影响实际也并不大),所以小菜鸟在测试盒子的时候通常是使用背景颜色background-color。

有道理呵~ 一般可能是因为background-color字母太多了所以喜欢用border。如果需要多个盒子非常细微的相对位置调整还是bgcolor比较好。
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

chenzhe 楼主
帖子
398
体力
1065
威望
11
居住地
辽宁省 沈阳市
发表于 2007-11-20 08:33:19 |显示全部楼层
更正一点,第二篇文章链接已经失效,最新地址:http://www.tblog.com.cn/index.php/archives/579
或者:搜索链接

4.Faux Columns(英文)

英文原版地址:http://www.alistapart.com/articles/fauxcolumns

中文译版地址:http://www.orangize.cn/web/layout/20071118/39.html

两栏等高布局的著名方法——Faux Columns,事实上这种布局的核心是一个平铺的背景图片。


5.跳出盒子思考

英文原版地址:http://www.alistapart.com/articles/fauxcolumns

中文译版地址:http://www.orangize.cn/web/layout/20071112/38.html

多栏,等栏高,固定或者是液体的中间栏,简洁的HTML和CSS。作者真的是个十分聪明的人,利用边框充当背景,和Faux Columns有异曲同工之妙。


更新:2007年11月20日,添加了两篇最近翻译的文章(4,5)。更新了一个无效链接(2)。

不能编辑了,只好回复了。

[ 本帖最后由 chenzhe 于 2007-11-20 08:40 编辑 ]

使用道具 举报

catest 
帖子
193
体力
210
威望
4
发表于 2007-11-20 15:29:16 |显示全部楼层
楼主有没有遭遇过这种犹如“太极”的布局?下面是我发的问题,有空看下,我依然晕厥了。。。
http://bbs.blueidea.com/thread-2810025-1-1.html
还得修练。。。

使用道具 举报

chenzhe 楼主
帖子
398
体力
1065
威望
11
居住地
辽宁省 沈阳市
发表于 2007-11-20 19:16:25 |显示全部楼层
原帖由 catest 于 2007-11-20 15:29 发表
楼主有没有遭遇过这种犹如“太极”的布局?下面是我发的问题,有空看下,我依然晕厥了。。。
http://bbs.blueidea.com/thread-2810025-1-1.html

看了你的帖子,觉得做起来比较容易,只要理解了float就可以了。但是对这个布局的实用价值表示怀疑。

使用道具 举报

nileo 
帖子
105
体力
399
威望
0
居住地
江苏省 淮安市
发表于 2010-7-27 13:56:37 |显示全部楼层
链接失效了

使用道具 举报

藤子弹

中级会员 手机认证 

帖子
730
体力
482
威望
0
发表于 2010-7-29 13:55:35 |显示全部楼层
这帖子都被翻了出来。。。

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 09:15 , Processed in 0.181542 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部