quanshiyinian 发表于 2016-4-20 20:00:27

导航增加new或hot图标的方法以及资源下载

实现方法:(共二步)
第一步:template/default/common/header.htm(注意红色部分,如果你不是官方默认模板,请修改相应风格目录下的文件)
查找:


[*]<div id="nv">

复制代码
在下面一行加入:


[*]<div id="topmenu"><div class="topmenu1"> <sup></sup></div>
[*]<div class="topmenu2"> <sup></sup></div></div>

复制代码
第二步:打开template/default/common/common.css文件
在最底部加入


[*]/*导航栏浮动小图标*/
[*]#topmenu{position:relative;z-index:5;}
[*].topmenu1 sup{display:block; width:26px; height:27px; position:absolute;background-image:url(/images/soonew/hot13.gif); background-position:0 0; top:-15px; right:350px; _right:515px; clear:left;z-index:5;}
[*]
[*].topmenu2 sup{display:block; width:28px; height:18px; position:absolute;background-image:url(/images/soonew/New15.gif); background-position:0 0; top:-15px; right:430px; _right:515px; clear:left;z-index:5;}

复制代码
解释:
/images/soonew/hot13.gif图片路径自行修改。
top:-15px; right:430px; 图标的坐标,请自行修改。
z-index:5图片处于的哪一个层,请自行修改(如果你的new和hot小图标被图层挡住,请增加此值100或者1000都可以)
注意:
经过调试,仍然不能做到兼容所有的浏览器。其实许多大站也不能做到100%兼容所有浏览器。IE核心和webKit核心的层表述方式不一。限于本人能力有限,只找到了折中的办法:就是把你的图片位置调整到导航栏上。如本站导航栏


页: [1]
查看完整版本: 导航增加new或hot图标的方法以及资源下载