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

来源：动视网责编：小采时间：2020-11-27 18:54:55

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

代码实例之纯CSS代码实现翻页效果_经验交流:代码实例之纯CSS代码实现翻页效果_经验交流纯CSS实现翻页效果，原理比较简单，书签配合隐藏。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

推荐度：

点击下载本文 文档为doc格式

导读代码实例之纯CSS代码实现翻页效果_经验交流:代码实例之纯CSS代码实现翻页效果_经验交流纯CSS实现翻页效果，原理比较简单，书签配合隐藏。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

代码实例之纯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"> 
<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="/upload/2007322173319560.jpg" alt="" title="" id="a" /> 
<img src="/upload/2007322173319816.jpg" alt="" title="" id="b" /> 
<img src="/upload/2007322173320970.jpg" alt="" title="" id="c" /> 
</dd> 
</dl> 
</body> 
</html>

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

<!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"> 
<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("/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/> 
<body> 
<dl> 
<dt><a href="#a" title="">新闻</a><a href="#b" title="">娱乐</a><a href="#c" title="">体育</a></dt> 
<dd> 
<ul id="a"> 
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li> 
</ul> 
<ul id="b"> 
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li> 
</ul> 
<ul id="c"> 
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li> 
</ul> 
</dd> 
</dl> 
</body> 
</html>

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

推荐度：

点击下载本文 文档为doc格式

标签：实现示例 css

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