仿淘宝首页分类列表效果实现代码

网络编程 2024/10/14 佚名

3 2 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;} a{color:blue;} ul{margin:0;padding:0;list-style:none;} #navigation{height:26px;} #navigation li{float:left;} #navigation li.show .content{display:block;} #navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden} #navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;} #container{position:relative;width:800px;margin:50px;} #navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;} #navigation li .content ul li{margin-right:10px;float:none;display:inline;} #navigation li .content ul li a{border:none;} #navigation li .content ul li{width:120px;} #navigation li .content ul li h3{clear:both;text-align:left;} </style> </head> <body>      <ul id="navigation">         <li>拼音索引</li>         <li>             A                              <h3>阿里山</h3>                 <ul>                     <li>阿里山</li>                     <li>阿里山</li>                     <li>阿里山</li>                     <li>阿里山</li>                     <li>阿里山</li>                     <li>阿里山</li>                 </ul>                 <h3>阿里山</h3>                 <ul>                     <li>阿里山</li>                     <li>阿里山</li>                     <li>阿里山</li>                     <li>阿里山</li>                 </ul>                      </li>         <li>             B                              <h3>棒棒糖</h3>                 <ul>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                 </ul>                 <h3>棒棒糖</h3>                 <ul>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                     <li>棒棒糖</li>                 </ul>                      </li>         <li>CC</li>         <li>DD</li>         <li>EE</li>         <li>FF</li>         <li>GG</li>         <li>HH</li>         <li>II</li>         <li>JJ</li>         <li>KK</li>         <li>LL</li>         <li>MM</li>         <li>NN</li>         <li>OO</li>         <li>PP</li>         <li>QQ</li>         <li>RR</li>         <li>S[sh]S</li>         <li>TT</li>         <li>UU</li>         <li>VV</li>         <li>WW</li>         <li>XX</li>         <li>YY</li>         <li>Z[zh]Z</li>     </ul>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

淘宝首页,分类列表

标签：

淘宝首页,分类列表

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

评论“仿淘宝首页分类列表效果实现代码”

仿淘宝首页分类列表效果实现代码

暂无“仿淘宝首页分类列表效果实现代码”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

仿淘宝首页分类列表效果实现代码

淘宝首页,分类列表

javascript 像素拼图实现代码

javascript 层展开/关闭，带缓冲效果

评论“仿淘宝首页分类列表效果实现代码”

友情链接