纯CSS代码实现翻页

2020-03-24 18:19:08

字体：大中小

来源：转载

供稿：网友

!DOCTYPE a href="/keys/html/index.html" target="_blank" html /a 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 a href="#a" title="" 1 /a a href="#b" title="" 2 /a a href="#c" title="" 3 /a /dt
dd
img src="https://cdn14.x6kj.com/uploads/allimg/190527/14360R3a-0.jpg" alt="" title="" id="a" /
img src="https://cdn14.x6kj.com/uploads/allimg/190527/14360U211-1.jpg" alt="" title="" id="b" /
img src="https://cdn14.x6kj.com/uploads/allimg/190527/14360T916-2.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://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.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 本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS滑动门Sliding door详解

下一篇：html中引入css样式的方法总结