DIV CSS制作的步骤有哪些

本篇内容主要讲解“DIV CSS制作的步骤有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“DIV CSS制作的步骤有哪些”吧!

一、分析带切美工图  

在CSS制作前对网页美工图分析是必不可少的，少了分析会让你接下来布局凌乱。我们分析也应该遵循整体到局部、从外到内、从上到下，分析内容：

1、网页结构
分析网页结构，让自己有数如何布局网页框架，比如分析网页左右、上下结构构造，便于整体布局把握

比如重要的 头部、内容部分、底部版权
内容部分是什么结构，可以如何拆分布局。

2、分析需要切出图片素材
分析网页美工图那些是作为网页背景、那些是内容图片。

作为网页背景图片，如果是背景不重复的一般是隐藏遮挡背景图片上的内容再整体切出，如果是可以平铺重复显示背景，我们如何切出减少素材大小。

3、特效分析
如果网页中有特效，我们如何实现，自己会那没问题，也可以找特效嵌入，这个时候就要求平时多收集常用CSS+JS特效（CSS特效、CSS模块），便于布局运用。

4、整体把握
通过整体、局部分析应该做到对此网页CSS布局心中有数，整体框架如何布局，网页如何拆分结构布局、局部是否有难点，难点解决等都要做到心中有数。

二、切出素材   

根据第一步分析，切出网页中图片、网页素材等，PS导出切片。

一般图片GIF格式，如果是图片有半透明一般导出PNG格式（ie6 png透明解决），图片内容一般导出为jpg格式。

三、引入DIVCSS5初始化模板   

将拷贝一份亿速云初始化模板，命名好文件夹项目名。提供的初始化css模板，包括了CSS文件(style.css)、HTML文件（index.html）、放图片images文件夹，已经对应新建好常用文件夹结构。

CSS模板

四、将切出网页图片素材放入初始化模板   

我们将网页素材图片考入新建项目的images文件夹内。

五、开始从上到下、从外到内布局   

1、基础修改设置
一般使用DW软件打开index.html,首先进行基本设置，比如根据网页美工图使用PS获得文字颜色、背景颜色，对css中设置字体颜色、背景颜色、如果背景是图片中设置好CSS背景图片。

2、布局把握
一般是从上到下布局，从外到内布局，先布局同级最大结构框架，再局部布局。

比如，头部，我们就开始布局头部最外层div盒子，设置好css布局居中，css宽度等，再布局头部上下结构情况，再分别设置局部左右框架最后布局内容（左右布局一般使用css float样式）。

比如左右结构内容，一般是先布局最外层盒子，在跟着布局左右结构2个盒子，然后再回到左侧盒子，开始布局左侧内容。新手不要布局最外层盒子后，就开始布局左侧及左侧内容而右侧结构都没有设置布局，如果这样很容易造成布局混乱与布局错误。

重要：一定先最外层，如何对应左侧和右侧盒子大框架布局了，再回到左侧或右侧开始从上到下布局局部。

以上布局把握布局步骤让您在布局时候有条有理，不易造成布局混乱无从下手。

同时在布局时候可能一般不确定自己布局是否正确是否兼容，可以在布局时候边布局边在一个浏览器中测试兼容，新手千万不要在软件中布局完网页才测试，这样很容易造成错误兼容问题找不到原因。在布局中测试可以发现问题解决问题，让DIV+CSS网页兼容更好。

布局时候可能您会遇到：
css命名
css hack

六、测试css兼容，完成布局    

网页布局完后，就进行最后常用浏览器兼容性测试，最后调整修改完善，这样一个从网页美工图到css制作完成的html网页就完成。

到此，相信大家对“DIV CSS制作的步骤有哪些”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！