当前位置：首页 > 资讯 > 技术文档

仿客齐集首页导航条DIV+CSS+JS [代码实例]

时间：2021-01-02 12:58 编辑：来源：阅读：
扫一扫，手机访问

摘要：仿客齐集首页导航条DIV+CSS+JS [代码实例]

作者子鼠
客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下；
你可以先看一下客齐集首页的效果：http://shanghai.kijiji.cn
我试着不用position:absolute的方法；但写起来太难了；后来还是用position:absolute了；但在客齐集站上的是没有用的；真不知道当时是怎么写出来的；
以下是效果图：

[img]http://www.zishu.cn/attachments/month_0704/3200742501155.gif[/img]
以下是布局部分

[url=javascript:kijijitag(]
    <li id="tag2"><h4><a href="javascript:kijijitag('2');" >最新功能</a></h4></li>
    <li id="tag3"><h4><a href="javascript:kijijitag('3');" >服务承诺</a></h4></li>
    <li id="tag4"><h4><a href="javascript:kijijitag('4');" >最新成功故事</a></h4></li>
    <li id="tag5"><h4><a href="javascript:kijijitag('5');" >热贴推荐</a></h4></li>
  </ul>
  <div id="info1"><a href="http://www.zishu.cn" target="blank">子鼠00001</a></div>
  <div id="info2"><a href="http://www.zishu.cn" target="blank">子鼠00002</a></div>
  <div id="info3"><a href="http://www.zishu.cn" target="blank">子鼠00003</a></div>
  <div id="info4"><a href="http://www.zishu.cn" target="blank">子鼠00004</a></div>
  <div id="info5"><a href="http://www.zishu.cn" target="blank">子鼠00005</a></div>
</div>

以下是CSS部分：CSS还是没有优化的；

[u]复制代码[/u][/url] 代码如下:

以下为JS部分：由于javascript对于我来说太难了；所以可能这部分写的比较烂，但效果是出来了；

[url=javascript:kijijitag(]热门活动[/url] [*][h3][url=javascript:kijijitag(]最新功能[/url][/h3][/*] [*][h3][url=javascript:kijijitag(]服务承诺[/url][/h3][/*] [*][h3][url=javascript:kijijitag(]最新成功故事[/url][/h3][/*] [*][h3][url=javascript:kijijitag(]热贴推荐[/url][/h3][/*] [/list]

[url=http://www.zishu.cn]子鼠00001[/url][url=http://shanghai.kijiji.cn]客齐集上海[/url]

[url=http://www.zishu.cn]子鼠00002[/url][url=http://beijing.kijiji.cn]客齐集北京[/url]

[url=http://www.zishu.cn]子鼠00003[/url][url=http://huhehaote.kijiji.cn]客齐集呼和浩特[/url]

[url=http://www.zishu.cn]子鼠00004[/url][url=http://hangzhou.kijiji.cn]客齐集杭州[/url]

[url=http://www.zishu.cn]子鼠00005[/url][url=http://www.kijiji.cn/index.html]客齐集总首页[/url]

[url=http://www.zishu.cn]子鼠[/url] 2007.04.25. 凌晨
[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

特别说明：

1、CSS部分不是很清晰，因为写的我都有点晕了；
2、五个TAG是随机换的；
3、JS部分还可以再精简一些，但要有CSS支持；

全部评论(0)

上一篇：js 毫秒转天时分秒的实例
下一篇：手机Web APP如何实现分享多平台功能

资讯排行榜
更多>>