网上科普有关“如何用DIV+CSS进行网页样式布局”话题很是火热，小编也是针对如何用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，即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。
方法/步骤
1
在桌面建立一个index.htm的文件和main.css的文件 ，当然你也可以不用main.css的文件 ，但是为了方便操作，还是建一个吧 。只要把记事本另存为就可以了 。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制 ，我们右键选择用记事本打开index文件输入代码 ，并在head里写上<link href="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>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1"></div>
<div id="top2"></div>
<div id="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=baidu这个只是随便写的，你爱等于什么就等于什么
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我截图的照片</div>
<div id="top2">
<div ></div>
<div ></div>
</div>
<div id="top3">
<div ></div>
<div ></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}
.baidu{background:#FF6666; height:380px; width:380px; float:left; margin:10px}
.baidujingyan{background:#FFCC00; height:530px; width:380px; float:left; margin:10px;}
8
因为我这个是我截图相册的网页 ，下面我们就放照片吧，这里我偷个懒 ，把照片都放在桌面了 ，所以不用连接照片地址了。
<html>
<head>
<title></title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top1">这里都是我老婆的照片</div>
<div id="top2">
<div ><img src="QQ20141212090452.jpg"></div>
<div ><img src="QQ20141212090346.jpg"></div>
</div>
<div id="top3">
<div ><img src="QQ20141212090224.jpg"></div>
<div ><img src="QQ20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果不在同一层目录，就需要连接到地址
9
这样一个网页就做好了 ，如果需要制作精美的网页 ，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局 ，不停的定义他的属性 ，基本静态的网页就是这样做出来的
关于“如何用DIV+CSS进行网页样式布局”这个话题的介绍，今天小编就给大家分享完了 ，如果对你有所帮助请保持对本站的关注！
本文来自作者[冷雪]投稿，不代表石号立场，如若转载，请注明出处：https://s0429.com/cshi/202512-2110.html
评论列表（4条）
我是石号的签约作者“冷雪”！
希望本篇文章《如何用DIV+CSS进行网页样式布局》能对你有所帮助！
本站[石号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“如何用DIV+CSS进行网页样式布局”话题很是火热，小编也是针对如何用DIV+CSS进行网页样式布局寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临...