<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
a{text-decoration: none;}
.wrap{width: 300px;height: 300px;padding: 10px;border: 2px solid black;margin: 50px auto;position: relative;}
.wrap a{width: 100px;background: #00bcff;height: 100px;line-height: 100px;text-align: center;font-weight: bold;color: black;position: absolute;}
.wrap a.link1{top: 10;left: 10;}
.wrap a.link2{right: 10px;top: 10px;}
.wrap a.link3{background: #fff660;left: 110px;top: 110px;}
.wrap a.link4{left: 10px;bottom: 10px;}
.wrap a.link5{right: 10px;bottom: 10px;}
</style>
</head>
<body>
<div class="wrap">
<a href="#" class="link1">link1</a>
<a href="#" class="link2">link2</a>
<a href="#" class="link3">link3</a>
<a href="#" class="link4">link4</a>
<a href="#" class="link5">link5</a>
</div>
</body>
</html>
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
a{text-decoration: none;}
.wrap{width: 300px;height: 300px;padding: 10px; border: 2px solid black;margin: 50px auto;position: relative;}
.wrap a{width: 100px;background: #00bcff;height: 100px;line-height: 100px;text-align: center;font-weight: bold;color: black;position: absolute;}
.wrap a.link1{top: 10px;left: 10px;z-index: 5;}
.wrap a.link2{top: 60px;left: 60px;z-index: 4;}
.wrap a.link3{background: #fff660;top: 110px;left: 110px;z-index: 3;}
.wrap a.link4{right: 60px;bottom: 60px;z-index: 2;}
.wrap a.link5{right: 10px;bottom: 10px;z-index: 1;}
</style>
</head>
<body>
<div class="wrap">
<a href="#" class="link1">link1</a>
<a href="#" class="link2">link2</a>
<a href="#" class="link3">link3</a>
<a href="#" class="link4">link4</a>
<a href="#" class="link5">link5</a>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
