职业IT人论坛

 找回密码
 注册

扫一扫,访问微社区

搜索
2019PMP认证备考培训项目管理之家专场百度自然排名1-15天上首页,达标计费,无效退款.500+微信公众号程序模块,免费使用!
查看: 1414|回复: 8

经典图文列表以及CSS布局切换

[复制链接]
楠楠 发表于 2011-6-12 10:26 | 显示全部楼层 |阅读模式
经常碰到图文列表的排列,怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计,总结出一点小经验和技巧。





列表的HTML构成:
Html代码  
<pre>  
<div class="box">  
  <ul>  
    <li>  
      <div class="item">  
        <a href="url"><img src="src" alt=""/></a>  
        <h3><a href="url">TITLE</a></h3>  
        <p>Description</p>  
      </div>  
    </li>  
    ... items ...   
  </ul>  
</div>  

<pre>
<div class="box">
  <ul>
    <li>
      <div class="item">
        <a href="url"><img src="src" alt=""/></a>
        <h3><a href="url">TITLE</a></h3>
        <p>Description</p>
      </div>
    </li>
    ... items ...
  </ul>
</div>

在列表布局中,我们经常会选用float属性来实现横向排列,要实现每一行都整齐排列,我们必须固定列表项的高度,否则会发生意想不到的混乱表现。但实际应用中,图片不一定都同尺寸,按比例来表现势必会与我们固定列表高度或宽度相驳,也许还有图片底边对齐的要求。为了实现这种效果,这里用到了ie6不支持的display:inline-block;ie通过使用 “display:inline;zoom:1”来hack。

下面直接上例子:
值得推荐的图文列表以及CSS布局类型切换

不得不提到一点,如果使用display:inline-block做排列的话,标签换行在Firefox下会引起letter-spacing的bug,如下图:

解决方法是通过将排列元素(例子中是li)的父层(例中ul)设置 letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;

郁闷小男人 发表于 2011-6-12 10:27 | 显示全部楼层
嗯这个效果不错.值得推荐.

能文能武 发表于 2011-6-12 10:27 | 显示全部楼层
这个用dl,dt,dd来做布局似乎更好一些吧。


芷馨 发表于 2011-8-8 10:21 | 显示全部楼层
一个个全都骑到老大头上来了...  
北大青鸟 发表于 2011-8-12 10:09 | 显示全部楼层
注:偶是女滴,千真万确,毋庸置疑!
broken 发表于 2011-8-15 09:12 | 显示全部楼层
我很喜欢,太精彩了
shmilyyu 发表于 2011-8-16 10:02 | 显示全部楼层
兄弟....表给偶丢丢哦....
愚人 发表于 2011-9-15 10:25 | 显示全部楼层
额~哦........偶无语
我是谁 发表于 2012-3-4 23:33 | 显示全部楼层
不错.............
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|手机版|网站帮助|职业IT人 ( 粤ICP备12053935号 )

GMT+8, 2019-3-21 13:47 , Processed in 0.157952 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2018 Comsenz Inc.

快速回复 返回顶部 返回列表