当前位置：首页 → 问答吧 → 如何快速地进行css布局

如何快速地进行css布局

时间：2010-06-01

来源：互联网

设计师给图，前端根据图还原效果写代码。如果页面结构较小的话，可以先写大的框架，然后写细节，一步步完成。但是如果是个复杂的大型页面，该如何完成呢？每次我都感觉自己写代码效率很低。另外如果设计师没给出图的间距宽高等参数，自己测量岂不是很慢了。
给出自己的布局步骤，高手看看有什么问题么。
1.写基本的框架，头部，主要部分，底部等；
2.把大的部分继续细化，直至写出所有html代码；
3.样式写法开始，css rest；
4.利用border或者background区分各个块；
5.给各个区块设置基本属性宽高，浮动，定位构成大概；
6.依次细化区块，设置填充和边距，字体大小，颜色样式；
7.背景位置及其它细节。
就这些吧，希望指点一下了，谢谢~~

作者: xmlovedoudou 发布时间: 2010-06-01

第4步无必要。

第5-7我一般是不分先后进行。

作者: ericwoo 发布时间: 2010-06-01

差不多吧，第四步调试的时候非常好用。
怿飞这里有篇文章：http://www.planabc.net/2006/11/26/web_standards_steps/

其中一张图很好：

作者: yoom 发布时间: 2010-06-01

谢谢斑竹了

作者: xmlovedoudou 发布时间: 2010-06-01

这个图要留下。为什么下载到本地不动了。WIN7的

作者: zhaoyan860222 发布时间: 2010-06-01

引用:

原帖由 yoom 于 2010-6-1 13:11 发表
差不多吧，第四步调试的时候非常好用。
怿飞这里有篇文章：http://www.planabc.net/2006/11/26/web_standards_steps/

其中一张图很好：
145133

IE8下的开发人员工具，FF下的Firebug都能在有CSS的情况下完成HTML和CSS调试工作。

作者: ericwoo 发布时间: 2010-06-01

简单的企业类小型网站，可以先HTML，再CSS

对于大中型的门户网站，特别是主要内容部分，个人觉得可以先将其分成几大段，HTML和CSS分段完成，因为内容太多，直接全部先HTML再CSS，等到写CSS的时候我估计都已经忘记了样式和ID名，还要一个一个在HTML查找，这样显然不太方便，而且也不方便测试

作者: thinkothers 发布时间: 2010-06-01

前面是一张很好的范例图，收藏了

作者: shbijiben 发布时间: 2010-06-02

你说的太对了，我就是吃了这种苦。把右边窗口条拉下来看html和id,class,然后又写样式，如此往复，效率太低了。大型页面结构分成小段写样式很不错，而且注意力也会集中。

作者: xmlovedoudou 发布时间: 2010-06-02

基本上步骤差不多不过少了第四步调试的时候才用
reset的时候先把公用样式写出来

作者: lifeseato 发布时间: 2010-06-02

好图!

作者: GMX602 发布时间: 2010-06-03