Jimdo网站首页设计初探 -“博客显示”元素的CSS修饰与美化

      Jimdo 这个源自德国的建站平台,自2007年推出以来,目前已提供十一种不同的语言服务,分别为德语、英语、汉语、法语、俄语、意大利语、西班牙语、日语、荷兰、葡萄牙语以及波兰语。在全球范围内,已建起了400多万个Jimdo网站。与国内众多智能建站、自助建站相比,Jimdo的操作更为人性化,版面设计更为灵活。除了真正永久的免费版,还有收费的专业版和商业版。

      在建站形式上,大致上分为两种:一种是公司或个人性质的中小形网站,另一种是很多业余爱好者所用的博客形式。在首页的设计上,网站形式的,差不多完全是手动更新内容;博客形式的,则可以通过“博客显示”或“RSS Feed”实现内容的自动更新。

      不过,Jimdo系统提供的“博客显示”和“RSS Feed”,都是整个版面的宽度,用于首页时,在版面上比较单调,无法进行比较整齐、漂亮的排版。网上邻居就“博客显示”和“RSS Feed”列表式排版,进行了初步探索与试验,供感兴趣的朋友参考。

图一、首页截图
图一、首页截图

      上图是我目前首页的截图及各部分说明,共分七个部分,其中:博客显示列表(我的部分博客)、RSS内容一(部分Jimdo博客最近更新)、RSS内容二(我的最近博客更新)和外链内容(来自无觅的热门文章列表)这四个部分,内容都是自动更新的。自定义内容一、二、三是利用绝对定位代码进行定位的,手工编写,基本上不用经常更新。

      实际上,在模板里,这是一个二分栏布局。整个版面(container)宽度是980px,左部(content)宽度是745px,右部(right)是230px。那么,“博客显示列表”的宽度是怎么设置的呢?下面以实际代码说明。

#cc-matrix-445394204 .j-BlogSelection{padding:0px; margin-left:248px !important;width:490px;}

      Jimdo最近对系统代码进行升级,“.j-BlogSelection”就是“博客显示”部分的类选择器名称,“margin-left:248px !important;” 是右移248px,从而留出了左部“自定义内容一”的空白,后面的“width:490px;”则是设置“博客显示”的宽度。

      “博客显示列表”实际效果如下图二所示。主要是做了一个列表框,加了个有图片背景的表头,另外,去掉了“查看全文”和“评论”,当然,日期也是自定义的(这个内容请参见:Jimdo网站的美化 - Jimdo博客标题中日期的修改方法(二)

图二、博客显示列表
图二、博客显示列表

      这部分完整的CSS代码如下:

#cc-matrix-445394204 .blogtit

{

margin-left:243px;

width:490px;

height:25px;
background:url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/intit.gif?t=1305087941) repeat-x;

border:solid 1px #d0d0d0;

position:relative;

}
#cc-matrix-445394204 .blogtit strong

{

margin-left:243px;

font-size:13px;

color:#000;

margin-left:10px;

margin-top:3px;

padding-left:10px;

display:inline-block;

background:url(http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/img/index.gif?t=1314493475) no-repeat 0 -144px;

}
#cc-matrix-445394204 .j-BlogSelection

{

padding:0px;

margin-left:248px !important;

width:490px;

}
#cc-matrix-445394204 .blogselection

{

width:485px;

border:1px solid #d0d0d0;

margin:0px;

padding:0px 0px 5px 5px;

*padding:5px 0px 5px 5px;

border-top:none;

margin-top:-5px;

*margin-top:0px;

}
#cc-matrix-445394204 .blogselection a, #cc-matrix-445394204 .blogselection .comment

{

display:none;

}
#cc-matrix-445394204 .blogselection h1 a

{

display:block;

font:12px/120% verdana,宋体;

}
#cc-matrix-445394204 .blogselection .j-blogarticle

{

height:12px;

margin:0px;

padding:5px;

*padding:5px ;

_padding:2px;

}
#cc-matrix-445394204 .blogselection .clearover h1

