如何用DIV+CSS进行网页样式布局
一、选择“div标签”命令
打开dreamweaver，新建网页并保存为“die.html”，选择【插入】【布局对基简象】【div标签】命令，打开“div标签”对话框。
二、输入div标签名称
1、在“ID”列表框中选择“top”
2、单击“新建css规则”按钮准备进行css规则定义
三、新建css规则
在打开的对话框中保持默认设置，单或锋备击“确定”按钮进行衫毁css规则新建。
四、设置属性
1、在“分类”列表框中选择“方框”选项。
2、在窗口右侧进行css规则定义，其中margin值的设置非常重要，“left”及“right”为auto，则可让div页面水平居中。
3、单击“确定”按钮。
五、创建div按钮
返回“插入div标签”，单对话框，单击“确定”按钮，完成div标签的插入
六、查看创建的div
将鼠标光标定位在div，即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。
什么是div+css布局？
div+css 是一种网页的布局方法，这一种网散仔页布局方法有别于传统的HTML网页设计语言中的代码定位方式，可实现网页页面内容与表现相分离。
简单来说就是把设计的网页（用ps，fireworks等设计的），用div+css布局型好后，使得页面内容（div）和表现（css）的卜掘铅分离，有利于用户的体验，更是精简了代码。
div+css布局的基本流程
解决这个问题的方法如下：
1、新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。
2、在test.html文件内，对body进行芦伏样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。
3、在test.html文件内，为了讲解方便，设置所有的div高度为200px，内陪锋携容的颜色为红基兄色。
4、在test.html文件内，使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。
5、在test.html文件内，使用div创建网页的中部，使用margin:0 auto设置div居中，同时设置其宽度为800px。
6、在test.html文件内，在网页的中部，创建两个div，用于将中部为两部分，每一个部分宽度为50%，左部分使用float:left设置左浮动，右部分使用float:right设置右浮动。
7、在test.html文件内，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。同时，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为#000fff。
8、在浏览器打开test.html文件，查看实现的效果，这样问题就解决了。
怎么进行divcss网页布局
1
在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上linkhref="main.css"type="text/css"rel="stylesheet"使它受到main.css控制
html
head
title/title
/head
body
/body
/html
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
html
head
title/title
linkhref="main.css"type="text/css"rel="stylesheet"
/head
body
divid="top"
divid="top1"/div
divid="top2"/div
divid="top3"/div
/div
/body
/html
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=这个只是随便写的，你爱等于什么就等于什么
html
head
title/title
linkhref="main.css"type="text/css"rel="stylesheet"
/head
body
divid="top"
divid="top1"这里都是我截图的照片/div
divid="top2"
divclass=""/div
divclass=""/div
/div
divid="top3"
divclass="jingyan"/div
divclass="jingyan"/div
/div
/div
/body
/html
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;text-align:center;line-height:50px;font-size:30px}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
.{background:FF6666;height:380px;width:380px;float:left;margin:10px}
.jingyan{background:FFCC00;height:530px;width:380px;float:left;margin:10px;}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
html
head
title/title
linkhref="main.css"type="text/css"rel="stylesheet"
/head
body
divid="top"
divid="top1"这里都是我老婆的照片/div
divid="top2"
divclass=""imgsrc="QQ图片20141212090452.jpg"/div
divclass=""imgsrc="QQ图片20141212090346.jpg"/div
/div
divid="top3"
divclass="jingyan"imgsrc="QQ图片20141212090224.jpg"/div
divclass="jingyan"imgsrc="QQ图片20141212090255.jpg"/div
/div
/div
/body
/html
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
