html代码如下：
<!DOCTYPE html> <html> <head> <title>照片墙</title> <meta charset="utf-8"/> <style type="text/css"> body{ background-color:#300; } ul{/*ul宽、高、居中*/ width:780px; margin:10px auto; /*border:1px solid #FFF;*/ /*去掉列表前面的符号*/ list-style-type:none; } li{ background-color:#FFF; border:1px solid #DDD; width:218px; padding:10px; margin:10px; float:left; } li p{ text-align:center; } li:hover{ /*相对定位*/ position:relative; top:-2px; left:-2px; } </style> </head> <body> <!-- 照片墙上的照片列表 --> <ul> <li> <img src="../images/01.jpg"/> <p>用我三生烟火，换你一世迷离</p> </li> <li> <img src="../images/02.jpg" /> <p>凤凰双双对，飞去飞来烟雨秋</p> </li> <li> <img src="../images/03.jpg" /> <p>而如今，凤去了，凰空留</p> </li> <li> <img src="../images/04.jpg" /> <p>长街长，烟花繁，你挑灯回看</p> </li> <li> <img src="../images/05.jpg" /> <p>寄君一曲，不问曲终人聚散</p> </li> <li> <img src="../images/06.jpg" /> <p>生能尽欢，死亦无憾</p> </li> </ul> </body> </html