css练习: 利用锚点做选取相册效果

来源：互联网发布：虚拟机ubuntu怎么联网编辑：程序博客网时间：2024/05/22 10:15

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="divImg">
<ul>
<li><a name="p1"><img src="images/num-bw.jpg" alt="num-bw.jpg"/></a></li>
<li><a name="p2"><img src="images/gif.gif" alt="gif.gif"/></a></li>
<li><a name="p3"><img src="images/num.jpg" alt="num.jpg"/></a></li>
</ul>
<p>
<a href="#p1"><img src="images/1.jpg" alt="p1"/></a>
<a href="#p2"><img src="images/2.jpg" alt="p2"/></a>
<a href="#p3"><img src="images/3.jpg" alt="p3"/></a>
</p>
</div>
</body>

</html>

=================

CSS

=================

* {
padding: 0;
margin: 0;
}

div {
margin-top: 60px;
}

ul {
width: 480px;
height: 360px;
background: #333;
margin: 0 auto;
list-style-type: none;
overflow: hidden;
}

ul li {
background: #333;
width: 480px;
height: 360px;
}

ul li img {
padding: 50px;
width: 380px;
height: 260px;
}

#divImg p {
padding-top: 20px;
text-align: center;
}

#divImg p img {
border: 1px solid #333;
width: 100px;
height: 100px;
}

0 0