因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里。
<!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>