DIV+CSS布局基本流程及实例介绍-CSDN博客

都说用DIV+CSS布局来设计网站便于优化，容易被收录，那么你对DIV+CSS布局的用法是否了解？CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的（html）网页的统称。DIV+CSS布局是现在非常流行的布局方法，替代了原来的表格布局。下面我们先来看下学习DIV+CSS布局的基本步骤：

一、认清学习的要求

1、弄清目的，首先要认识为什么要学习CSS？

2、心态不能急，如果你很急躁，否则会很快丧失兴趣。

3、坚持，这个不是一到两天的事情，是一个漫长的过程（至少两个月）。

二、基础学习

1、了解CSS作用是什么？（即CSS、html和js的关系是什么，html结构重要性）

2、css基础知识、css属性样式

3、html

上面几点，一般都是很快的掌握了，也不需要做到精通，了解大概就可以。

差不多时候，开始在网上找一些psd设计稿，自己做做看，做完之后发现问题，并把他们进行总结。

三、学会分析别人网页布局

当你做psd设计的代码，发现问题，可能找不到答案或没有人帮你回答，也不要急，这时最好看看别人网页的布局结构，主要看html布局框架，进行借鉴（当然网上还有很多结构代码很槽糕）。然后了解美工图如何分析、如何使用PS工具切出需要的素材、如何使用这些切出的图片素材进行布局、布局技巧、兼容性解决与避免等。

总之：就是让自己布局时候能知道大的布局结构如何布局，建立布局思想与技巧。

四、代码的规范

当你看完很多别人的网页代码之后，你会发现，他们都有规范，这些规范网上有很多，你需要总结和背诵，当然不是死记硬背，主要在切图上多做多实践，熟了就能记住。

五、大量练习

练习是从始到终的，不要断，即使找一些简单的网页进行布局实践，开始可能开发很慢，会遇到很多小问题，也不急。

制作DIV CSS网页前思考布局：

首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。

下面通过一个实例讲解下CSS布局分析，我们以DIV CSS5列表页面分析css布局：

首先我们可以分析出我们DIV CSS布局重构此页面结构框架，我们可以看出是上、中、下结构，其中又包括了左右结构。

由此我们就要写此页面CSS和html时候就先从上到下从外到内原则写CSS与html。

我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html，CSS文件命名为index.css。这里有个诀窍就是可以导入模板方式来建CSS与html初始页面，然后将CSS文件引用到html，再在CSS模板的基础上再写再添加CSS。

以下是index.html的html代码：

以下为引用的内容：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>