利用锚点控制翻页

页面代码:

 <style type="text/css">* {	margin:0;	padding:0;}body {	font:normal 12px/1.5em Verdana, Lucida, Arial, Helvetica, "宋体", sans-serif;	background:#FCFCFC;}.wrapper {	width:200px;	height:200px;	position:absolute;	top:50%;	left:50%;	margin:-100px 0 0 -100px;	border:1px solid #333333;	background:#CCCCCC;}.content {	width:180px;	height:160px;	margin:10px auto 0;	overflow:hidden;	border:1px solid #999999;	background:#FFFFFF;}.box {	float:left;	width:160px;	height:150px;	margin-bottom:10px;	padding:10px;	overflow:auto;}.pager {	width:180px;	height:20px;	margin:5px auto;	text-align:right;}.pager a {	padding:2px 4px;	text-decoration:none;	background:#FF0000;	color:#FFFFFF;}.pager a:hover {	background:#FFFFFF;	outline:#FF0000 1px solid;	color:#000000;}</style><div class="content"><div class="box" id="a1"><h2>锚点控制内容</h2><p>第一屏</p><p>网上有很多这样的教程,我这个只是娱乐而已</p></div><div class="box" id="a2"><h2>锚点控制内容</h2><p>第二屏</p></div><div class="box" id="a3"><h2>锚点控制内容</h2><p>第三屏</p></div><div class="box" id="a4"><h2>锚点控制内容</h2><p>第四屏</p></div><div class="box" id="a5"><h2>锚点控制内容</h2><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p></div></div><div class="pager"><a title="" href="#a1">1</a> <a title="" href="#a2">2</a> <a title="" href="#a3">3</a> <a title="" href="#a4">4</a> <a title="" href="#a5">5</a></div><div></div>



评论: 1 | 引用: 0 | 浏览: | Tags: 网页技术  web标准  
  • quote 1.adding
  • 晕倒,这个blog的自动运行代码功能真弱又麻烦,哎!搞得乱七八糟的,还好可以运行就是了!
  • 2008-5-22 22:14:11 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

最近发表

最近留言

最新评论及回复

文章归档

站内搜索

站点统计

  • 文章总数:160
  • 评论总数:178
  • 引用总数:1
  • 浏览总数:19991

友情链接


Copyright(C) www.51add.com. QQ:83041201 All Rights Reserved.    Powered By Z-Blog 1.8    Skin by Adding