{

border-bottom:none;

}

      关于代码的意思,这里就不详细解释了,相关内容请参阅 Jimdo自定义模板揭密 - Jimdo CSS选择器汇编(博客部分)  一文。有一点说明一下,在这里考虑到了IE6、IE7和Firefox等浏览器的兼容问题,如以下这一句中: 

#cc-matrix-445394204 .blogselection .j-blogarticle

{height:12px; margin:0px; padding:5px; *padding:5px; _padding:2px;}

padding:5px;                          IE6、IE7、Firefox 都识别

*padding:5px;                         “*” IE6、IE7能识别,Firefox 不识别

_padding:2px;                        “_” 只有IE6可以识别,IE7、Firefox 不识别

      在CSS里,出现相同的属性设置时,最后一个值有效,那么,上述声明中,各种浏览器的执行结果是:

      IE6为padding:2px,IE7为padding:5px,Firefox为padding:5px。请注意:一定要注意书写顺序!

      图二所示的效果,在页面只需要操作两步:一是通过“Widget/ HTML”添加列表表头代码,二是添加“博客显示”元素。具体列表表头代码为:

<div class="blogtit">
    <strong>Jimdo自定义模板</strong>
</div>

      紧接着的“博客显示”的添加和正常方法完全一样,只要注意分类和标题对应即可。

Write a comment

