【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費教程|自學(xué)電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設(shè)計教程|網(wǎng)站設(shè)計教程！【道勤網(wǎng)】

標題: 導(dǎo)航增加new或hot圖標的方法以及資源下載 [打印本頁]

作者: quanshiyinian 時間: 2016-4-20 20:00
標題: 導(dǎo)航增加new或hot圖標的方法以及資源下載
(, 下載次數(shù): 0)

上傳
點擊文件名下載附件
下載積分: 金錢 -1

實現(xiàn)方法：（共二步）
第一步：template/default/common/header.htm（注意紅色部分，如果你不是官方默認模板，請修改相應(yīng)風(fēng)格目錄下的文件）
查找：

<div id="nv">

復(fù)制代碼
在下面一行加入：

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

復(fù)制代碼
第二步：打開template/default/common/common.css文件
在最底部加入

/*導(dǎo)航欄浮動小圖標*/
#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;}

復(fù)制代碼
解釋：
/images/soonew/hot13.gif圖片路徑自行修改。
top:-15px; right:430px; 圖標的坐標，請自行修改。
z-index:5圖片處于的哪一個層，請自行修改（如果你的new和hot小圖標被圖層擋住，請增加此值100或者1000都可以）
注意：
經(jīng)過調(diào)試，仍然不能做到兼容所有的瀏覽器。其實許多大站也不能做到100%兼容所有瀏覽器。IE核心和webKit核心的層表述方式不一。限于本人能力有限，只找到了折中的辦法：就是把你的圖片位置調(diào)整到導(dǎo)航欄上。如本站導(dǎo)航欄

【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費教程|自學(xué)電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設(shè)計教程|網(wǎng)站設(shè)計教程！【道勤網(wǎng)】

【道勤網(wǎng)】- bmrsportswear.com 軟件視頻自學(xué)教程|免費教程|自學(xué)電腦|3D教程|平面教程|影視動畫教程|辦公教程|機械設(shè)計教程|網(wǎng)站設(shè)計教程！【道勤網(wǎng)】