Home >Web Front-end >CSS Tutorial >Code example: Pure CSS code to achieve page turning effect_Experience exchange
Code example: Pure CSS code to achieve page turning effect_Experience exchange
- PHP中文网Original
- 2016-05-16 12:08:181667browse
code example: pure css code to achieve page turning effect_experience exchange
pure css code to achieve page turning effect, the principle is relatively simple, and the bookmark is hidden.
<!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="#aCode example: Pure CSS code to achieve page turning effect_Experience exchange"">1</a><a href="#bCode example: Pure CSS code to achieve page turning effect_Experience exchange"">2</a><a href="#cCode example: Pure CSS code to achieve page turning effect_Experience exchange"">3</a></dt>
<dd>
<img src="/upload/2007322173319560.jpg" alt="Code example: Pure CSS code to achieve page turning effect_Experience exchange"" id="a" />
<img src="/upload/2007322173319816.jpg" alt="Code example: Pure CSS code to achieve page turning effect_Experience exchange"" id="b" />
<img src="/upload/2007322173320970.jpg" alt="Code example: Pure CSS code to achieve page turning effect_Experience exchange"" id="c" />
</dd>
</dl>
</body>
</html>
similarly, by drawing inferences from one example, you can create other page-turning effects.
<!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="#aCode example: Pure CSS code to achieve page turning effect_Experience exchange"">新闻</a><a href="#bCode example: Pure CSS code to achieve page turning effect_Experience exchange"">娱乐</a><a href="#cCode example: Pure CSS code to achieve page turning effect_Experience exchange"">体育</a></dt>
<dd>
<ul id="a">
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">国际新闻国际新闻国际新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">国际新闻国际新闻国际新闻</a></li>
</ul>
<ul id="b">
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">娱乐新闻娱乐新闻娱乐新闻</a></li>
</ul>
<ul id="c">
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">体育新闻体育新闻体育新闻</a></li>
<li>·<a href="Code example: Pure CSS code to achieve page turning effect_Experience exchange"">体育新闻体育新闻体育新闻</a></li>
</ul>
</dd>
</dl>
</body>
</html>the above is the code example of pure css code to achieve page turning effect_the content of experience exchange. for more related content, please pay attention to the php chinese website (www.php.cn)!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML 30-minute introductory tutorial_Basic tutorialNext article：HTML 30-minute introductory tutorial_Basic tutorial