今天是   本站已创建

记录宝宝成长、关注育儿知识、石油科技、电脑技术!!!!

现在的位置: 首页 博客电脑 >正文
 
2008年2月12日 ⁄ 暗潮 博客电脑 ⁄ 评论数 1+ ⁄ 被围观 +

很早看到论坛里面关于文章归档的美化方法(做成下拉菜单的显示形式),一直我都没有采用。不是程序代码不好,也不是美化的不好,只是因为觉得这个过程需要做的工作量太大,索性不做了。
今天在发现者博客那里发现了篇采用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的地方哦!!

 
【版权声明】本站部分文章来自网络,欢迎转载本人原创文章、图片,请提供本博客中相应文章的链接。
请勿将原创图片、文章用于商业用途!对于给您带来的不便表示抱歉!!
本站所分享的影视作品均转自网络,仅供测试和学习交流。请在下载后24小时内删除,请购买/支持正版。
若有侵权,请即时留言告知,万分感谢!
 
该日志由 暗潮 于 2008年2月12日 发表在 博客电脑 分类下
关键字: Zblog  美化  
 
 
 
目前有 160+ 人访问,有 1+ 条评论! 感谢支持!
  • 汤博客  汤博客 :2009/4/6 11:16:58  IP:125.94.192.3  @回复
  • 好像不行。今天我到此一逛,望回访
 

 
日历
网站分类
搜索
最新留言
站点统计
Tags列表
 
Copyright ©2007-2018 暗潮天空 BlueSky wu2007.Cn京ICP备08005769

Powered By Zblog Theme By 流年岁月