當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

csdn的blog后台程序的导航菜单的实现

發布時間：2025/3/15 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 csdn的blog后台程序的导航菜单的实现小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

研究了一下csdn的?blog后臺程序的導航菜單的實現，其特點是每個導航菜單項的寬度不一樣，所以，被用作導航條背景的圖片不能是一個單一固定長度的圖片，所以，csdn采用了一種稱之為滑動門的技術，每個菜單項的左邊先左對其顯示一個半圖片，然后右邊再右對齊顯示另外一個半圖片，右邊的半個圖片顯示的多少隨菜單項的寬度自動調整，左右兩個圖分別如下：

???

左邊的圖片作為<a>標簽的背景圖，右邊的圖片作為<a>標簽中內嵌的標簽的背景圖，下面是整理出來的代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
??? *{
?margin:0px;
?padding:0px;
?}
#tabsF {
?float:left;
?width:100%;
?font-size:12px;
?line-height:normal;
?border-bottom:2px solid #666;
?margin-top:5px;

}
#tabsF ul {
?margin:0;
?padding:10px 10px 20px 50px;
?list-style:none;
}
#tabsF li {
?display:inline;
?margin:0;
?padding:0;
?}
#tabsF a {
?float:left;
?background: transparent url("http://writeblog.csdn.net/resources/images/tableftF.gif") no-repeat left top;
?margin:0;
?padding:0 0 0 3px;
?text-decoration:none;
}
#tabsF a span {
?float:left;
?display:block;
?margin:0;
?background: transparent url("http://writeblog.csdn.net/resources/images/tabrightF.gif") no-repeat right top;
?padding:6px 15px 5px 10px;
}

/* Commented Backslash Hack hides rule from IE5-Mac /*/
??? #tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {color:#FFF;}
#tabsF a:hover {background-position:0% -42px;}
#tabsF a:hover span {background-position:100% -42px;}
#tabsF #current a {background-position:0% -42px;}
#tabsF #current a span {background-position:100% -42px;}

</style>
</head>
<body>

轉載于:https://www.cnblogs.com/spring3/archive/2007/10/10/2401700.html

總結

以上是生活随笔為你收集整理的csdn的blog后台程序的导航菜单的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 2.Eclipse上mysql插件配置及
下一篇：千橡CEO给应聘者的信