<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div:absolute</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 12px;
color: #666666;
text-align: center;
}
a:link
{
color: #999999;
text-decoration: none;
}
a:visited
{
text-decoration: none;
color: #999999;
}
a:hover
{
text-decoration: none;
color: #999999;
}
a:active
{
text-decoration: none;
color: #999999;
}
</style>
</head>
<body>
<div style="width: 600px; height: 500px; margin: 10px auto; text-align: left; border: #CCCCCC dashed 1px;
position: relative;">
<div style="width: 200px; height: 200px; border: #CCCCCC dashed 1px; position: absolute;
top: 10px; left: 10px;">
<div style="height: 25px; background-color: #EEEEEE;">
<p style="position: absolute; top: 6px; left: 10px;">
标题一
</p>
<p style="position: absolute; top: 10px; right: 10px;">
<a href="#">more</a>
</p>
</div>
<ul style="list-style: none; line-height: 26px; position: absolute; top: 35px; left: 10px;">
<li><a href="#">1.我是文章的题目我是文章的题目</a></li>
<li><a href="#">2.我是文章的题目我是文章的题目</a></li>
<li><a href="#">3.我是文章的题目我是文章的题目</a></li>
<li><a href="#">4.我是文章的题目我是文章的题目</a></li>
<li><a href="#">5.我是文章的题目我是文章的题目</a></li>
<li><a href="#">6.我是文章的题目我是文章的题目</a></li>
</ul>
</div>
<div style="width: 200px; height: 50px; border: #CCCCCC dashed 1px; position: absolute;
top: 10px; left: 220px;">
</div>
<div style="width: 200px; height: 250px; border: #CCCCCC dashed 1px; position: absolute;
top: 70px; left: 220px;">
</div>
<div style="width: 150px; height: 200px; border: #CCCCCC dashed 1px; position: absolute;
top: 10px; left: 437px;">
</div>
<div style="width: 200px; height: 269px; border: #CCCCCC dashed 1px; position: absolute;
top: 222px; left: 10px;">
</div>
<div style="width: 367px; height: 50px; border: #CCCCCC dashed 1px; position: absolute;
top: 333px; left: 221px;">
</div>
<div style="width: 150px; height: 96px; border: #CCCCCC dashed 1px; position: absolute;
top: 224px; left: 437px;">
</div>
<div style="width: 136px; height: 98px; border: #CCCCCC dashed 1px; position: absolute;
top: 394px; left: 221px;">
</div>
<div style="width: 136px; height: 98px; border: #CCCCCC dashed 1px; position: absolute;
top: 393px; left: 369px;">
</div>
<div style="width: 73px; height: 98px; border: #CCCCCC dashed 1px; position: absolute;
top: 392px; left: 515px;">
</div>
</div>
</body>
</html>
扫一扫
806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
