纯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:240px;
 height:170px;
 border:10px solid #eee;
 }
dd {
 margin:0;
 width:240px;
 height:170px;
 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="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" />
<img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" />
<img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" />
</dd>
</dl>
<p></body>
</html>

时间: 2024-08-24 22:01:59

纯CSS代码实现翻页焦点图效果的相关文章

代码实例:纯CSS代码实现翻页

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" l

纯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 profil

代码实例之纯CSS代码实现翻页效果_经验交流

123

文字过长用省略号代替纯css代码

 文字过长用省略号代替纯css代码 代码如下: <table width="550" border="0" cellpadding="5" cellspacing="1" bgcolor="#007373" style="table-layout:fixed"> <tr> <th nowrap bgcolor="#159AA2" styl

jQuery实现的自适应焦点图效果完整实例_jquery

本文实例讲述了jQuery实现的自适应焦点图效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,

翻书-上传一个word,怎么把它用翻页电子书的效果展现给用户?

问题描述 上传一个word,怎么把它用翻页电子书的效果展现给用户? 上传一个word,怎么把它用翻页电子书的效果展现给用户? 是要翻书的效果,类似这里的 效果演示 解决方案 应该是调用了flash打开word 然后在里面做的效果 可以试试用一些离线网站软件把整页内容下载下来看看不能得到swf的文件 好吧 我看到了http://www.sclc.org.cn/flash/book.swf 就类似这样的模式就可以实现 不过swf得自己去找个方便调用的了

jQuery实现的左右移动焦点图效果_jquery

本文实例讲述了jQuery实现的左右移动焦点图效果.分享给大家供大家参考,具体如下: jquery 部分: $(function () { var _speed = 1000; var _len = 0; var _size = 150; var _direction = 'left'; function mar(){ if(_direction == 'left'){ if(_len >= 450){ _direction = 'right'; }else{ $(".flow ul&qu

用纯CSS代码创建日历图标

  今天我介绍采用纯CSS的方式来创建一个日历图标,你可以将其用在博客日志或者其它地方.自己也是学来的,但是效果是图片级的.如题所述,不在炫技,重在抛砖引玉.最终效果如下: 和从前一样,先看DEMO: 这个日历图标中使用的HTML代码异常简单,如下: 7 February 我们需要用一个外围元素,在这里用的是p元素(或者使用HTML5中的新元素--TIME).在这个外围元素中我们还需要一个包含着月份的元素. 实现原理: 现在,我们有两个可以操作的元素,另外,我们还要为每个真元素创建两个伪元素,这

用纯CSS代码打造的知美网站LOGO图形

一款用CSS代码构画的网站LOGO标识图形样式,非常精典,大家欣赏一下.. [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]