Heim > Artikel > Web-Frontend > Codebeispiel: Reiner CSS-Code, um einen Page-Turn-Effekt zu erzielen_Erfahrungsaustausch

Codebeispiel: Reiner CSS-Code, um einen Page-Turn-Effekt zu erzielen_Erfahrungsaustausch

PHP中文网Original: 2016-05-16 12:08:181581Durchsuche

Codebeispiel für reinen CSS-Code zur Erzielung eines Umblättereffekts_Erfahrungsaustausch

Reiner CSS-Code zur Erzielung eines Umblättereffekts, das Prinzip ist relativ einfach, Lesezeichen werden mit dem Ausblenden kombiniert.

<!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>

In ähnlicher Weise können Sie durch das Ziehen von Schlussfolgerungen aus einem Beispiel andere Umblättereffekte erzielen.

<!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>

Das Obige ist das Codebeispiel für reinen CSS-Code, um einen Page-Turn-Effekt zu erzielen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php. cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：30-minütiges HTML-Einführungs-Tutorial_Grundlegendes TutorialNächster Artikel：30-minütiges HTML-Einführungs-Tutorial_Grundlegendes Tutorial

In Verbindung stehende Artikel

Mehr sehen