<!-- prj_3_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易灯箱画廊设计 </title>
<style type="text/css">
body {
text-align: center;
}
.div1 {
width: 900px;
height: 500px;
margin: 0px auto;
text-align: center;
background: #33cc99;
}
h3 {
font-size: 24px;
color: white;
padding: 10px auto;
}
ul {
margin: 0 auto;
width: 800px;
list-style-type: none;
height: 120px;
}
li {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
img {
border: 0;
width: 100px;
height: 80px;
}
a {
color: #ffffff;
text-decoration: none;
}
a:link,
a:visited,
a:active {
color: #0033cc;
}
a:hover {
border-bottom: 4px solid #FF0000;
}
</style>
</head>
<body>
<!--插入背景音乐-->
<embed src="trees/Sleep Away.mp3" autostart="true" loop="true" width="0" height="0"></embed>
<div class="div1">
<h3>简易灯箱画廊设计</h3>
<hr color="red" size="3">
<ul>
<!--图像作为列表项,且对每个列表项建立超级链接,链接到目标文件为图像,显示在底部iframe页内框架内-->
<li><a href="trees/t1.jpg" target="iframe">T1<img src="trees/t1.jpg"></a></li>
<li><a href="trees/t2.jpg" target="iframe">T2<img src="trees/t2.jpg"></a></li>
<li><a href="trees/t3.jpg" target="iframe">T3<img src="trees/t3.jpg"></a></li>
<li><a href="trees/t4.jpg" target="iframe">T4<img src="trees/t4.jpg"></a></li>
<li><a href="trees/t5.jpg" target="iframe">T5<img src="trees/t5.jpg"></a></li>
</ul>
<iframe src="trees/t1.jpg" name="iframe" width="500px" height="300px" frameborder="0" <br />
</iframe>
</div>
</body>
</html>在这里插入代码片
效果图,点上面的小图会在大的框体中显示