网页设计div怎么布局（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文件，查看实现的效果，这样问题就解决了。

从两个方面来，可确保在各种浏览器中居中：1、在《body》中加入style=“text-align:center“ 如《body style=“text-align:center“》；2、在最外层的《div》中加入style=“margin:0 auto;“ 如《div style=“margin:0 auto;“》。当然完全可用css控制，例：《style type=“text/css“》body{text-align:center;}#wrapper{margin:0 auto;}《/style》《body》《div id=“wrapper“》页面内容《/div》《/body》

《div class=“bg“》《div class=“a“》《/div》《div class=“a“》《/div》《div class=“a“》《/div》《/div》一般都是这样布局 当然这是基本格式 需要CSS进行排版

要如何布局，你可以把DIV想象成一块一块，加上height和width，然后在加上背景颜色，就可以看出来了，然后加上float、position等方式移动到你想要的位置，就可以了！网页总体的布局的方法就是这样的，如果要在一个块里面放置元素，这个可以去学习理解盒模型的知识，希望帮助到你！

　　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 class=“baidu“》《/div》　　《div class=“baidu“》《/div》　　《/div》　　《div id=“top3“》　　《div class=“baidujingyan“》《/div》　　《div class=“baidujingyan“》《/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 class=“baidu“》《img src=“QQ图片20141212090452.jpg“》《/div》　　《div class=“baidu“》《img src=“QQ图片20141212090346.jpg“》《/div》　　《/div》　　《div id=“top3“》　　《div class=“baidujingyan“》《img src=“QQ图片20141212090224.jpg“》《/div》　　《div class=“baidujingyan“》《img src=“QQ图片20141212090255.jpg“》《/div》　　《/div》　　《/div》　　《/body》　　《/html》　　如果图片不在同一层目录，就需要连接到图片地址　　9　　这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。　　10　　下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的

第一部分 两列式页面布局一、两列定宽布局二、两列自适应布局三、单列定宽单列自适应布局四、两列等高布局第二部分 三列或多列布局一、两列定宽中间自适应布局二、三列自适应布局和三列等高布局

使用 DIV Tags 当我们使用 CSS-P 的时候， 我们主要把它用在 DIV (division) tag 上.当你把文字, 图象, 或其他的放在 DIV 中， 它可称作为 “DIV block“, 或 “DIV element“ 或 “CSS-layer“, 或干脆叫 “layer“. 而中文我们把它称作 “层次“. 所以当你以后看到这些名词的时候， 你就知道它们是指一段在 DIV 中的 HTML。使用 DIV 的方法跟使用其他 tag 的方法一样 《div》 《p》《font face=“Arial“》This is a DIV tag 《/font》《/p》《/div》但当我们把 CSS-P 用到 DIV 中去以后， 我么就可以严格设定它的位置. 首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck. 给名字的目的是我们以后可用 JavaScript 来控制它， 比如说移动它或改变它的一些性质等等。 《div ID=“truck“》 《p》《font face=“Arial“》This is a truck 《/font》《/p》《/div》给层次取什么名字是随意的, 名字可以是任何英文字母和数字, 但第一个必须是字母. 有两种把 CSS-P 应用到 DIV 的方法.Inline CSS:Inline 是最常用的方法。 《div ID=“truck“ STYLE=“styles go here“》 《p》《font face=“Arial“》This is a truck《/font》《/p》《/div》我们下面将会告诉你都有哪些 style 和如果把它们写到 DIV 里。External STYLE tag:使用 External 方法的结果是一样的。 现在我们主要讨论 Inline 方法。请注意在 External 方法里,在 STYLE 里的 ID 和 DIV 里的关系。 《div ID=“《“ SPAN CLASS=“orange“》 《p》《font face=“Arial“》truck“》 This is a truck《/font》《/p》《/div》Cross-Browser CSS 性质:我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作， 所以我们主要讨论那些对俩者都通用的性质。 下面这些性质符合由 W3C 给出的标准。 position 决定 DIV tag 是如何放置的。 “relative“ 意思是DIV的位置是相对于其他 tag 的。而“absolute“ 是说 DIV tag 的位置是相对于它所在的窗口. 这里主要讨论 absolute. left 相对于窗口左边的位置 (pixels) top 相对于窗口上边的位置 (pixels) width DIV tag 的宽度。 所有在 DIV 里的文字或html都在里面。 height DIV tag 的高度。 这个性质很少用除非你想 Clip 层次。 clip 给出 layer 的 clipping (可看的见的) 部分. Clip 可使得DIV 显示为一个可以定义的很准确的方块。 你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。clip:rect(top,right,bottom,left); visibility 隐蔽或展现DIV 根据它的值 “visible“, “hidden“, “inherit“. z-index DIV tag 的立体位置。 值越大 DIV 的位置越高。 background-color DIV 背景的颜色。 layer-background-color Netscape 的 DIV 背景颜色. background-image DIV 的背景图象 layer-background-image Netscape 的 DIV 的背景图象。 CSS 的语法是用冒号来分开性质和它的值, 用半分号来分开性质: position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0,200,100,0); visiblity: visible; z-index: 1; background-color:#FF0000; layer-background-color:#FF0000; background-image:URL(filename.gif); layer-background-image:URL(filename.gif);from:asp学习网/title:使用 DIV布局/ time:2006-4-19 0:31:52

写代码吧《div》《/div》设置div的样式《div style=“style1“》《/div》style1就是你的css在dw中要怎么画，我也没试过= =!

html页面中表单怎么用div分列布局主要分两个步骤操作：

第一种情况，float浮动相同

让两个div盒子的float值相同，比如都设置float:left或float:right，宽度设置合适即可。这里我们通过案例实现一行两列DIV布局。

1、完整实例DIV+CSS代码：

《!DOCTYPE html》 《html》 《head》 《meta

1、完整HTML源代码：

《!DOCTYPE html》 《html》 《head》 《meta http-equiv=“Content-Type“ content=“text/html; “ /》 《title》两个DIV并排《/title》 《style》 .div-c{ float:left;width:49%;border:1px solid #F00} .div-d{ float:right;width:49%;border:1px solid #000} 《/style》 《/head》 《body》 《div class=“div-c“》第三个DIV盒子《/div》 《div class=“div-d“》第四个DIV盒子《/div》 《/body》 《/html》

2、两列并排DIV实例截图