<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="201709040212.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->
</head>
<body>
<div class="father">
<div class="head">
</div>
<div class="banner">
<a href=""> 首页 </a>
<a href="">日志 </a>
<a href="">相册 </a>
<a href="">留言板 </a>
<a href="">关于我 </a>
</div>
<div class="left"><br/>
<span>>>关于我<br/></span>
<img src="109395CF4-7.jpg" height="220" width="240" align="middle"/><br/>
<img src="girl.gif" align="middle"/>
<span>张梅</span>
<span>重庆市 南岸区</span>
<font color="#FF0000">天微明,冬天的光透过窗,印在左手的无名指上。 回忆的颜色是透明的冷,于是,用窗口透入的薄薄的光暖一暖心。</font>
</div>
<div class="right"><br/>
<table width="450" border="1" height="220">
<tr class="right1">
<td>>>日志</td>
</tr>
<tr>
<td>IMAX加长版《变形金刚》(Transformers)亲历简报 2007-09-25 </td>
</tr> <tr> <td>变形金刚》发烧友的看图说话(多图) 2007-09-22</td> </tr>
<tr> <td>《反恐王国》(The Kingdom):生猛的空心弹 2007-09-22</td> </tr>
<tr> <td>《东方承诺》(Eastern Primises):不动如山,暗流汹涌 2007-09-20</td> </tr>
<tr> <td>《妖精的旋律》(Elfen Lied):日式YY的经典案例 2007-09-20</td> </tr>
<tr> <td> </td> </tr>
</table><br/>
<div class="right1">>>相册</div>
<div class="minfather">
<div class="m-left">
<img src="1.jpg" width="150" height="200"/>
</div>
<div class="m-mid">
<img src="2.jpg" width="150" height="200"/>
</div>
<div class="m-right">
<img src="3.jpg" width="150" height="200"/>
</div>
</div>
<div class="footer">
临大17级
</div>
</div>
</body> </html>
css:
@charset "utf-8";
/* CSS Document */ *{/通配符选择器/
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
.father {
width: 800px;
height: 600px;
position: absolute;
left: 250px;
top: 20px;
margin:auto;
}
.head {
width: 800px;
height: 100px;
background-image:url(banner.gif);
text-align:center;
}
.banner {
width: 800px;
height: 10px;
background-color:#FC6;
top: 100px;
height: 2em;
line-height: 2em;
overflow: hidden;
}
.left {
height: 440px;
width:350px;
float: left;
}
.right{
width: 450px;
height:440px;
float: left;
}
.right1 {
background-color:#FCEAA8;
}
.minfather{
width:450px;
height:220px;;
}
.m-left{
float:left;
}
.m-mid{
float:left
}
.m-right{
float:left;
}
.footer{
width:800px;
height:30px;
background-color:#FC3;
clear:none;
}