Jimdo“分栏”元素嵌套“博客显示”的方法及其CSS自定义与美化

      Jimdo自从2012年1月9日增加了一个分栏元素后,Jimdo在元素横排问题上就变得非常简单了,网上邻居第一时间进行了测试和简单介绍,当时认为,事实上到现在也是如此:在元素嵌套方面,分栏是不直接支持“分栏”和“博客显示”元素的,也就是添加新元素时,无法直接添加“分栏”和“博客显示”元素。经朋友提醒,实际上“博客显示”也是可以嵌套到“分栏”元素里的,本文跟大家分享一下。另外,再谈谈“分栏”的CSS自定义美化问题。

      可以说“博客显示”是首页排版上最重要的一个方面,无法直接把它加到“分栏”中,确实有点遗憾。不过,经朋友提醒和实验,“博客显示”是完全可以嵌套到“分栏”里的。说起来方法很简单,相信大家经常用到Jimdo的“拖放”功能 — 对了,将“博客显示”放到分栏里就是这么实现的:在添加分栏时,保留一个空栏不添加任何元素,保存以后在它下面再添加“博客显示”,然后将它拖放到那个空栏里,即实现了“博客显示”的分栏嵌套。

      由于Jimdo博客里无法添加“博客显示”元素,下面以截图演示一下效果:

Jimdo分栏嵌套博客显示元素演示

      此外,在《Jimdo又添一个新功能 - “栏元素”简介及试用体会》一文中,我曾尝试给“分栏”元素加了边栏线和背景色,文后有朋友提了一些问题,下面再就“分栏”元素的CSS自定义和美化问题,作个简单介绍。

      以下为Jimdo系统里关于分栏元素的一些CSS定义及简单解释,如果想对栏添加底色或边框线的话,则可以对“.j-hgrid加些定义;如果想对栏边距进行调整,则可以对“.cc-m-hgrid-column”中的“padding:0 2% 0 0; *padding:0 1.99999% 0 0;”进行调整,其中*padding:0 1.99999% 0 0;”是针对IE6、7浏览器的。

Jimdo“分栏”元素的系统CSS代码:

.j-hgrid{padding:1px !important}  /* 栏元素 */
.cc-m-hgrid-column{float:left;padding:0 2% 0 0; *padding:0 1.99999% 0 0;

min-height:1px}  /*  每个单栏设为浮动及边距等 */
.cc-m-hgrid-column.last{padding:0}   /* 最后一栏边距 */
.cc-m-hgrid-column .n{overflow:hidden;padding:3px}  /* 栏中元素超出部分隐藏及边距 */

      下面做个演示:栏元素加了背景色、边框线,栏之间加了分隔线,并缩小了空白。

Jimdo“分栏”元素嵌套“博客显示”的方法及其CSS自定义与美化

Jimdo“分栏”元素嵌套“博客显示”的方法及其CSS自定义与美化

Jimdo“分栏”元素嵌套“博客显示”的方法及其CSS自定义与美化

jdm.jimdo.com Blog Feed

Jimdo网站登录入口 (Sat, 07 Oct 2017)
>> Read More


Write a comment

Comments: 16
  • #1

    网型网秀 (Sunday, 06 May 2012 18:40)

    谢谢邻居分享,其实这个方法我早已知道,当时懒得写,也没有人问我,后来就忘了,呵呵。

  • #2

    网上邻居 (Sunday, 06 May 2012 18:53)

    将“博客显示”嵌套到“分栏”里,只有在非博客页面上才能实现(博文里是无法添加“博客显示”元素的),所以我一直没注意这个问题,今天跟一个朋友讨论Jimdo问题时,才发现的这个方法。

  • #3

    淘宝600家园 (Tuesday, 08 May 2012 10:53)

    呵呵,要过来学习一下了,栏元素加了背景色、边框线的效果比较好。

  • #4

    网上邻居 (Tuesday, 08 May 2012 11:48)

    “分栏”元素的自定义可以全局设置,也可以单独设置,比如本文所做的演示,仅本页有效。

  • #5

    返利网站大全 (Wednesday, 09 May 2012 18:33)

    好,

  • #6

    返利网站大全 (Wednesday, 09 May 2012 18:38)

    邻居:近来有空吗,能否帮我的小站做个模板,或推荐个给我,别人都说我的小站太简陋了。但我又不太在行美化,所以求助啦。求帮忙,可支付劳动酬劳,但不会有多少的哦!只是表谢意!!我QQ:576433023

  • #7

    网上邻居 (Wednesday, 09 May 2012 23:03)

    返利网站大全:你好!
    是小雀朋友吧?做这个Jimdo网站,我也是业余爱好,美工更不行啦,如果你看到漂亮的模板,仿一下倒是可以的。其实,模板不是最重要的,貌似越简洁越好,内容才是取胜之道。

  • #8

    六角数码 (Monday, 14 May 2012 22:12)

    邻居和网型网秀对JIMDO研究的很深,每次过来看你们的文章都能学习到东西!

  • #9

    哈尔滨交响乐团 (Friday, 25 May 2012 10:38)

    我用这个代码为什么没有任何显示啊?

  • #10

    网上邻居 (Tuesday, 29 May 2012 22:11)

    六角数码:
    谢谢来访并留言!研究谈不上,一些小知识,发现了就与大家分享一下。

  • #11

    网上邻居 (Tuesday, 29 May 2012 22:13)

    哈尔滨交响乐团:
    这个CSS的修改,在编辑状态下没有效果,在预览状态下才有效。

  • #12

    哈尔滨交响乐团 (Friday, 01 June 2012 19:30)

    我想缩小栏之间的空白,加分隔线,试了很多次都无效.

  • #13

    网上邻居 (Saturday, 02 June 2012 06:35)

    哈尔滨交响乐团:
    文中分栏演示代码如下,谨仅参考:
    .j-hgrid{ border:solid #ccc;border-width:1px 2px 2px 1px;background-color:#f3f5f3;}
    .cc-m-hgrid-column{ padding:3px !important;*padding:0px !important; border-right:solid #ccc 1px;}
    .cc-m-hgrid-column.last{ border-right:none;}

  • #14

    哈尔滨交响乐团 (Saturday, 02 June 2012 16:05)

    谢谢邻居,让你费心了。

  • #15

    aetos (Tuesday, 30 October 2012 13:16)

    现在好像不能拖到分栏里去了

  • #16

    网上邻居 (Tuesday, 30 October 2012 14:33)

    aetos:
    刚试了一下,还真是像你说的那样,“博客显示”确实拖不到分栏里了。Jimdo的系统一直在改进中,相信这是暂时的...