css利用锚点控制翻页
作者:林小志 来源:林小志blog 发布时间:2008-07-17 13:12:00
标签:锚点,翻页,css
今天呱呱发了一个网址给我看,大概效果就是类似幻灯片的效果。当时我的第一反映这个是不是用锚点做的啊呢,以前在网上看过用锚点做的这类的效果。
脑袋里出现这个反映后,一直有“锚点”这2个字浮动着,不肯从我脑子里出去,我的脑袋本来就不大,怎么装得下呢,反正现在暂时没任务,就自己做一个,让“锚点”从自己的小脑袋中离开。
这个也不说什么大概的思路啊什么的,只是利用锚点跳到页面中的某一个位置而已。如果页面内容太多的话,我估计效果不好,所以这个还是用来娱乐一下算了。
结构:
程序代码
<div class="wrapper">
<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 href="#a1" title="">1</a>
<a href="#a2" title="">2</a>
<a href="#a3" title="">3</a>
<a href="#a4" title="">4</a>
<a href="#a5" title="">5</a>
</div>
</div>
样式:
程序代码
* {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;}
0
投稿
猜你喜欢
- 在dreamweaver4中,你可以存储你自己设定的图片,链接,flash影片,颜色表,模板等等,组成这个站点的资产,这就是Assets面板
- 什么是SQL 指令植入式攻击?在设计或者维护Web网站时,你也许担心它们会受到某些卑鄙用户的恶意攻击。的确,如今的Web网站开发者们针对其站
- 最近心情非常差,而且还没有触底的样子,哎~~~总是会忍不住叹气~~~前些日子在Twitter上叨唠说“不在乎IE8什么时候推出,只在乎IE6
- 这些小东西是我在网上看到的就把它记下来了,可能以后会有用的: &nbs
- 突然想到写这个话题,是基于最近在设计产品界面时,年糕一直在给我们灌输设计的品牌概念以及文化内涵要求而产生的,因之前在界面设计中也遇到一些困惑
- 我查了资料:setRequestHeader,单独指定请求的某个http头语法oXMLHttpRequest.setRequestHeade
- Access method(访问方法):此步骤包括从文件中存储和检索记录。Alias(别名):某属性的另一个名字。在SQL中,可以用别名替换
- 关于建立索引的几个准则:1、合理的建立索引能够加速数据读取效率,不合理的建立索引反而会拖慢数据库的响应速度。2、索引越多,更新数据的速度越慢
- 在许多人看来,HTML应该是WEB制作所有语言中最简单的语言,因为它不需要编译、封闭等,甚至只需要一个记事本就可以让其在浏览器中呈现出来。所
- 如何显示数据库里的图片?asp调用数据库中的图片并显示。怎样把数据库里的图片显示出来?我们以gif格式的图片为例,代码如下:showimag
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> &nbs
- 四、XML应用分类 总的说来的XML的应用可分为四类: (1)应用于客户需要与不同的数据源进行交互时。数据可能来自不同的数据库,他们都有各自
- 给静态网页加密的方法有很多,有的简单有的复杂。前两天看见有人问静态网页加密问题,就写了这个代码思路:加密时:先把用户的密钥A用md5加密为B
- 如何在线创建新表?下面我们以建立一个数码相机库用表为例,看看在ASP程序代码中使用 [CREATE TABLE 相机 (品牌 TEXT(10
- 如何在读取Excel文件时创建列表的下拉菜单?代码如下,用来创建工作表列表的下拉菜单: < select 
- 在讲这个问题之前让我们来先看一段代码: dim sql_injdata,SQL_inj,SQL_Get,SQL_Data,Sql_
- 1.在使用MySQL和php的时候出现过中文乱码问题(1) 只要是gb2312,gbk,utf8等支持多字节编码的字符集都可以储存汉字,当然
- 说明:本函数作用是截取指定英汉混合字符串,并保持显示长度一至。就是将一个汉字当两英文来截取。用途:一般会用在标题显示列表,可以避免截取的字符
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1.如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- 这个功能现在很多网站,论坛都有,本站也有呵呵!如果您还不知道如何实现这个功能,没关系看看本文吧!我将给你介绍怎么给你的网站加上运行代码框的功