div css布局模板
11.请用HTML+CSS＋Div书写组成如下图形FirstSecondThirdFourthFifth...
11. 请用HTML+CSS＋Div书写组成如下图形
First
Second Third
Fourth Fifth 展开
First
Second Third
Fourth Fifth 展开
5个回答
展开全部
不知道你说的是不是这个意思！我写了一下，你看看
<html>
<style type="text/css">
#header{width:500px;background-color:#eeeeee;}
#content{width:500px;}
#11{width:250px;height:100px;float:left;background-color:#ff0000;}
#22{width:250px;height:100px;float:left;background-color:#00ff00;}
#33{width:250px;height:100px;float:left;background-color:#0000ff;}
#44{width:250px;height:100px;float:left;background-color:#fff000;}
</style>
<body>
<div id="header">
</div>
<div id="content">
<div id="11" class="">
</div>
<div id="22" class="">
</div>
<div id="33" class="">
</div>
<div id="44" class="">
</div>
</div>
</body>
</html>
<html>
<style type="text/css">
#header{width:500px;background-color:#eeeeee;}
#content{width:500px;}
#11{width:250px;height:100px;float:left;background-color:#ff0000;}
#22{width:250px;height:100px;float:left;background-color:#00ff00;}
#33{width:250px;height:100px;float:left;background-color:#0000ff;}
#44{width:250px;height:100px;float:left;background-color:#fff000;}
</style>
<body>
<div id="header">
</div>
<div id="content">
<div id="11" class="">
</div>
<div id="22" class="">
</div>
<div id="33" class="">
</div>
<div id="44" class="">
</div>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body {width:100%}
#content{width:980px; margin:0 auto}
#first{width:480px;height:200px;margin:0 auto;background-color:#000000;}
#second{width:480px;height:200px;margin:5px 5px; float:left;background-color:#ff0000;}
#third{width:480px;height:200px;margin:5px 5px; float:left;background-color:#00ff00;}
#forth{width:480px;height:200px;margin:5px 5px; float:left;background-color:#0000ff;}
#fifth{width:480px;height:200px;margin:5px 5px; float:left;background-color:#ffff00;}
.clear{clear:both}
</style>
</head>
<body>
<div id="content">
<div id="first"></div>
<div class="clear"></div>
<div id="second"></div>
<div id="third"></div>
<div class="clear"></div>
<div id="forth"></div>
<div id="fifth"></div>
<div class="clear"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body {width:100%}
#content{width:980px; margin:0 auto}
#first{width:480px;height:200px;margin:0 auto;background-color:#000000;}
#second{width:480px;height:200px;margin:5px 5px; float:left;background-color:#ff0000;}
#third{width:480px;height:200px;margin:5px 5px; float:left;background-color:#00ff00;}
#forth{width:480px;height:200px;margin:5px 5px; float:left;background-color:#0000ff;}
#fifth{width:480px;height:200px;margin:5px 5px; float:left;background-color:#ffff00;}
.clear{clear:both}
</style>
</head>
<body>
<div id="content">
<div id="first"></div>
<div class="clear"></div>
<div id="second"></div>
<div id="third"></div>
<div class="clear"></div>
<div id="forth"></div>
<div id="fifth"></div>
<div class="clear"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上的少了一点点
应该是这样的
<html>
<style type="text/css">
#header{width:500px;background-color:#eeeeee;}
#content{width:500px;}
#00{width:500px;height:100px;float:left;background-color:#00ffff;}
#11{width:250px;height:100px;float:left;background-color:#ff0000;}
#22{width:250px;height:100px;float:left;background-color:#00ff00;}
#33{width:250px;height:100px;float:left;background-color:#0000ff;}
#44{width:250px;height:100px;float:left;background-color:#fff000;}
</style>
<body>
<div id="header">
</div>
<div id="content">
<div id="00" class=""></div>
<div id="11" class="">
</div>
<div id="22" class="">
</div>
<div id="33" class="">
</div>
<div id="44" class="">
</div>
</div>
</body>
</html>
应该是这样的
<html>
<style type="text/css">
#header{width:500px;background-color:#eeeeee;}
#content{width:500px;}
#00{width:500px;height:100px;float:left;background-color:#00ffff;}
#11{width:250px;height:100px;float:left;background-color:#ff0000;}
#22{width:250px;height:100px;float:left;background-color:#00ff00;}
#33{width:250px;height:100px;float:left;background-color:#0000ff;}
#44{width:250px;height:100px;float:left;background-color:#fff000;}
</style>
<body>
<div id="header">
</div>
<div id="content">
<div id="00" class=""></div>
<div id="11" class="">
</div>
<div id="22" class="">
</div>
<div id="33" class="">
</div>
<div id="44" class="">
</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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>div css布局模板</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
margin: 0px;
padding: 0px;
line-height: 150%;
}
.Second,.Third,.Fourth,.Fifth {
float:left;
width:70px;
padding-left:10px;
}
.First {
text-align: center;
width: 150px;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<div class="First">First</div>
<div class="Second">Second</div>
<div class="Third">Third</div>
<div class="clear"></div>
<div class="Fourth">Fourth</div>
<div class="Fifth">Fifth</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div css布局模板</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
margin: 0px;
padding: 0px;
line-height: 150%;
}
.Second,.Third,.Fourth,.Fifth {
float:left;
width:70px;
padding-left:10px;
}
.First {
text-align: center;
width: 150px;
}
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<div class="First">First</div>
<div class="Second">Second</div>
<div class="Third">Third</div>
<div class="clear"></div>
<div class="Fourth">Fourth</div>
<div class="Fifth">Fifth</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<body>
<pre>
First
Second
Third
Fourth
Fifth
</pre>
</body>
</html>
<body>
<pre>
First
Second
Third
Fourth
Fifth
</pre>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
