DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 代碼實例之純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="/uploads/allimg/c120318/13320R564244F-33040.jpg" alt="" title="" id="a" /> 
<img src="/uploads/allimg/c120318/13320R5BHF-41Q6.jpg" alt="" title="" id="b" /> 
<img src="/uploads/allimg/c120318/13320R5DL050-52919.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" 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("http://www.hanwangtx.com/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></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> 
</html>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved