DIV+CSS网页布局
汗。忘记说问题了。请问能否以我画的这个图片为原型，做个纯DIV+CSS的网页？我刚学DIV和CSS，如果可以的话，最好是全部都注释一下，我想拿来学习用的。...
汗。忘记说问题了。
请问能否以我画的这个图片为原型，做个纯DIV+CSS的网页？我刚学DIV和CSS，如果可以的话，最好是全部都注释一下，我想拿来学习用的。 展开
请问能否以我画的这个图片为原型，做个纯DIV+CSS的网页？我刚学DIV和CSS，如果可以的话，最好是全部都注释一下，我想拿来学习用的。 展开
5个回答
展开全部
在贴代码出来给你之前，希望你能边看代码边查其用法，而不是一味的问。在这里可以找到你想要知道的所有问题，好好学。www.w3school.com.cn
根据你的布局图，代码如下（未简化）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.nav li {
float:left;
background:#F00;
margin:1px 3px 0 10px;
width:123px;
height:35px;
text-align:center;
}
</style>
</head>
<body>
<div id="mainbody" style="width:960px; height:800px; background:#000; margin:0 auto; padding:0;">
<div class="head" style="width:960px; height:150px; background:#F90; position:absolute;">
<div class="top">
<div class="head_left" style="width:450px; height:105px; background:#FC3; float:left;">
<div class="logo" style="width:100px; height:100px; background:#69F; float:left; margin:3px 2px 0;"></div>
<div class="logoimg" style="width:300px; height:100px; background:#6C6; float:left; margin:3px 2px 0;"></div>
</div>
<div class="head_right" style="width:450px; height:105px; background:#FC9; float:right;"> <span class="head_top_right" style="position:absolute; top:2px; right:5px; width:180px; height:28px; background:#666;"></span> <span class="head_bottom_right" style="position:absolute; top:50px; right:5px; width:250px; height:50px; background:#669;"></span> </div>
</div>
<div class="nav" style=" width:960px; clear:both; background:#CCC;">
<ul>
<li><a href="#">1111111</a></li>
<li><a href="#">2222222</a></li>
<li><a href="#">3333333</a></li>
<li><a href="#">4444444</a></li>
<li><a href="#">5555555</a></li>
<li><a href="#">6666666</a></li>
<li><a href="#">7777777</a></li>
</ul>
</div>
</div>
<div class="maincontent" style="background:#6F6; width:960px;">
<div class="banner" style="width:960px; height:300px; background:#CF0;"></div>
<div class="content01" style="background:#999; width:960px; height:380px;">
<div class="content01_left" style="width:300px; height:360px; background:#CFC; float:left;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content01_center" style="width:300px; height:360px; background:#CCC; float:left; margin-left:20px;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content01_right" style="width:300px; height:360px; background:#CC9; float:right;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
</div>
<div class="content02" style="width:960px; height:250px; background:#CF0;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content03" style="background:#999; width:960px; height:380px;">
<div class="content03_left" style="width:300px; height:360px; background:#CFC; float:left;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content03_center" style="width:300px; height:360px; background:#CCC; float:left; margin-left:20px;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content03_right" style="width:300px; height:360px; background:#CC9; float:right;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
</div>
</div>
<div class="footer" style="height:100px; background:#00F; width:960px;"></div>
</div>
</body>
</html>
其中，样式我全部写在了标签里面，你可以都提出来，放在<style type="text/css"></style>里面
也可以另外建一个CSS文件，把样式放进去。看你个人习惯了。
根据你的布局图，代码如下（未简化）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.nav li {
float:left;
background:#F00;
margin:1px 3px 0 10px;
width:123px;
height:35px;
text-align:center;
}
</style>
</head>
<body>
<div id="mainbody" style="width:960px; height:800px; background:#000; margin:0 auto; padding:0;">
<div class="head" style="width:960px; height:150px; background:#F90; position:absolute;">
<div class="top">
<div class="head_left" style="width:450px; height:105px; background:#FC3; float:left;">
<div class="logo" style="width:100px; height:100px; background:#69F; float:left; margin:3px 2px 0;"></div>
<div class="logoimg" style="width:300px; height:100px; background:#6C6; float:left; margin:3px 2px 0;"></div>
</div>
<div class="head_right" style="width:450px; height:105px; background:#FC9; float:right;"> <span class="head_top_right" style="position:absolute; top:2px; right:5px; width:180px; height:28px; background:#666;"></span> <span class="head_bottom_right" style="position:absolute; top:50px; right:5px; width:250px; height:50px; background:#669;"></span> </div>
</div>
<div class="nav" style=" width:960px; clear:both; background:#CCC;">
<ul>
<li><a href="#">1111111</a></li>
<li><a href="#">2222222</a></li>
<li><a href="#">3333333</a></li>
<li><a href="#">4444444</a></li>
<li><a href="#">5555555</a></li>
<li><a href="#">6666666</a></li>
<li><a href="#">7777777</a></li>
</ul>
</div>
</div>
<div class="maincontent" style="background:#6F6; width:960px;">
<div class="banner" style="width:960px; height:300px; background:#CF0;"></div>
<div class="content01" style="background:#999; width:960px; height:380px;">
<div class="content01_left" style="width:300px; height:360px; background:#CFC; float:left;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content01_center" style="width:300px; height:360px; background:#CCC; float:left; margin-left:20px;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content01_right" style="width:300px; height:360px; background:#CC9; float:right;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
</div>
<div class="content02" style="width:960px; height:250px; background:#CF0;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content03" style="background:#999; width:960px; height:380px;">
<div class="content03_left" style="width:300px; height:360px; background:#CFC; float:left;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content03_center" style="width:300px; height:360px; background:#CCC; float:left; margin-left:20px;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
<div class="content03_right" style="width:300px; height:360px; background:#CC9; float:right;">
<h2 style="background:#F00; text-align:center;">11111</h2>
</div>
</div>
</div>
<div class="footer" style="height:100px; background:#00F; width:960px;"></div>
</div>
</body>
</html>
其中，样式我全部写在了标签里面，你可以都提出来，放在<style type="text/css"></style>里面
也可以另外建一个CSS文件，把样式放进去。看你个人习惯了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
留下邮箱，或者密我，我把布局页传给你。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
现在的网站一般都是采用DIV+CSS进行布局的，建议你先看看它们的源码，包括网站的CSS文件！ 然后有不清楚的再来请教！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你想问div+css什么问题啊？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
593043530
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
