保存到桌面加入收藏设为首页
CSS
当前位置:首页 > Web技术 > CSS

如何利用纯CSS代码实现翻页

时间:2013-08-07 08:52:14   作者:梦幻小纯哥   来源:永硕E盘装饰网   阅读:896   评论:0
内容摘要:  如何利用纯CSS代码实现翻页?怎么样不用脚本实现页面的翻页呢,下面介绍用CSS来实现,代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR...

  如何利用纯CSS代码实现翻页?怎么样不用脚本实现页面的翻页呢,下面介绍用CSS来实现,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">

<head profile="http://www.w3.org/2000/08/w3c-synd/#">

<meta http-equiv="content-language" content="zh-cn" />

<meta http-equiv="content-type" content="text/html;charset=gb2312" />

 

<style>

 

dl {

 position:absolute;

 width:389px;

 height:154px;

 border:10px solid #eee;

 }

dd {

 margin:0;

 width:389px;

 height:154px;

 overflow:hidden;

 }

img {

 border:1px solid black

 }

dt {

 position:absolute;

 right:3px;

 top:50px;

 }

a {

 display:block;

 margin:1px;

 width:20px;

 height:20px;

 text-align:center;

 font:700 12px/20px "宋体",sans-serif;

 color:#fff;

 text-decoration:none;

 background:#666;

 border:1px solid #fff;

 filter:alpha(opacity=40);

 opacity:.4;

 }

a:hover {

 background:#000

 }

</style>

</head>

<body>

<dl>

<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>

<dd>

<img src="/uploadfile/200806/17/86181645617.jpg" alt="" title="" id="a" />

<img src="/uploadfile/200806/17/61181646102.jpg" alt="" title="" id="b" />

<img src="/uploadfile/200806/17/D9181646550.jpg" alt="" title="" id="c" />

</dd>

</dl>

</body>

</html>


标签:如何  利用  代码  实现  翻页  
相关评论