Pure CSS to achieve page effect, the principle is relatively simple, bookmark with hidden.
Run Code Box
<! 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= "en" "lang=" en "><pead 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 "Song-Body"; Sans-serif Fff Text-decoration:none; Background: #666; border:1px solid #fff; Filter:alpha (OPACITY=40); opacity:.4; }a:hover {background: #000}</style></pead><body><dl><dt><a href= "#a" title= "" > 1</a><a href= "#b" title= "" >2</a><a href= "#c" title= "" >3</a></dt><dd></dd></dl></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Similarly, extrapolate can make other pages of the effect.
Run Code Box
<! 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= "en" "lang=" en "><pead 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 ("/uploadpic/2007-7/ 20077720493868.gif ") no-repeat 75% 20px; border:1px Solid #ccc} #b {background-position:75% Center} #c {background-position:75% 86%}li {width:205px; height:27p X Font:12px/27px "Song Body", Sans-serif; White-space:nowrap; Overflow:hidden; }dt a {display:block; margin:1px; width:30px; height:56px; text-align:center; font:700 12PX/55px "Song Body", Sans-serif; Color: #fff; Text-decoration:none; Background: #666; }dt a:hover {background:orange}</style><pead/><body><dl><dt><a href= "#a" title= "" > News </a><a href= "#b" title= "" > Entertainment </a><a href= "#c" title= "" > Sports </a></dt><dd ><ul id= "A" > <li> <a href= "" title= "" > International News International News </a></li> <li> <a href= " "Title=" "> International News International News International news </a></li> <li> <a href=" "title=" > International News International News International News </a></li > <li> <a href= "" title= "> International News International News </a></li> <li> <a href=" "title=" > International News International News </a></li> <li> <a href= "" title= "> International News International News International News </a></li></ul ><ul id= "B" > <li> <a href= "title=" "> Entertainment news Entertainment news </a></li> <li> <a href=" "Title=" "> Entertainment news Entertainment news </a></li> <li> <a href=" "title=" "> Entertainment news Entertainment News Entertainment News </a></li > <li><a href= "title=" "> Entertainment news Entertainment news </a></li> <li> <a href=" "title=" "> Entertainment news Entertainment News Entertainment News </ a></li> <li> <a href= "title=" "> Entertainment news Entertainment news </a></li></ul><ul id=" C " > <li> <a href= "" title= "" > Sports News Sports News Sports News </a></li> <li> <a href= "" title= "" > Sports News Sports News </a></li> <li> <a href= "" title= "> Sports News Sports News Sports News </a></li> <li > <a href= "" title= "" > Sports News Sports News </a></li> <li> <a href= "" title= "> Sports News Sports News Sports News </a></li> <li> <a href= "" title= "> Sports News Sports News Sports News </A></LI></UL></DD ></dl></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
