Pure CSS to achieve page effect, the principle is relatively simple, bookmark with 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= "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" Conte nt= "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; Color: #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>123</dt> <dd> </dd> </dl> & Lt;/body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Similarly, extrapolate can make other pages of the effect.
<! 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" Conte nt= "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://www.jb51.net/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 "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> News Entertainment Sports </dt> <dd> <ul id= "A" > <li> International News International News </li> <li> International News International News International News </li> <li> International News International News </li> <li> International News International News </li> <li> International News International News </li> <li > International News International News </li> </ul> <ul id= "B" > <li> Entertainment News Entertainment news </li> <li> Entertainment News Entertainment New Smell Entertainment news </li> <li> Entertainment News Entertainment news </li> <li> Entertainment News Entertainment news </li> <li> Entertainment News Entertainment News ;/li> <li> Entertainment News Entertainment news </li> </ul> <ul id= "C" > <li> Sports News Sports News Sports News </li> <li> Sports News Sports News Sports NewSmelling </li> <li> Sports News Sports News </li> <li> Sports News Sports News Sports News </li> <li> Sports News Sports News Sports News </li > <li> Sports News Sports News </li> </ul> </dd> </dl> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
