Zblog文章归档的美化修改

原创 暗潮  2008-02-12 14:54:14  阅读 747 次 评论 0 条

很早看到论坛里面关于文章归档的美化方法(做成下拉菜单的显示形式),一直我都没有采用。不是程序代码不好,也不是美化的不好,只是因为觉得这个过程需要做的工作量太大,索性不做了。
今天在发现者博客那里发现了篇采用CSS样式控制的文章归档显示样式的文章,效果良好,之后就采用了。只不过我又进一步做了一点点的改进,使其感觉更加良好。估计发现者兄弟也感觉良好了——只不过他还没发现我是怎么改进的,于是来问我。
下面把我修改的思路简单说一下,需要采用的简单理解一下也就能更简单地操控了。
按照发现者提供的方式修改好目标模板(比如default.html和catalog.html),在“按月查看”文字前增加两个空格,然后找个类似于这个的小图片放到图片文件夹;
在CSS样式单某处增加代码#ulArchives2 li{
margin-left:5px;
background:url("此处填写图片路径") no-repeat 0px 0px;
}
索引重建。
然后你也就感觉良好了。
以上内容转自陈玉广的博客 [ http://www.chenyg.cn/blog ]
----------------------------------------------------------------------------------------
以上的修改中,再添加图片的时候需要修改一下所用模板的css文件,因此在这里我就想是否能够省事,不用修改css文件呢?思路就是把添加图片直接在修改模板的时候一并完成。呵呵,这样就不用修改css文件了。又节省了一道工序哦!!修改方法就是:在需要修改的文件(比如default.html和catalog.html)里,找到下面的代码:
<div class="function" id="divArchives">
<h3><#ZC_MSG028#></h3>
<ul><#CACHE_INCLUDE_ARCHIVES#></ul>
</div>

并替换为:
<div class="function" id="divArchives" onmouseover="document.getElementById('ulArchives').style.display = 'block';document.getElementById('ulArchives2').style.display = 'none';" onmouseout="document.getElementById('ulArchives').style.display = 'none';document.getElementById('ulArchives2').style.display = 'block';">
<h3><#ZC_MSG028#></h3>
<ul style="display: none;" id="ulArchives">
   <#CACHE_INCLUDE_ARCHIVES#>
  </ul>
    <ul id="ulArchives2">
   &nbsp;&nbsp;
<img border="0" src="
http://www.wu2007.cn/image/icon_file.gif(此处改为你的图片地址)" vspace="-1" style="margin-bottom:-1px">文章归档--按月查看
    </ul>
</div>

这里的红字就是替换原来定义的修改css的地方哦!!

本文地址:http://www.wu2007.cn/post/150.html
版权声明:本文为原创文章,版权归 暗潮 所有,欢迎分享本文,转载请保留出处!
【版权声明】本站部分文章来自网络,欢迎转载本人原创文章、图片,请提供本博客中相应文章的链接。
请勿将原创图片、文章用于商业用途!对于给您带来的不便表示抱歉!!
本站所分享的影音作品均转自网络,仅供测试和学习交流。请在下载后24小时内删除,请购买/支持正版。
若有侵权,请留言告知,万分感谢!

发表评论


表情

还没有留言,还不快点抢沙发?