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

2024-12-18 21:31:19
推荐回答(4个)
回答1:

楼上的也太复杂了,什么都贴出来了?—

页面
代码
class="content">
class="left">


class="mid">

class="right">


css文件
.content{
width:800px;
magin:0
auto;
}
.left{
float:left;}
.mid{
float:left}
.right{
float:left}

回答2:

楼上的也太复杂了,什么都贴出来了?— —

页面代码






css文件
.content{
width:800px;
magin:0 auto;
}
.left{
float:left;}
.mid{
float:left}
.right{
float:left}

回答3:





无标题文档










回答4:

CSS

/*基本信息*/
body {font:12px Tahoma;background:#CCCCCC;}/*适用于页面整体:字体及字体大小,页面页边距全部设置为0,文字对齐方式为居中,背景颜色*/
* { margin:0; padding:0; border:0;}/*全局设定,外边距,内边距和表格边框全部为0*/
html,body { height:100%;} /*全局设定高度为100%*/
/*--------------------------------------*/
/*页面主体*/
#pagebody {
width:780px; /*设定宽度*/
margin:0px auto; /*居中*/
}
#mainleft {
width:192px; /*设定宽度*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:5px auto;
height:auto;
}
#mainright {
width:580px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden;
border:0px solid #E00;/*初始使用表格,留存使用*/
margin:5px auto;
}
#mainright2 {
width:578px;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden;
border:0px solid #006699;
margin:2px auto;
height:auto;
}
#mainright3 {
width:285px; /*设定宽度*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:2px auto;
height:auto;
}
#mainright4 {
width:285px; /*设定宽度*/
float:right; /*浮动居左*/
clear:right; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #006699;
margin:2px auto;
height:auto;
}

/*字体设置*/
#biaoti {
font-size:10px;
font-weight:bold;
padding-left:10px;
color:#FFf;
background-color:#006699;
height:20px;
}

页面




无标题文档






左侧显示



右侧一显示


右侧二显示




相关问答
最新问答