CSS相对与绝对的方法

　2012-03-31 08:52:00　来源：WEB开发网　　　

核心提示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmln

<!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>www.7wy.Net相对与绝对</title>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;list-style-type:none;font-family:arial;font-size:11px;}
body {padding:100px;}

.TableShow {width:480px;position:relative;border:1px solid #eee;padding:34px 10px 10px 10px;}
.TableShow ul {position:absolute;width:100%;height:24px;line-height:24px;left:0px;top:0px;background:#eee;}
.TableShow .title {float:left;margin-left:10px;}
.TableShow .more {float:right;margin-right:10px;}
</style>
<script>
$(document).ready(function() {
$(".TableShow dt").prepend("> ")
});
</script>
<body>
<div class="TableShow">
<ul>
<li class="more">更多</li>
<li class="title">表名称</li>
</ul>
<dl>
<dt>新闻1</dt>
<dt>新闻2</dt>
<dt>web开发网</dt>
<dt>155手机</dt>
<dt>去问(7ey.net)</dt>
</dl>
</div>
</body>
</html>