<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {margin: 0; padding:0;}
#menu {
position: relative;
height: 454px;
width: 730px;
background: #ccc;
text-align: center;
margin: 6px auto;
}
#menu dt {
position: absolute;
/*字体的位置*/
right: 10px;
bottom: 10px;
}
#menu dt a {
float: left;
/*将a标签定义为块级元素.可以显示个框框*/
display: block;
padding: 1px 4px;
border:1px solid #ccc;
margin-left: 2px;
text-decoration: none;
color:#309;
background:#999;
font-size:12px;
}
#menu dt a:hover {
background:#fff;
color:#FF0000;
}
#menu dd {
width: 730px;
height:454px;
/*隐藏溢出*/
overflow: hidden;
}
</style>
</head>
<body>
<dl id="menu">
<dt>
<a href="#img1">1</a>
<a href="#img2">2</a>
<a href="#img3">3</a>
<a href="#img4">4</a>
</dt>
<dd>
<img src="images/1.jpg" id="img1">
<img src="images/2.jpg" id="img2">
<img src="images/3.jpg" id="img3">
<img src="images/4.jpg" id="img4">
</dd>
</dl>
</body>
</html>
相关文章：