純CSS代碼實現(xiàn)翻頁

2020-03-24 18:19:08

字體：大中小

來源：轉載

供稿：網(wǎng)友

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

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS滑動門Sliding door詳解

下一篇：html中引入css樣式的方法總結