带来一篇制造网页旧事框:CSS绝对与相对的办法

显示全部楼层 · 发表于 2015-1-15 23:11:04

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你可以轻松地控制页面的布局。
破洛洛文章简介：CSS利用绝对与相对制造经常使用旧事框，JQuery附加题目前标点。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>绝对与相对</title>
</head>
<scripttype="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:1pxsolid#eee;padding:34px10px10px10px;}
.TableShowul{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(){
$(".TableShowdt").prepend(">")
});
</script>
<body>
<divclass="TableShow">
<ul>
<liclass="more">More</li>
<liclass="title">Title</li>
</ul>
<dl>
<dt>Title:NewsCenterList</dt>
<dt>Title:NewsCenterList</dt>
<dt>Title:NewsCenterList</dt>
<dt>Title:NewsCenterList</dt>
<dt>Title:NewsCenterList</dt>
</dl>
</div>
</body>
</html>
</p>
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 带来一篇制造网页旧事框:CSS绝对与相对的办法

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子