因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Task1-3</title>
<link rel="shortcut icon" href="/sjq_ico.png" />
<style type="text/css">
html,body,div{margin:0;padding: 0px; }
#main_page{border: solid 1px #999;background-color: #eee;overflow: auto; zoom:1;position: relative;margin: 20px;padding: 20px 0px 20px 20px;}
#main{width:100%; float:left;}
#main #body{margin:0px 160px 0px 220px; border: solid 1px #999;background-color: #fff;}
#left{width:200px; float:left; margin-left:-100%;background-color: #fff;border: solid 1px #999;}
#right{margin-left:-140px;float:left;width: 120px; border: solid 1px #999;background-color: #fff;}
#body .team_de{ padding: 20px;}
.image3{ padding: 20px 20px 0 20px;}
.image3 img {margin-bottom: 20px;}
.left_image{float: left;margin: 0px 20px 20px 20px;}
.left_text{ float: left;}
.left_1{padding-right: 20px;}
img{display:block;border: solid 1px #999;width: 80px;height: 80px;}
</style>
</head>
<body>
<div id="main_page">
<div id="main">
<div id="body">
<div class="team_de">
<h1>团队简介<h1>
<h2>队名:<em>小明</em></h2>
<p>刚开始只是想随便起一个名字用下,因为起名字真是一个很累的技术活。比如要好听啊,潮啊,能体现个性啊等等,所以就先用队友的小名:小明好了。队员人数达标之后,我一激动,就点击了创建团队......当我发现队名不能更改的时候,我的内心是无比的悲痛的,这名字太俗了吧...
</p>
<h2>队友</h2>
<p>因为我太想参加百度前端技术学院了,但是人数又不够,所以就拉了两个人,嘿嘿...一个是我师弟,一个是我的好友.在此感谢他们的加盟 </p>
<i>we are coming!</i>
</div>
</div>
</div>
<div id="left">
<div class="left_1">
<div class="left_image"><img src="img/lena.png" alt="team logo"/></div>
<div class-"left_text"><p>we are the best! Go! Go! </p></div>
</div>
</div>
<div id="right">
<div class="image3">
<img src="img/parrot.png" alt="team logo"/>
<img src="img/camera.png" alt="team logo"/>
<img src=" " alt="team logo"/>
</div>
</div>
</div>
</body>
</html>