发布网友
发布时间：2024-09-17 00:39
共1个回答
热心网友
时间：2024-09-21 00:21
解决这个问题的方法如下：
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:0auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。
5、在test.html文件内，使用div创建网页的中部，使用margin:0auto设置div居中，同时设置其宽度为800px。
6、在test.html文件内，在网页的中部，创建两个div，用于将中部为两部分，每一个部分宽度为50%，左部分使用float:left设置左浮动，右部分使用float:right设置右浮动。
7、在test.html文件内，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。同时，使用margin:0auto设置div居中，同时设置其宽度为800px，背景颜色为#000fff。
8、在浏览器打开test.html文件，查看实现的效果，这样问题就解决了。
请教DIV+CSS高手，这样的网页布局的DIV+CSS代码怎么写？给你写好了，你看下。模型给你定了高，否则看不到效果的，你用时可以将高删除就可以高度自适应了。
!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""
htmlxmlns=""
head
metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/
title无标题文档/title
styletype="text/css"
*{
margin:0;
padding:0;}
body{
width:960px;
position:relative;
left:50%;
margin-left:-480px;}
div{
border:1pxsolidblack;}
#header,#fooder{
height:100px;}
#container{
float:left;
border:none;}
.floatL{
float:left;
width:713px;
border:none;}
.floatR{
float:right;
width:240px;}
.zhuanji{
width:464px;
float:left;
height:180px;
}
.hihi{
width:240px;
height:180px;
float:left
}
.ri_cont{
width:240px;
height:500px;
float:left;}
.le_cont{
float:left;
width:240px;
height:315px;}
.new_tuijian01,.new_tuijian02,.new_tuijian03{
width:464px;
height:100px;
float:right;}
.clearB{
clear:both;}
.mb5{
margin-bottom:5px;}
.mb7{
margin-bottom:7px;}
.mr5{
margin-right:5px;}
/style
/head
body
divid="header"class="mb7"header/div
divid="container"class="mb7"
divclass="floatLmr5"
divclass="zhuanjimr5mb5"zhuanji/div
divclass="hihi"hihi/div
divclass="le_contmr5"le_cont/div
divclass="new_tuijian01mb5"new_tuijian01/div
divclass="new_tuijian02mb5"new_tuijian02/div
divclass="new_tuijian03"new_tuijian03/div
/div
divclass="ri_contfloatR"ri_cont/div
/div
divid="fooder"class="clearB"/div
/body
/html
如何用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
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}
用html+div+css制作田字格网页布局!DOCTYPEhtml
html
head
metacharset="utf-8"
title/title
style
.divL{
float:left;background-color:yellow;width:120px;height:120px;
}
.divLT{
margin:50px;
}
.divLB{
margin:0px50px50px;
}
.divR{
float:right;background-color:yellow;width:120px;height:120px;
}
.divRT{
margin:50px50px50px0px
}
.divRB{
margin:0px50px50px0px;
}
.divTB{
background-color:#005580;border-color:#000000;width:550px;height:50px;
}
.divLR{
width:80px;height:390px;background-color:#008000;display:table-cell;
}
/style
/head
body
divclass="divTB"/div
divstyle="display:table;width:550px;"
divclass="divLR"/div
divclass="divLdivLT"/div
divclass="divRdivRT"/div
divclass="divLdivLB"/div
divclass="divRdivRB"/div
divclass="divLR"/div
/div
divclass="divTB"/div
/body
/html
写的可能不太行，不知道满不满足你的要求
Copyright © 2019-2022 51dongshi.com 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
