一款DIV+CSS導航條效果

來源:互聯網
上載者:User
css|導航

運行代碼框

<style>/*頻道連結樣式*/.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }.channel ul { list-style:none; margin:0px;}.channel li { float:left; padding-left:8px; }.channel a { background:url(/articleimg/2006/04/3385/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }.channel a:link { background:url(/articleimg/2006/04/3385/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }.channel a:visited { background:url(/articleimg/2006/04/3385/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }.channel a:hover { background:url(/articleimg/2006/04/3385/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }.channel a:active { background:url(/articleimg/2006/04/3385/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }</style><body><div class="channel"><UL><LI><A title=文化頻道 href="http://www.rr1mea.cn/Culture">文化頻道</A></LI><LI><A title=音樂頻道 href="http://www.q1iangzu.com/music">音樂</A></LI><LI><A title=專題 href="http://www.rrme1a.cn/Topic">專題</A></LI><LI><A title=部落格 href="http://www.qian1gzu.com/bbs/bokeindex.asp">部落格</A></LI><LI><A title=爾瑪論壇 href="http://www.qian1gzu.com/bbs/index.asp">爾瑪論壇</A></LI></UL></div></body>

 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

CSS檔案:

/*頻道連結樣式*/
.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }
.channel ul { list-style:none; margin:0px;}
.channel li { float:left; padding-left:8px; }
.channel a { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited { background:url(arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active { background:url(arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }

圖片檔案下載:

arrow1.gif
arrow2.gif

DIV檔案:

<div class="channel">
<UL>
<LI><A title=文化頻道 href="http://www.rrmea.cn/Culture">文化頻道</A></LI>
<LI><A title=音樂頻道 href="http://www.qiangzu.com/music">音樂</A></LI>
<LI><A title=專題 href="http://www.rrmea.cn/Topic">專題</A></LI>
<LI><A title=部落格 href="http://www.qiangzu.com/bbs/bokeindex.asp">部落格</A></LI>
<LI><A title=爾瑪論壇 href="http://www.qiangzu.com/bbs/index.asp">爾瑪論壇</A></LI></UL></div>



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。