文章專題學習下載問答程式設計字典遊戲最近更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)

首頁 > web前端 > css教學 > 主體

CSS仿淘寶首頁導覽條版面效果_經驗交流

WBOY

發布： 2016-05-16 12:08:54

原創

1930 人瀏覽過

以下是CSS內容部分：

<style>
/*子鼠*/
正文{ 字體大小：12px;文字對齊：居中；上邊距：30px；字型系列：Verdana;}
div,img{邊距:0;填充：0；邊框：0；}
ul,li{列表樣式類型：無；保證金：0；填充：0；向左飄浮; }
#info{ 左邊距：自動；右邊距：自動；寬度：760px；文字對齊：左；}
#new{ 上邊距：-12px；位置：絕對；左邊距：-12px；}
#nav{ 高度：30px;寬度：610px；左邊距：自動；右邊距：自動；}
#nav li{margin-left:1px;高度：30px；}
#nav li a{ 顯示：塊；浮動：左；文字裝飾：無；背景圖片：url(uploadfiles0/r200652134132.gif)；背景重複：不重複；顯示：塊；背景位置：左上角；}
#nav a span{遊標：手；顏色：#000；背景圖片：url(uploadfiles0/v200652134115.gif)；背景重複：不重複；顯示：區塊；背景位置：右上角；內邊距：7px 10px 6px 10px；向左飄浮; }
#nav li a:active,#nav li a:hover {margin-top:0px; }
#nav li a:活動範圍,#nav li a:懸停範圍{padding:10px 10px 6px 10px;上邊距：0px；顯示：塊；顏色：#FFF;}
#zishu01 a:link,#zishu01 a:造訪過{背景位置: 0px -27px;}
#zishu01 a:連結span,#zishu01 a:訪問span{background-position:right -27px;padding:10px 10px 6px 10px;上邊距：0；顏色：#FFF；字體粗細：粗體；}
#zishu02 a,#zishu03 a,#zishu04 a,#zishu05 a,#zishu06 a,#zishu07 a,#zishu08 a,#zishu09 a,#zishu10 a,#zishu11 a{margin-top:3px}
#zishu02 a:active,#zishu02 a:hover {背景位置: 0px -57px;}
#zishu02 a:活動範圍,#zishu02 a:懸停範圍{background-position:right -57px;}
#zishu03 a:active,#zishu03 a:hover {背景位置: 0px -87px;}
#zishu03 a:活動範圍,#zishu03 a:懸停範圍{background-position:right -87px;}
#zishu04 a:active,#zishu04 a:hover {背景位置: 0px -117px;}
#zishu04 a:活動範圍,#zishu04 a:懸停範圍{background-position:right -117px;}
#zishu05 a:active,#zishu05 a:hover {背景位置: 0px -147px;}
#zishu05 a:活動範圍,#zishu05 a:懸停範圍{background-position:right -147px;}
#zishu06 a:active,#zishu06 a:hover {背景位置: 0px -177px;}
#zishu06 a:活動範圍,#zishu06 a:懸停範圍{background-position:right -177px;}
#zishu07 a:active,#zishu07 a:hover {背景位置: 0px -207px;}
#zishu07 a:活動範圍,#zishu07 a:懸停範圍{background-position:right -207px;}
#zishu08 a:active,#zishu08 a:hover {背景位置: 0px -237px;}
#zishu08 a:活動範圍,#zishu08 a:懸停範圍{background-position:right -237px;}
#zishu09 a:active,#zishu09 a:hover {背景位置: 0px -267px;}
#zishu09 a:活動範圍,#zishu09 a:懸停範圍{background-position:right -267px;}
#zishu10 a:active,#zishu10 a:hover {背景位置: 0px -297px;}
#zishu10 a:活動範圍,#zishu10 a:懸停範圍{background-position:right -297px;}
#zishu11 a:連結span,#zishu11 a:訪問span{color:#FF6600;}
#zishu11 a:active,#zishu11 a:hover {背景位置: 0px -327px;}#zishu11 a:active span,#zishu11 a:hover span{background-position:right -327px;}
#menu{ width:760px; height:26px; background:#FF9900;}
#r1{border-top: 0px;border-bottom: 0px; border-left:3px solid #fff;border-right:3px solid #fff; height:1px; overflow:hidden;}
#r2{border-top: 0px;border-bottom: 0px; border-left:2px solid #fff;border-right:2px solid #fff; height:1px; overflow:hidden;}
#r3{border-top: 0px;border-bottom: 0px; border-left:1px solid #fff;border-right:1px solid #fff; height:1px; overflow:hidden;}
</style>

