Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(二)

      上一篇 Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(一) 中讨论了Jimdo博客正文里日期的修改方法,从某种意义上说,博客显示页面的日期其实更重要一点,因为它是属于目录性质的,直接地反映了博客的更新情况。经过简单试验,在IE6浏览器情况下的效果要差一点。这里先介绍一下方法,供感兴趣的朋友继续改进。

      在博客显示页面,博客的标题是以目录的形式显示的,所以就不能采用上面绝对定位的方式对日期进行修改。经过分析和试验,初步采用margin进行定位。我实验的代码如下:

.blogselection .datetime{background:none;width:80px;height:0px;}
.blogselection .datetime .day{margin-top:5px; margin-left:70px;width:20px;font-size:12px;line-height:12px;color:#000;}
.blogselection .datetime .mon{margin-top:-13px;margin-left:40px;*width:40px;font-size:12px;line-height:12px;color:#000;}

有几点说明:

      一、因为要把日期由原来的上下排列改为左右排列, 所以要设置一定的宽度,这样那个背景图片,在IE6情况下,无法屏蔽掉,只能缩短它的高度,不过在Firefox、Opera浏览器下没有问题。

      二、试验中发现IE6情况下,年份显示在那个半截的背景图片上,考虑到美观和同一性,这里没有再设置年份的显示。

      三、以上代码只经过简单测试,在Firefox、Opera等浏览器上显示的效果还不错,包括年份(代码里没有提供)。由于条件限制,只拿IE6进行了测试,不知道IE7、IE8情况下是什么效果。

      本文只是初步的方案,如果有朋友感兴趣,可以根据上面的思路再做修改,或者有更好的方法,也欢迎在这里交流。

PS: 修正代码

      针对IE6无法屏蔽掉那个背景图片的问题,又做了修正,效果可以看各导航栏下的博客显示。

.blogselection .datetime

{float:right;width:70px;height:15px;margin:0px;background:url() no-repeat center center;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod = 'crop');_background:none;}
.blogselection .datetime .day{margin-top:0px; margin-left:45px;width:20px;font-size:12px;line-height:12px;color:#000;}
.blogselection .datetime .mon{margin-top:-13px; *margin-left:15px;*width:40px;font-size:12px;line-height:12px;color:#000;}

Write a comment

Comments: 11
  • #1

    Suitear (Monday, 01 November 2010 22:49)

    不看内容,占楼来了~

  • #2

    诸葛草帽 (Tuesday, 02 November 2010 09:24)

    先回复,再看

  • #3

    网型网秀 (Tuesday, 02 November 2010 11:51)

    以上二位…
    我觉得时间挺好看的,拆开后不如以前了

  • #4

    网上邻居 (Tuesday, 02 November 2010 19:23)

    网型网秀:
    从效果上说,好象是不如系统默认的漂亮,不过,我在博客标题下加了横线,只好修改一下它的显示模式,顺便学习一下CSS知识。

  • #5

    JerryX (Tuesday, 02 November 2010 20:35)

    嗯,的确没有系统默认的漂亮,不过对学习CSS还是有帮助。
    好在Webnode的时间还比较令我满意。
    还是学习了。

  • #6

    网上邻居 (Tuesday, 02 November 2010 22:11)

    JerryX:
    本人还是比较喜欢传统博客那样,把日期、时间横放到博客标题的下方,和分类在一个位置上。不过,这只是个人喜好。Jimdo把它放到下面也没问题,但是没“年”没“日”,还是有点不伦不类。

  • #7

    138photo (Tuesday, 02 November 2010 22:33)

    CSS知识的头晕。看到很多英文和数字的代码我就怕怕,我还是拿来主义。

  • #8

    淘宝600家园 (Wednesday, 03 November 2010 15:52)

    测试了一下,在360和IE8显示了~~~

  • #9

    淘宝600家园 (Wednesday, 03 November 2010 15:58)

    呵呵,写错了,是显示不了~~~

  • #10

    网上邻居 (Tuesday, 09 November 2010 02:26)

    淘宝600家园:
    显示的效果不怎么好,有待改进。有机会的时候,再用IE8测试一下。

  • #11

    best iPhone 6 plus case LV (Monday, 11 April 2016 16:24)

    Apple’s iPhone 7 might not be quite as exciting as upcoming phones that get the long-range wireless charging feature Apple appears to be working on behind closed doors.