一個垂直型的彈性圖片菜單

2024-09-05 12:19:16

字體：大中小

來源：轉載

供稿：網友

老外的東西，寫的就是好，操作感好，垂直有彈性，圖文結合的導航菜單，很不錯的效果。

<html><head><title>垂直型的彈性圖片菜單</title><style type="text/css"> body {cursor:hand; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;} .link {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibility:hidden;} .title   {position:relative;cursor:pointer;background:#FF6600;width:100%;color:#fff;font-family:trebuchet MS;verdana;font-size:11px;left:2;height:15;overflow:hidden;} .title_o {position:relative;cursor:pointer;background:#fff;width:100%;color:#000;font-family:trebuchet MS;verdana;font-size:11px;left:2;height:15;overflow:hidden;} .text {position:relative;text-align:justify;margin:10px;font-family:trebuchet MS;verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%}.fernando {  font-family: "Trebuchet MS", Geneva, Arial, Helvetica, san-serif; font-size: 16px; font-weight: bolder}.mafra {  }</style><script type="text/javascript"></script></head><body bgcolor="#333333"><div style="position:absolute;left:50%;top:50%">   <div   class="llz1bf3"   id="frames" style="position:absolute;width:200;height:340;left:-100;top:-180;overflow:hidden">     <span id="j11dn1h"    class="link">     <div   id="dhtdlhz"   class="title"></div>    <div style="position:relative;text-align:center;margin:0px;font-family:trebuchet MS; verdana;font-size:29px;font-weight:bold;color:#FFF;overflow:hidden;height:120%">       <img src="/d/file/p/2024/09-05/7791970c386181ddd7bc925e5f20d544.jpg" width="191" height="189" border="0">     </div>    </span> <span id="jzxzlnt"    class="link">     <div   id="rzjxfjt"   class="title"><b>  alimentos /<i> food</i></b></div>    <div   id="xv5vjbp"   class="text"> <img src="/d/file/p/2024/09-05/6ad104b9ab7f24da8313498e053761e0.jpg" width="183" height="174" border="0">     </div>    </span> <span id="z77jlpr"    class="link">     <div   id="h1fdptr"   class="title"><b>  bebidas /<i> drinks</i></b></div>    <div   id="zpjb1pl"   class="text"> <img src="/d/file/p/2024/09-05/5c793622d8b8381374cbffadfe1b1fb1.jpg" width="183" height="174" border="0">     </div>    </span> <span id="tzp1zdr"    class="link">     <div   id="t1jtdb9"   class="title"><b>  joias /<i> jewels</i></b></div>    <div   id="rbfjxlr"   class="text"> <img src="/d/file/p/2024/09-05/98c1105ebec8b26e19696b671e7b8715.jpg" width="183" height="174" border="0">     </div>    </span> <span id="xrrth3x"    class="link">     <div   id="htt3zxp"   class="title"><b>  natureza /<i> nature</i></b></div>    <div   id="df3zfzv"   class="text"> <img src="/d/file/p/2024/09-05/63ff9da627e222831211a6c36ab3a103.jpg" width="183" height="174" border="0">     </div>    </span> </div></div><div style="position:relative; text-align:center; margin:0px; font-family:verdana; font-size:9px; font-weight:normal; color:#999999; overflow:hidden; height:131px; left: 414px; top: 474px; width: 172px;"> </div><script type="text/javascript">_uacct = "UA-1182901-1";urchinTracker();</script></body></html>

上一篇：一款經典簡潔的CSS滑動門代碼

下一篇：CSS+JS樹型菜單