Jimdo“图文混排”元素及其代码演示

      Jimdo元素中,有一个很实用的元素叫“图文混排”,它的效果也就是我们常说的文字环绕图片。通过它我们可以轻易地让Jimdo网站的内容图文并茂,看上去很漂亮。不过,使用这个元素,我们必须上传一个图片,如果是内链一个图片(自己网站上已有的)或外链一个图片(引用别的网站图片),或者在首页进行图文混排,并进行一些装饰的话,这个元素就派不上用场了。最近网上邻居在做个实验模板,正好要用到这个文字环绕图片,便分析了一下Jimdo的“图文混排”元素,提取了“图片混排”的代码。

      其实,要实现文字环绕图片,做起来是不难的,代码也比较简单。既然Jimdo网站上有这个元素,那么我们就可以直接引用它,没必要再去自己设计代码。

      当我们在Jimdo上添加“图文混排”元素时,会弹出以下对话框:

      它的设计相当完善,既有图片居左、居右,也有图片尺寸调整,还考虑到了SEO方面的问题。如果我们不需要考虑的太全面,采用以下简单的代码,就能实现文字环绕图片的效果。其中,"cc-m-image-align-1"是图片居左,"cc-m-image-align-1"是图片居右,加了“padding"是为了美观,保证图片和文字间有一定的距离。

文字环绕图片(居左)代码:

<div class="cc-m-image-align-1" style="padding-right:20px;">
    <img src="图片地址"  width="图片宽度"  alt=" 替代文本"/>
</div>
<p>文字</p>

效果演示:

      Jimdo元素中,有一个很实用的元素叫“图文混排”,它的效果也就是我们常说的文字环绕图片。通过它我们可以轻易地让Jimdo网站的内容图文并茂,看上去很漂亮。不过,使用这个元素,我们必须上传一个图片,如果是内链一个图片(自己网站上已有的)或外链一个图片(引用别的网站图片),或者在首页进行图页混排,并进行一些装饰的话,这个元素就派不上用场了。最近网上邻居在做个实验模板,正好要用到这个文字环绕图片,便分析了一下Jimdo的“图文混排”元素,提取了“图片混排”的代码。

文字环绕图片(居右)代码:

<div class="cc-m-image-align-2" style="padding-left:20px;">
    <img src="图片地址"  width="图片宽度"  alt=" 替代文本"/>
</div>
<p>文字</p>

效果演示:

     Jimdo元素中,有一个很实用的元素叫“图文混排”,它的效果也就是我们常说的文字环绕图片。通过它我们可以轻易地让Jimdo网站的内容图文并茂,看上去很漂亮。不过,使用这个元素,我们必须上传一个图片,如果是内链一个图片(自己网站上已有的)或外链一个图片(引用别的网站图片),或者在首页进行图文混排,并进行一些装饰的话,这个元素就派不上用场了。最近网上邻居在做个实验模板,正好要用到这个文字环绕图片,便分析了一下Jimdo的“图文混排”元素,提取了“图片混排”的代码。

相关文章:

脚本之家myFocus焦点图在Jimdo网站上的演示 (Sat, 27 Jul 2013)
>> Read More

分享一种Jimdo博客日期/时间显示样式的自定义代码 (Sun, 17 Feb 2013)
>> Read More

介绍一个动态修改Jimdo网站模板CSS样式表的JS代码 (Sun, 03 Feb 2013)
>> Read More

Jimdo“图文混排”元素及其代码演示 (Fri, 25 Jan 2013)
>> Read More

介绍一种完美修改Jimdo网站页脚部分的方法 (Thu, 10 Jan 2013)
>> Read More

无觅“热门文章”插件背景颜色的修改及CSS自定义方法 (Sun, 30 Dec 2012)
>> Read More

Write a comment

Comments: 2
  • #1

    Best iPhone 6S Plus Case (Wednesday, 07 October 2015 18:55)

    HTC One M9 is a close second when it comes to a clean and modern design, and also uncluttered. LG G4 is not bad either but does not have simplicity and elegance of One M9.

  • #2

    Louis Vuitton iPhone 6S Plus Case (Wednesday, 06 April 2016 17:12)

    Apart from this, Apple has changed the location of the power button to the right side of the device in recent iPhone 6 and 6s models. But, as a back to the past, the power button has placed in the top of the device, as similar to iPhone 5s.