div页面布局的代码（用div实现页面布局）

本篇文章给大家谈谈div页面布局的代码，以及用div实现页面布局对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、关于dreamweaver的css和div布局代码
• 2、div 结构布局的代码?
• 3、编写CSS+DIV代码完成三列固定宽度的网页结构布局
• 4、请帮我写一个简单的DIV+CSS网页布局例子

关于dreamweaver的css和div布局代码

style type="text/css"

    .max{ width:800px; height:auto;}

    .top{ width:800px; height:120px; border:1px solid red; background:#6CC}

    .center{ width:800px; height:355px; border:1px solid #393; margin-top:10px;}

    .center-top{ width:800px; height:175px; }

    .center-bottom{ width:800px; height:160px; margin-top:10px;}

    .center-left{ float:left; width:380px; height:155px; border:1px solid red; margin-left:10px; margin-right:10px; margin-bottom:5px;}

    .center-right{ float:right; width:380px; height:155px; border:1px solid red; margin-right:10px; margin-bottom:5px;}

    .center-left-top{ height:25px; width:380; background:#999;}

    .center-right-top{ height:25px; width:380; background:#6CC;}

    .bottom{ background:#CCC; width:803px; height:100px; margin-top:5px;}

    .bottom-center{ width:600px; height:80px; margin-top:8px; margin-bottom:8px; text-align:center;}

/style

body

    div class="max"

    div class="top"/div

    div class="center"

        div class="center-top"/div

        div class="center-bottom"

            div class="center-left"

                div class="center-left-top"魅力华夏

                /div

                div class="center-left-bottom"/div

            /div

            div class="center-right"

                div class="center-right-top"人文地理

                /div

                div class="center-right-bottom"/div

            /div

        /div

    /div

    div class="bottom"

        div class="bottom-center"内容/div

    /div

/div

/body

div 结构布局的代码?

div class="main"

div class="left"

divdiv1/div

divdiv2/div

divdiv3/div

/div

div class="right"

divdiv1/div

divdiv2/div

/div

/div

编写CSS+DIV代码完成三列固定宽度的网页结构布局

给右列一设置margin：auto  50px;   上下外边距不管，左右个50px

margin  意思是 简写属性在一个声明中设置所有外边距属性。

这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

!DOCTYPE html

html

head

meta charset="UTF-8"

title/title

style type="text/css"

*{margin: 0;padding: 0;}

body{width:1012px;}

div{

width: 300px;

height: 300px;

border: 2px solid #333;

border-sizing:border-box;/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px  ,没有这个属性的话是708px*/

float: left;

}

#a{

background: #ffc33c;

border: 2px solid #333;

}

#b{

background:#ff33cc ;

margin: auto 50px;

}

#c{

background:#ff33cc ;

}

/style

/head

body

div id="a"

左列

/div

div id="b"

右列1

/div

div id="c"

右列2

/div

/body

/html

请帮我写一个简单的DIV+CSS网页布局例子

楼上的也太复杂了，什么都贴出来了？—

—

页面

代码

div

class="content"

div

class="left"/div

div

class="mid"/div

div

class="right"/div

/div

css文件

.content{

width:800px;

magin:0

auto;

}

.left{

float:left;}

.mid{

float:left}

.right{

float:left}

div页面布局的代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于用div实现页面布局、div页面布局的代码的信息别忘了在本站进行查找喔。