12-03-01 这个月的第一天

最新推荐文章于 2024-09-20 16:06:21 发布

lovedushuai521

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量256

点赞数

文章标签：相册 float border xhtml 作业 html

本文链接：https://blog.csdn.net/lovedushuai521/article/details/7310918

版权

现在已经22:35了，我做今天的作业整整做了三个小时，做了一个包含了我好几个新的想法，也在今天明白了，现实和梦想的差距到底有多大，是如此的大，大到我们叹而止径的地步，到现在，我还不懂为什么我做的相册有乱码？认真做一件事的时候时间仿佛流水一般，不知不觉中，从上晚自习做到现在。呵呵，效率还是不行啊。继续练习！！

下面是我的代码，求高手指点，为什么会有乱码？？？？？

<!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>偶的小相册</title>
<style type="text/css">

*{margin:0;padding:0;}

#photo{
position:relative;
width:663px;
height:586px;
margin:0 auto;
background-image:url(images/xingkong.jpg);
}

h1{
position:absolute;
bottom:10px;
right:300px;
width:100px;
height:20px;

font:normal 12px/1.5em "黑体";
color:green;
     }

#left{     float:left;
width:74px;
height:500px;
list-style:none;}
#top {
float:top;

}

li{
float:left;
width:54px;
height:54px;
margin:10px;
display:inline;
overflow:hidden;
}
li a {
display:block;
width:50px;
height:50px;
overflow:hidden;
border:2px solid #cccccc;
}
img{
display:block;
border:0 none;
        width:54px;
height:54px;
   }
li a hover{
border:2px solid #000000;
}
li a:hover img{
width:auto;
height:auto;
position:absolute;
top:175px;
right:200px;
margin:0;
border:2px solid #ffffff
}
</style>
</head>
<body>
<div id="photo">
   <h1>偶的相册</h1>
    <ul id="left">
       <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
       <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
       <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
       <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
       <li><a href="#"><img src="images/5.jpg" alt=""></a></li>

    </ul>
<ul id="top">
       <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
       <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
       <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
       <li><a href="#"><img src="images/9.jpg" alt=""></a></li>
</ul>

</div>
</body>
</html>