html电子相册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电子相册</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
body{
background-color: #444;
font-size: 12px;
text-align: center;
}
.main{
width: 420px;
height: 288px;
text-align: left;
margin-top: 20px;
background-color: #666;
border: 2px solid #ccc;
padding-bottom: 35px;
}
.main .tit{
width: 420px;
height: 48px;
text-align: center;
line-height: 48px;
color: #fff;
font-weight: bold;
font-size: 12px;
}
.main .pic .zd{
width: 320px;
height: 240px;
padding-left: 20px;
float: left;
/* 隐藏多余图片 */
overflow: hidden;
}
.main .pic .zd img{
width: 320px;
height: 240px;
}
.main .pic .yx{
float: left;
width: 80px;
height: 240px;
overflow: auto;
}
</style>
</head>
<body>
<div class="main">
<div class="tit">
电子相册
</div>
<div class="pic">
<div class="zd">
<ul>
<li><img src="img03/mn1.jpg" id="a1"></li>
<li><img src="img03/mn2.jpg" id="a2"></li>
<li><img src="img03/mn3.jpg" id="a3"></li>
<li><img src="img03/mn4.jpg" id="a4"></li>
<li><img src="img03/mn5.jpg" id="a5"></li>
<li><img src="img03/mn6.jpg" id="a6"></li>
<li><img src="img03/mn7.jpg" id="a7"></li>
<li><img src="img03/mn8.jpg" id="a8"></li>
</ul>
</div>
<div class="yx">
<ul>
<li><a href="#a1"><img src="./img03/c1.jpg" ></a></li>
<li><a href="#a2"><img src="./img03/c2.jpg" ></a></li>
<li><a href="#a3"><img src="./img03/c3.jpg" ></a></li>
<li><a href="#a4"><img src="./img03/c4.jpg" ></a></li>
<li><a href="#a5"><img src="./img03/c5.jpg" ></a></li>
<li><a href="#a6"><img src="./img03/c6.jpg" ></a></li>
<li><a href="#a7"><img src="./img03/c7.jpg" ></a></li>
<li><a href="#a8"><img src="./img03/c8.jpg" ></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634941.html