美女图片展示 - Jimdo网站最简单的图文混合横排CSS代码

      在Jimdo网站上,要实现图片的多张横向排列,使用“相册”元素那是最简单不过了,它有矩阵和Flash两种显示方式,其中矩阵式还可以有放大和自动播放,具体设置界面如下。

      具体效果如下:

      不过,Jimdo的相册功能只能展示图片,而很多做Jimdo网站的朋友,希望得到一种带图片文字说明、并且具有链接效果的代码,其实这种代码用表格是很容易实现的,网上邻居以前也介绍过,但是表格排版的缺点是样式和内容不分。所以,这里再介绍一种通过CSS实现的代码,经过反复实验,感觉这是最简单的方法了,效果如下。

CSS代码:

.album ul

{ padding:0px; margin:0px; }
.album li
{float:left; list-style: none; border: 1px solid #ccc; background:#fef; text-align:center; padding:5px; margin:3px;}

      上述代码的意思是这样的:

      padding:0px; margin:0px;     清除各种浏览器对无序列表边距的兼容问题;

      float:left;                               设置图片横排;

      list-style: none;                     清除无序列表前的黑点;

      border: 1px solid #ccc;          设置图片边框的宽度、样式和颜色

      background:#fef;                  设置图片的背景颜色;

      text-align:center;                  设置图片说明文字居中显示;

      padding:5px; margin:3px;     设置图片内外边距。

HTML(页面)代码:

<div class="album">
    <ul>
        <li>
            <a href="链接地址" title="鼠标放到链接上的提示文字"><img src="图片地址" alt="图片不显示时的说明文字" />图片下方的说明文字</a>
        </li>
        ......
        <li>
           <a href="链接地址" title="鼠标放到链接上的提示文字"><img src="图片地址" alt="图片不显示时的说明文字" />图片下方的说明文字</a>
        </li>

      </ul>

</div>

      注:本文所有图片均来自网络,仅作演示之用。

Write a comment

Comments: 11
  • #1

    网型网秀 (Wednesday, 06 July 2011 12:54)

    不错呢!

  • #2

    138photo (Tuesday, 19 July 2011 01:04)

    这个功能很强大的说,邻居厉害哦.不知道能不能指向的时候底框变成另一种颜色就很炫了.

  • #3

    网上邻居 (Tuesday, 19 July 2011 13:40)

    138photo:
    你是专业摄影网站,可能对这个比较感兴趣,据我所知,鼠标指向时底框变色,用JS实现起来没问题,而用CSS来实现,找时间试试。

  • #4

    叔time (Monday, 25 July 2011 19:49)

    感觉很厉害 学习学习

  • #5

    ericcruise (Sunday, 11 September 2011 16:10)

    可以再說明仔細一點嗎?

  • #6

    52kmm (Saturday, 17 March 2012 20:36)

    网上邻居:我想要下面的文字说明达到两行或三行(因为文字说明较多),怎么做?

  • #7

    pcsp (Saturday, 17 March 2012 20:38)

    网上邻居:我更想要下面的文字说明达到两行或三行(因为文字说明较多),怎么做?

  • #8

    网上邻居 (Saturday, 17 March 2012 22:40)

    pcsp:
    如果图片下方的说明文字较多,超过了图片的宽度,最简单的方法是采用换行代码,即<br/>,当然,这样会使图片框的高度发生变化,所以,同一行的说明文字,尽量保持差不多,或行数一样。

  • #9

    pcsp (Thursday, 14 June 2012 22:22)

    邻居你好,关于换行代码我还是不会做.但我的确需要2-3行的文字说明,请多多指教,谢谢.

  • #10

    wlp (Friday, 03 July 2015 12:26)

    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/

  • #11

    leather handbags on sale (Saturday, 19 August 2017 14:08)

    I’ve been searching for some decent stuff on the subject and haven't had any luck up until this point, You just got a new biggest fan!..