早有一个想法了，
blog日志如果积存多了，
有时自己也难找到想看的东西，
如果目录有弹出式下拉菜单，
于人于己岂不方便。
今天终于下了个大决心，
给自己放假半天，
一心为“小窝”做个“日志目录”，
鼠标悬停目录上出现一目了然的日志条目。
现在总算可以看到眉目了：D
虽然还应该有个滚动条，
或许还应该再配个边框什么的。
也不知其他浏览器能否正常显示。
对于5d大家来说，
也许这个很小儿科吧：P
不过就我这水平这也很啊哈哈的了，
其他调整等以后有空再说了。
（另外，如果您有高见，不妨教我啊～谢谢了。不知5d有没有日后设置一个可以自动生成的弹出目录的打算？）
效果如下，自我感觉方便了:)
竖排——
横排（将代码放于博客“顶部信息”中，在代码前加若干<br>调整目录位置，同时去掉代码中的全部 <li> </li>语句）——
竖排目录代码如下（直接复制到新建边栏代码处即可。可惜目前需要手动更新目录）
哈哈，新加了滚动条，颜色（色彩代码查找请点击此链接） 、形状可以琢磨着变。自动更新理论上不难，以后再说：
<style type="text/css">
BODY {
SCROLLBAR-FACE-COLOR: #d8d8d8;
SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc;
SCROLLBAR-SHADOW-COLOR: #fcfcfc;
SCROLLBAR-3DLIGHT-COLOR: #fcfcfc;
SCROLLBAR-ARROW-COLOR: #fcfcfc;
SCROLLBAR-TRACK-COLOR: #fcfcfc;
SCROLLBAR-DARKSHADOW-COLOR: #cccccc;
SCROLLBAR-BASE-COLOR: #fcfcfc
} <!此部分为滚动条色彩变化，整体删除后转为系统默认格式>
#Nav {
clear: both;
margin: 0px;
width: 750px
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
list-style-type: none
}
#Nav ul {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
list-style-type: none
}
#Nav li {
float: left;
width: 125px
}
#Nav li ul {
left: -999em;
width: 125px;
position: absolute
}
#Nav li a {
padding-right: 0px;
display: block;
padding-left: 0px;
font-size: 11px;
background: url(../images/Navbutbg.gif) #cccccc repeat-x;
padding-bottom: 5px;
width: 124px;
color: #555555;
margin-right: 1px;
padding-top: 5px;
font-family: arial, helvetica, sans-serif;
text-align: center;
text-decoration: none
} <!目录背景及文字字体、颜色设置>
#Nav li ul a {
padding-right: 0px;
display: block;
padding-left: 0px;
font-size: 10px;
background: url(../images/Navbutbg.gif) #99CCCC repeat-x;
padding-bottom: 3px;
width: 124px;
color: #333333;
text-indent: 5px;
margin-right: 1px;
padding-top: 3px;
font-family: arial, helvetica, sans-serif;
text-align: left;
text-decoration: none
} <!弹出下级目录格式设置>
#Nav li a:hover {
background: #ffa400;
color: white
}
#Nav li ul a:hover {
background: #ffa400;
color: white
} <!鼠标经过时背景、文字颜色变化>
#Nav li:hover ul {
left: auto
}
#Nav li.sfhover ul {
left: auto
}</style><script type="text/javascript">
function sfHover() {
var sfEls = document.getElementById("Nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<div id="Container">
<div id="Nav">
<ul>
<li><a href="目录网址">目录</a>
<ul style="OVERFLOW-Y: auto; OVERFLOW-X: hidden; WIDTH: 141px; HEIGHT: 205px"> <!这是滚动条部分，可以调整或删除，不要删除后面的“＞”啊～>
<a href="首页网址">返回首页</a>
<a target="_blank" href="下级目录网址">下级目录</a>
<a target="_blank" href="下级目录网址">下级目录</a>
<a target="_blank" href="下级目录网址">下级目录</a> <!如增加下级目录，由此回车整体复制粘贴该部分>
</ul>
</li>
<li> </li> <!此部分为目录间分隔，横排时请删除>
<li><a href="目录网址">目录</a>
<ul style="OVERFLOW-Y: auto; OVERFLOW-X: hidden; WIDTH: 141px; HEIGHT: 205px">
<a href="首页网址">返回首页</a>
<a target="_blank" href="下级目录网址">下级目录</a>
<a target="_blank" href="下级目录网址">下级目录</a>
<a target="_blank" href="下级目录网址">下级目录</a>
</ul>
</li> <!如增加目录，由此回车整体复制粘贴该部分>
</ul>
</div>
</div>
<li> </li>
<li> </li> <!此部分为该边栏与下面栏目分隔，横排时显示为圆点，可以删除>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
上一篇：牛刀初小试，语出四坐惊 下一篇：小窝瘦身进行时
回复Comments
作者:
{commentrecontent}