初学者请各位朋友给写个这样的div+css的代码多谢！
刚开始接触div+css，对网页的布局规划没有什么头绪，却又急需使用。请各位朋友帮忙给写一个类似下面布局的div+css的源代码，感激不尽！...
刚开始接触div+css，对网页的布局规划没有什么头绪，却又急需使用。请各位朋友帮忙给写一个类似下面布局的div+css的源代码，感激不尽！
展开
5个回答
展开全部
<body>
<div class="header" style="width:1002px; height:200px; margin:0 auot; border:1px soid #ccc; margin-bottom:20px;">头部</div>
<div class="main" style="width:1002px; height:500px; margin:0 auot; ">
<div class="main-left" style="float:left; width:200px; height:500px; border:1px soid #ccc;">主体左侧</div>
<div class="main-right" style="float:right; width:798px; height:500px; border:1px soid #ccc;>主体右侧</div>
</div>
<div class="footer" style="width:1002px; height:200px; margin:0 auot; border:1px soid #ccc;">底部</div>
</body>
直接复制上面代码到DW中就可以了，有懂的话再问我，百度HI
<div class="header" style="width:1002px; height:200px; margin:0 auot; border:1px soid #ccc; margin-bottom:20px;">头部</div>
<div class="main" style="width:1002px; height:500px; margin:0 auot; ">
<div class="main-left" style="float:left; width:200px; height:500px; border:1px soid #ccc;">主体左侧</div>
<div class="main-right" style="float:right; width:798px; height:500px; border:1px soid #ccc;>主体右侧</div>
</div>
<div class="footer" style="width:1002px; height:200px; margin:0 auot; border:1px soid #ccc;">底部</div>
</body>
直接复制上面代码到DW中就可以了，有懂的话再问我，百度HI
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
html 部分代码
<html>
<head>
<title>
</title>
<link type="text/css" rel="stylesheet" href="basic-2.1.css">
</head>
<body>
<div class="container">
<div id="header">
</div>
<div id="content">
<div class="pleft">
</div>
<div class="pright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
/*-----------.css---------*/部分
body{
margin:0;
padding:0;
text-align:center;
}
.container{
width:900px;
height:700px;
border: 1px green solid;
text-align;left;
}
#header{
width:100%;
height:100px;
margin:0;
margin-bottom:3px;
padding:0px;
border-bottom:1px green solid;
}
#content{
width:100%;
height:500px;
margin:0px;
padding:0px;
border-top:1px green solid;
border-bottom:1px green solid;
}
.pleft{
width:150px;
margin:0;
padding:0px;
height:500px;
border-right:1px green solid;
float:left;
}
#footer{
clear:both;
width:100%;
height:100px;
margin:0;
margin-top:3px;
padding:0;
border-top:1px green solid;
}
<html>
<head>
<title>
</title>
<link type="text/css" rel="stylesheet" href="basic-2.1.css">
</head>
<body>
<div class="container">
<div id="header">
</div>
<div id="content">
<div class="pleft">
</div>
<div class="pright">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
/*-----------.css---------*/部分
body{
margin:0;
padding:0;
text-align:center;
}
.container{
width:900px;
height:700px;
border: 1px green solid;
text-align;left;
}
#header{
width:100%;
height:100px;
margin:0;
margin-bottom:3px;
padding:0px;
border-bottom:1px green solid;
}
#content{
width:100%;
height:500px;
margin:0px;
padding:0px;
border-top:1px green solid;
border-bottom:1px green solid;
}
.pleft{
width:150px;
margin:0;
padding:0px;
height:500px;
border-right:1px green solid;
float:left;
}
#footer{
clear:both;
width:100%;
height:100px;
margin:0;
margin-top:3px;
padding:0;
border-top:1px green solid;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.header{ height:100px;}
.nav{ height:40px;}
.footer{ height:80px;}
.center{ width:960px; margin:0px auto}
.left{ float:left; width:200px;}
.right{ margin-left: 200px; width:760px;}
.clear{ clear:both}
</style>
<div class="header center"></div>
<div class="nav center"></div>
<div class="content center">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer center"></div>
.header{ height:100px;}
.nav{ height:40px;}
.footer{ height:80px;}
.center{ width:960px; margin:0px auto}
.left{ float:left; width:200px;}
.right{ margin-left: 200px; width:760px;}
.clear{ clear:both}
</style>
<div class="header center"></div>
<div class="nav center"></div>
<div class="content center">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer center"></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Dreamwaver上有模板的 何必那么麻烦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.header{ height:100px;}
.nav{ height:40px;}
.footer{ height:80px;}
.center{ width:960px; margin:0px auto}
.left{ float:left; width:200px;}
.right{ float:right; width:760px;}
.clear{ clear:both}
</style>
<div class="header center"></div>
<div class="nav center"></div>
<div class="content center">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer center"></div>
.header{ height:100px;}
.nav{ height:40px;}
.footer{ height:80px;}
.center{ width:960px; margin:0px auto}
.left{ float:left; width:200px;}
.right{ float:right; width:760px;}
.clear{ clear:both}
</style>
<div class="header center"></div>
<div class="nav center"></div>
<div class="content center">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="footer center"></div>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
