代码实例之纯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" 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></dt>  
<dd>  
<img src="http://www.lhsxpumps.com/_images/10qianwan/20171208/b_1_201712081944106586.jpg" alt="" title="" id="a">  
<img src="http://www.lhsxpumps.com/_images/10qianwan/20171208/b_1_201712081944109628.jpg" alt="" title="" id="b">  
<img src="http://www.lhsxpumps.com/_images/10qianwan/20171208/b_1_201712081944101914.jpg" alt="" title="" id="c">  
</dd>  
</dl>  
</body>  
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

同样，举一反三，可以做出其他的翻页的效果。

<!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;  
 }  
dt {  
 position:absolute;  
 right:1px;  
 }  
ul {  
 margin:0;  
 padding:0;  
 width:260px;  
 height:170px;  
 list-style:none;  
 background:url("//www.jb51.net/upload/2007322173320204.gif") no-repeat 75% 20px;  
 border:1px solid #ccc  
 }  
#b {  
 background-position:75% center  
 }  
#c {  
 background-position:75% 86%  
 }  
li {  
 width:205px;  
 height:27px;  
 font:12px/27px "宋体",sans-serif;  
 white-space:nowrap;  
 overflow:hidden;  
 }  
dt a {  
 display:block;  
 margin:1px;  
 width:30px;  
 height:56px;  
 text-align:center;  
 font:700 12px/55px "宋体",sans-serif;  
 color:#fff;  
 text-decoration:none;  
 background:#666;  
 }  
dt a:hover {  
 background:orange  
 }  
</style>  
<head></head>  
<body>  
<dl>  
<dt></dt>  
<dd>  
<ul id="a">  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
</ul>  
<ul id="b">  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
</ul>  
<ul id="c">  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
 <li>·</li>  
</ul>  
</dd>  
</dl>  
</body>  
</head></html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

深入浅析CSS 的多种背景及使用场景和技巧

本文 github https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料cs... [阅读全文]

CSS实现鼠标悬停改变其他标签样式的示例代码

前言：据我了解目前css只能控制悬停时改变该标签下面的兄弟标签和子标签样式，如有大佬有好的方法请指教！控制其他标签（根据控制标签与被控制标签之间的关系）可分为... [阅读全文]

CSS line-height的如何继承的问题

line-height的如何继承？写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解）比如body中... [阅读全文]

浅谈CSS到底会不会阻塞页面渲染

可能大家都知道，js执行会阻塞dom树的解析和渲染，那么css加载会阻塞dom树的解析和渲染吗？接下来，我们就一起来分析一下。原理解析那么为什么会出现上面的现象... [阅读全文]

CSS3+JavaScript实现炫酷呼吸效果的示例代码

CSS3+JavaScript实现炫酷呼吸效果的示例代码这篇文章主要介绍了CSS3+JavaScript实现炫酷呼吸效果的示例代码，文中通过示例代码介绍的非常... [阅读全文]

如何使用css3实现一个类在线直播的队列动画的示例代码

如何使用css3实现一个类在线直播的队列动画的示例代码这篇文章主要介绍了如何使用css3实现一个类在线直播的队列动画的示例代码，文中通过示例代码介绍的非常详细... [阅读全文]

CSS3新增布局之: flex详解

CSS3新增布局之: flex详解flex布局（flex是flexible box的缩写），也称为弹性盒模型，这篇文章主要介绍了CSS3新增布局之: fl... [阅读全文]

CSS3 box-shadow属性实例详解

CSS3 box-shadow属性实例详解这篇文章主要介绍了CSS3 box-shadow属性实例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工... [阅读全文]

CSS3为背景图设置遮罩并解决遮罩样式继承问题

CSS3为背景图设置遮罩并解决遮罩样式继承问题这篇文章主要介绍了CSS3为背景图设置遮罩并解决遮罩样式继承问题,文中通过示例代码介绍的非常详细，对大家的学习或... [阅读全文]

基于CSS3的animation属性实现微信拍一拍动画效果

基于CSS3的animation属性实现微信拍一拍动画效果这篇文章主要介绍了基于CSS3的animation属性实现微信拍一拍动画效果,本文通过实例代码给大家... [阅读全文]


验证码：

验证码：

代码实例之纯CSS代码实现翻页效果

2017年12月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论