首页 >web前端 >css教程 >仿客齐集首页导航条DIV+CSS+JS [代码实例]_经验交流

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

WBOY原创: 2016-05-16 12:07:562318浏览

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

以下是布局部分

复制代码代码如下:

热门活动

最新功能

服务承诺

最新成功故事

热贴推荐

子鼠00001

子鼠00002

子鼠00003

子鼠00004

子鼠00005

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

复制代码代码如下:

<风格> 
/*子鼠 www.zishu.cn*/ 
* {margin:0;padding:0;font-size:12px;font-family:Verdana、Arial、"宋体"; 列表样式：无;} 
正文 {背景：#FFFFCC;边距：100px 0 0 100px;} 
#info {border:1px solid #FFCC66;padding:30px;背景:#f7f7f7;宽度:500px ;} 
#kjj_tag {width:500px;border-bottom:1px solid #CCC; 背景：url（taga_c.gif）重复x左下；高度：30px；} 
#info1，#info2，#info3，#info4，#info5{边框：1px实心#ccc；边框顶部：无； 内边距：10px； 背景：#fff； 明确：两者；  } 
h4{ 字体粗细：正常；浮动：左；边框右：1px 实心 #fff;} 
.hd {显示：无;} 
.sw {显示：块;} 
#info li {float:left;} 
#info li a{float:left;} 显示：块； 内边距：4px 10px 4px 10px； 颜色：#37572E； 文字装饰：无} 
#info li a:hover{ 背景：#E9FE70; 颜色：#000} 
#info ul { float:left; 顶部边距：-28px； 内边距：5px 0； 位置：绝对} 
#info .ha a{  颜色：#FFF} 
#info .ha a:hover{color:#FFF; 背景：无} 
#info .ha .hc:hover{background:url(tag_d.gif) 无重复 中心 底部； } 
.ha {background:url(taga_a.gif) 无重复 左上;margin-top:-3px;padding-top:3px;} 
.hb{ background:url(taga_b.gif) 无- 重复右上方； 顶部边距：-3px； padding-top:3px;} 
.hc {background:url(tag_d.gif) 无重复 中心 底部;  高度：17px； 颜色：#FFF； 字体粗细：粗体} 
; 

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

复制代码代码如下：

;

以下是用到的四个图：

按此在新窗口打开图片

看下效果吧！

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>客齐集导航条测试</title> 
<style> 
/*子鼠 www.zishu.cn*/ 
* {margin:0;padding:0;font-size:12px;font-family:Verdana, Arial, "宋体"; list-style:none;} 
body {background: #FFFFCC;margin:100px 0 0 100px;} 
#info {border:1px solid #FFCC66;padding:30px;background:#f7f7f7;width:500px;} 
#kjj_tag {width:500px;border-bottom:1px solid #CCC; background:url(http://www.zishu.cn/attachments/month_0704/o200742501718.gif) repeat-x left bottom;height:30px;} 
#info1,#info2,#info3,#info4,#info5{ border:1px solid #ccc;border-top:none; padding:10px; background:#fff; clear:both;  } 
h4{ font-weight:normal;float:left;border-right:1px solid #fff;} 
.hd {display:none;} 
.sw {display:block;} 
#info li {float:left;} 
#info li a{float:left; display:block; padding:4px 10px 4px 10px; color:#37572E; text-decoration:none} 
#info li a:hover{ background:#E9FE70; color:#000} 
#info ul { float:left; margin-top:-28px; padding:5px 0; position:absolute} 
#info .ha a{  color:#FFF} 
#info .ha a:hover{color:#FFF; background:none} 
#info .ha .hc:hover{background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom; } 
.ha {background:url(http://www.zishu.cn/attachments/month_0704/a20074250170.gif) no-repeat left top;margin-top:-3px;padding-top:3px;} 
.hb{ background:url(http://www.zishu.cn/attachments/month_0704/x200742501712.gif) no-repeat right top; margin-top:-3px; padding-top:3px;} 
.hc {background:url(http://www.zishu.cn/attachments/month_0704/5200742501725.gif) no-repeat center bottom;  height:17px; color:#FFF; font-weight:bold} 
</style> 
 
 
<div id="info"> 
  <div id="kjj_tag"> </div> 
  <ul> 
    <li id="tag1"><h4><a href="javascript:kijijitag('1');">热门活动</a></h4></li> 
    <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><a href="http://shanghai.kijiji.cn" target="blank">客齐集上海</a>
</div> 
  <div id="info2">
<a href="http://www.zishu.cn" target="blank">子鼠00002</a><a href="http://beijing.kijiji.cn" target="blank">客齐集北京</a>
</div> 
  <div id="info3">
<a href="http://www.zishu.cn" target="blank">子鼠00003</a><a href="http://huhehaote.kijiji.cn" target="blank">客齐集呼和浩特</a>
</div> 
  <div id="info4">
<a href="http://www.zishu.cn" target="blank">子鼠00004</a><a href="http://hangzhou.kijiji.cn" target="blank">客齐集杭州</a>
</div> 
  <div id="info5">
<a href="http://www.zishu.cn" target="blank">子鼠00005</a><a href="http://www.kijiji.cn/index.html" target="blank">客齐集总首页</a>
</div> 
</div>

<a href="http://www.zishu.cn" target="blank">

</a>子鼠 2007.04.25.  凌晨

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

]
特别说明：

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

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：推荐css打造经典鼠标触发显示选项下一篇：dl,dt,dd制作的CSS垂直菜单_经验交流

相关文章

查看更多