都说用 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 设计稿css例子，自己做做看，做完之后发现问题，并把他们进行总结。

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

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

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

  四、代码的规范

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

  五、大量练习

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

  制作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 代码：

  以下为引用的内容：

  实例

  我是头部（上）

  我是中的左

  我是中的右

  我是底部（下）

  尝试一下 »

  index.css 的CSS代码如下：

  以下为引用的内容：

  body,div,address,blockquote,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,h5,h6,p,pre,table,

  caption,th,td,form,legend,fieldset,input,button,select,textarea{margin:0;padding:0;

  font-weight:normal;font-style:normal;font-size:100%;font-family:inherit;}

  ol,ul,li{list-style:none;}

  img{border:0;}

  body{color:#000;background:#FFF;text-align:center;font:12px/1.5Arial,Helvetica,sans-serif;}

  .clearfix:after{clear:both;content:".";display:block;height:0pt;visibility:hidden;overflow:hidden;}

  .clear{clear:both;height:1px;margin-top:-1px;width:100%;}

  .dis{display:block;}

  .undis{display:none;}

  /此上面代码是初始CSS模板，下面是新写CSS布局框架代码/

  #header,#centers,#footer{width:100%;margin:0auto;

  clear:both;font-size:18px;line-height:68px;font-weight:bold;}

  #header{height:68px;border:1px solid #CCCCCC;}

  #centers{padding:8px0;}

  #footer{border-top:1px solid #CCCCCC;background:#F2F2F2;}

  #centers.c_left{float:left;width:230px;border:1px solid #00CC66;

  background:#F7F7F7;margin-right:5px;}

  #centers.c_right{float:right;width:500px;border:1px solid #00CC66;background:#F7F7F7}

  你可以考出此两段代码新建个试试。

  按以下步骤来建设一个网站的页面:1、顶部部分，其中包括了LOGO、MENU和一幅Banner图片；

  2、页面中间部分，那就是我们的主体了，要求打开首页快速，所以我们在网站发布的信息设计为三列。