以下是引用片段：
<div id="info">
    <div id="nav">
        <ul>
            <li id="zishu01"><a href="http://www.xfbbs.com"><span>首頁</span></a></li>
            <li id="zishu02"><a href="http://www.xfbbs.com"><span>數位通訊</span></a></li>
            <li id="zishu03"><a href="http://www.xfbbs.com"><span>女人</span></a></li>
            <li id="zishu04"><a href="http://www.xfbbs.com"><span>男人</span></a></li>
            <li id="zishu05"><a href="http://www.xfbbs.com"><span>家居</span></a></li>
            <li id="zishu06"><a href="http://www.xfbbs.com"><span>書音像</span></a></li>
            <li id="zishu07"><a href="http://www.xfbbs.com"><span>運動</span></a></li>
            <li id="zishu08"><a href="http://www.xfbbs.com"><span>遊戲</span></a></li>
            <li id="zishu09"><a href="http://www.xfbbs.com"><span>寵物</span></a></li>
            <li id="zishu10"><a href="http://www.xfbbs.com"><span>香港街</span></a></li>
            <li id="zishu11"><a href="http://www.xfbbs.com"><span>淘寶商城</span></a></li>#
            <li><div id="new"><img src="uploadfiles0/x200652135342.gif" alt="CSS仿淘寶首頁導覽條版面效果_經驗交流"></div></li>#
        </ul>
    </div>
    <div id="menu">
        <div id="r1"></div>
        <div id="r2"></div>
        <div id="r3"></div>
        <div></div>
    </div>
</div>
<p>仿淘寶網首頁導覽條效果 轉載請註明出處 子鼠 www.zishu.cn 2006-05-21 凌晨03:05分</p>

[Ctrl A 全選注意:如需引入外部Js需刷新才能執行]

相關標籤：

CSS仿淘宝首页导航条布局效果

來源：php.cn

上一篇：很不錯的 CSS Hack 又學了一招_經驗交流下一篇：shtml精簡教學讓你知道什麼是shtml_基礎教學

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

Important Warning From Shiba Inu Team Member as SHIB Burn Rate Drops 100%

2024-07-17 14:54:57
Celestia (TIA) Token Sees Huge Price Increase as Modular Blockchains Gain Acceptance

2024-07-17 14:54:08
天穗之咲稻姬晚上怎么打怪

2024-07-17 14:53:42
怪物猎人p3闪亮金属采集点位置在哪里

2024-07-17 14:53:01
《抬頭只見天花板》全成就觸發攻略

2024-07-17 14:50:28
如何使用 css 製作連結的項目符號點

2024-07-17 14:49:57
雷軍年度演講海報洩漏新機：手持小米首款小折MIX Flip

2024-07-17 14:49:27
怎麼在交管app查詢他人違規_在交管app查看別人車輛違規步驟一覽

2024-07-17 14:48:38
浮島冒險彩虹島順序浮島冒險彩虹島菇色順序攻略

2024-07-17 14:47:54
《阿瑞斯病毒2》木炭機BOSS打法詳解

2024-07-17 14:47:28

最新問題

function_exists()無法判定自訂函數 function test() { return true; } if (function_exists('TEST')) { ech...

來自於 2024-04-29 11:01:01

0

1

645

google 瀏覽器手機版顯示的怎麼實現老師您好，google 瀏覽器怎麼變成手機版樣式的？

來自於 2024-04-23 00:22:19

0

9

744

子窗口操作父窗口，輸出沒反應前兩句可執行，最後一句沒辦法應

來自於 2024-04-19 15:37:47

0

1

659

父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出'); ...

來自於 2024-04-18 23:52:34

0

0

525

關於CSS心智圖的課件在哪？課件

來自於 2024-04-16 10:10:18

0

0

616

相關專題

更多>

熱門推薦

熱門教學

更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1386363
php入門教程之一週學會PHP

4192883
JAVA 初級入門影片教學

2288573
小甲魚零基礎入門學習Python影片教學

487527
PHP 零基礎入門教學

819296

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

關於我們免責聲明 Sitemap: PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！