Comments: 8
  • #1

    淘宝600家园 (Monday, 03 October 2011 10:21)

    呵呵,邻居好久没更新了~~
    过来学习一下~~~

  • #2

    网上邻居 (Monday, 03 October 2011 10:30)

    淘宝600家园:
    节日快乐!谢谢来访!
    刚把结尾补充一下,就收到你留言的信息了。这几天放假,准备更新一些。

  • #3

    淘宝600家园 (Monday, 03 October 2011 22:10)

    呵呵,节日快乐。

  • #4

    网型网秀 (Wednesday, 05 October 2011 10:03)

    有网的日子真好,怀念啊!

  • #5

    王若冰 (Friday, 14 October 2011 17:10)

    我用jimdo也能算是骨灰级的,但一直以来没有研究过blog,因为刚开始用jimdo的时候还没有blog系统,后来有的时候网站已经做的差不多了,就没有研究了,今天看了你的文章,感觉当初如果研究博客的话,很多事情就要简单的多了,这里向你致敬

  • #6

    网上邻居 (Saturday, 15 October 2011 17:39)

    王若冰:
    谢谢来访并留言!很多早期玩Jimdo的朋友,都纷纷离开了Jimdo。由于Jimdo功能上(特别是博客方面)及网速的一些原因,主要适合一些新手玩;另一方面,它的扩展性却又是一般的建站平台或博客不能比拟的。

  • #7

    hui2012 (Monday, 18 June 2012 01:09)

    博客排版看起来很舒服,学习了啊

  • #8

    wlp (Friday, 03 July 2015 12:27)

    http://www.burberry-outlet.jp.net/
    http://www.burberryoutlet.org.uk/
    http://www.burberryoutlet-online.co.com/
    http://www.burberryoutlet-online.in.net/
    http://www.calvinklein.co.com/
    http://www.celinebags.org/
    http://www.chanelhandbags.net.co/
    http://www.cheapbaseballbats.net/
    http://www.christianlouboutinshoes.ar.com/
    http://www.air-huarache.co.uk/
    http://www.airjordans.us/
    http://www.airjordanshoes2015.com/
    http://www.airmax-2015.org/
    http://www.airmax-90.org/
    http://www.babyliss-pro.net/
    http://www.basketballshoes.com.co/
    http://www.beatsbydrdre.co.com/
    http://www.beatsbydre.com.co/
    http://www.beats-by-dre.com.co/
    http://www.beatsheadphones.in.net/
    http://www.bottega.us/
    http://www.burberryhandbags.net.co/
    http://www.cheapjerseys.in.net/
    http://www.cheap-jordans.net/
    http://www.cheapmichaelkors.us.org/
    http://www.cheap-nikeshoes.com/
    http://www.cheapoakley.us.org/
    http://www.cheapoakleysunglasses.ar.com/
    http://www.cheap-oakleysunglasses.in.net/
    http://www.cheaprayban.com.co/
    http://www.cheapshoes.com.co/
    http://www.cheapuggboots.eu.com/
    http://www.chiflatiron.net.co/
    http://www.christian--louboutin.in.net/
    http://www.christianlouboutin.org.uk/
    http://www.christianlouboutinshoes.jp.net/
    http://burberry.outletnow.net/
    http://christian.louboutin-outlet.net/
    http://toryburch.salesandals.net/
    http://www.abercrombieand-fitch.com.co/
    http://www.abercrombiefitch.us.com/
    http://www.abercrombie-kids.us.com/
    http://www.coachfactory-outlet.co.com/
    http://www.coachfactoryoutletonline.co.com/
    http://www.coach-handbags.com.co/
    http://www.coachoutlet-online.com.co/
    http://www.coachoutletstore.net.co/
    http://www.coachoutletstore-online.com.co/
    http://www.coco-chanelbags.com.co/
    http://www.converse.net.co/
    http://www.designerhandbagsoutlet.com.co/
    http://www.eyeglassesonline.us.com/
    http://www.eyeglassframes.us.com/
    http://www.fashion-clothing.us.com/
    http://www.ferragamo.com.co/
    http://www.ferragamoshoes.net/
    http://www.ghdhairstraightener.com.co/
    http://www.jimmychoo.net.co/
    http://www.jordanretro.org/
    http://www.jordan-shoes.com.co/
    http://www.juicycouture.com.co/
    http://www.juicycoutureoutlet.net.co/
    http://www.louisvuitton-outlet.com.co/
    http://www.louisvuitton-outlets.us/
    http://www.marcjacobsonsale.com/
    http://www.mcm-bags.net/
    http://www.mcmhandbags.com.co/
    http://www.michaelkors.so/
    http://www.michael--kors.us.com/
    http://www.michaelkorsbags.us.org/
    http://www.michaelkorshandbags.org.uk/
    http://www.michael-kors-handbags.us.com/
    http://www.michaelkorsoutlet.ar.com/
    http://www.michael-kors-outlet.us.org/
    http://www.michaelkorsoutlet-online.ar.com/
    http://www.michael-kors-outlet-online.us.org/
    http://www.michaelkorsoutletonline-sale.us.com/
    http://www.michaelkors-uk.org.uk/
    http://www.montblanc--pens.net/
    http://www.newbalance-outlet.org/
    http://www.nike-air-max.us/
    http://www.nikefactory.org/
    http://www.nikefree5.net/
    http://www.nikefree-run.net/
    http://www.nikefree-run.org.uk/
    http://www.jordanrelease-dates.com/
    http://www.nikemercurial.net/
    http://www.nikerosherun.us/
    http://www.nikestore.us/
    http://www.northface.us.org/
    http://www.northfaceoutlet.com.co/
    http://www.oakleyoutlet.us.org/
    http://www.oakley-sunglasses.us.org/
    http://www.oakleysunglassescheap.in.net/
    http://www.oakleysunglassesoutlet.com.co/
    http://www.omegawatches.us.com/
    http://www.pandora-charms.org.uk/
    http://www.pandorajewelry.com.co/
    http://www.polo-outlets.com/
    http://www.pradahandbags.net.co/
    http://www.pradahandbags.com.co/
    http://www.pradashoes.com.co/
    http://www.ralph-lauren.org.uk/
    http://www.ralphlaurenoutlet.us.com/
    http://www.ralphlauren-outlet.org.uk/
    http://www.ralphlaurenoutletonline.com.co/
    http://www.ralphlaurenoutletonline.in.net/
    http://www.gucci.me.uk/