欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

仿客齐集首页导航条DIV+CSS+JS [代码实例]_经验交流

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

仿客齐集首页导航条DIV+CSS+JS [代码实例]_经验交流
以下是布局部分
复制代码 代码如下:

以下是CSS部分:CSS还是没有优化的;
复制代码 代码如下:



以下为JS部分:由于javascript对于我来说太难了;所以可能这部分写的比较烂,但效果是出来了;
复制代码 代码如下:



以下是用到的四个图:

仿客齐集首页导航条DIV+CSS+JS [代码实例]_经验交流仿客齐集首页导航条DIV+CSS+JS [代码实例]_经验交流
仿客齐集首页导航条DIV+CSS+JS [代码实例]_经验交流仿客齐集首页导航条DIV+CSS+JS [代码实例]_经验交流

看下效果吧!

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

特别说明:

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