求下图的HTML代码，用<div>写。只要各个框框就行，图片用背景色代替。
4个回答
展开全部
其实就是布局,你用div去布置,然后使用css去控制,可以用float,或者position去控制层在哪个地方,自己好好想想啦,其实很简单的,你可以去看看布局,慢慢就熟悉了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML>
<html>
<head>
<title>Nothing</title>
<style type="text/css">
* { text-align: center; margin: 0px; padding: 0px;}
#all { width: 1000px; height: 900px; margin: 0 auto;}
.all_one{ width: 1000px; height: 100px;background-color:red;}
.all_two{ width: 1000px; height: 40px;background-color:blue;}
.all_three{width: 1000px; height: 760px;}
.all_thr_l{width:200px;height:560px;float:left;}
.all_thr_m{width:570px;height:560px;float:left;margin-left:15px;}
.all_thr_r{width:200px;height:560px;float:left;margin-left:15px;}
.thr_l_h{width:200px;height:40px;background:yellow;margin-top:3px;}
.thr_l_c{width:200px;height:200px;background:green;margin-top:3px;}
.thr_m_h{width:570px;height:40px;background:yellow;margin-top:3px;}
.thr_m_c{width:570px;height:200px;background:green;margin-top:3px;}
.thr_l_x{width:570px;height:244px;margin-top:3px;}
.thr_l_x_left{width:275px;height:244px;float:left;margin-right:20px;}
.thr_l_x_right{width:275px;height:244px;float:left;}
.one1{width:275px;height:40px;background:yellow;}
.one2{width:275px;height:157px;background:green;margin-top:3px;}
.one3{width:275px;height:40px;background:blue;margin-top:3px;}
</style>
</head>
<body>
<div id="all">
<div class="all_one"></div>
<div class="all_two"></div>
<div class="all_three">
<div class="all_thr_l">
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
</div>
<div class="all_thr_m">
<div class="thr_l_x">
<div class="thr_l_x_left">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
</div>
<div class="thr_l_x_right">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
</div>
</div>
<div class="thr_m_h"></div>
<div class="thr_m_c"></div>
<div class="thr_m_h"></div>
<div class="thr_m_c"></div>
</div>
<div class="all_thr_r">
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
</div>
</div>
</div>
</body>
</html>
没加边框，你自己加一下，做下微调。谢谢。跟你的布局是一模一样的。
<html>
<head>
<title>Nothing</title>
<style type="text/css">
* { text-align: center; margin: 0px; padding: 0px;}
#all { width: 1000px; height: 900px; margin: 0 auto;}
.all_one{ width: 1000px; height: 100px;background-color:red;}
.all_two{ width: 1000px; height: 40px;background-color:blue;}
.all_three{width: 1000px; height: 760px;}
.all_thr_l{width:200px;height:560px;float:left;}
.all_thr_m{width:570px;height:560px;float:left;margin-left:15px;}
.all_thr_r{width:200px;height:560px;float:left;margin-left:15px;}
.thr_l_h{width:200px;height:40px;background:yellow;margin-top:3px;}
.thr_l_c{width:200px;height:200px;background:green;margin-top:3px;}
.thr_m_h{width:570px;height:40px;background:yellow;margin-top:3px;}
.thr_m_c{width:570px;height:200px;background:green;margin-top:3px;}
.thr_l_x{width:570px;height:244px;margin-top:3px;}
.thr_l_x_left{width:275px;height:244px;float:left;margin-right:20px;}
.thr_l_x_right{width:275px;height:244px;float:left;}
.one1{width:275px;height:40px;background:yellow;}
.one2{width:275px;height:157px;background:green;margin-top:3px;}
.one3{width:275px;height:40px;background:blue;margin-top:3px;}
</style>
</head>
<body>
<div id="all">
<div class="all_one"></div>
<div class="all_two"></div>
<div class="all_three">
<div class="all_thr_l">
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
</div>
<div class="all_thr_m">
<div class="thr_l_x">
<div class="thr_l_x_left">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
</div>
<div class="thr_l_x_right">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
</div>
</div>
<div class="thr_m_h"></div>
<div class="thr_m_c"></div>
<div class="thr_m_h"></div>
<div class="thr_m_c"></div>
</div>
<div class="all_thr_r">
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
<div class="thr_l_h"></div>
<div class="thr_l_c"></div>
</div>
</div>
</div>
</body>
</html>
没加边框，你自己加一下，做下微调。谢谢。跟你的布局是一模一样的。
追问
你为何这么吊！有不懂的能再问下你吗？
追答
可以的，有分就行，哈哈
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css样式就不写了，自己写下，大概就是宽度和浮动这些样式
<div id="head"></div><!--头部-->
<div id="navs"><!--导航部分-->
<div id="nav"><!--导航-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="time"></div><!--时间-->
</div>
<div id="content"><!--主体内容-->
<div id="left"><!--左边-->
<div class="side"><!--部门概况-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--业务管理-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--管理体系-->
<h2></h2>
<div></div>
</div>
</div>
<div id="main"><!--中间区域-->
<div id="main-top">
<div class="pi"><!--员工风采-->
<h3></h3>
<div></div>
<p></p>
</div>
<div class="pi"><!--通知公告-->
<h3></h3>
<div></div>
<p></p>
</div>
</div>
<div class="con"></div><!-中心动态--->
<div class="con"></div><!--学习园地-->
</div>
<div id="right"><!--右边-->
<div class="side"><!--公告-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--党群工作-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--相关连接-->
<h2></h2>
<div></div>
</div>
</div>
</div>
<div id="head"></div><!--头部-->
<div id="navs"><!--导航部分-->
<div id="nav"><!--导航-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="time"></div><!--时间-->
</div>
<div id="content"><!--主体内容-->
<div id="left"><!--左边-->
<div class="side"><!--部门概况-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--业务管理-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--管理体系-->
<h2></h2>
<div></div>
</div>
</div>
<div id="main"><!--中间区域-->
<div id="main-top">
<div class="pi"><!--员工风采-->
<h3></h3>
<div></div>
<p></p>
</div>
<div class="pi"><!--通知公告-->
<h3></h3>
<div></div>
<p></p>
</div>
</div>
<div class="con"></div><!-中心动态--->
<div class="con"></div><!--学习园地-->
</div>
<div id="right"><!--右边-->
<div class="side"><!--公告-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--党群工作-->
<h2></h2>
<div></div>
</div>
<div class="side"><!--相关连接-->
<h2></h2>
<div></div>
</div>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
