您的位置:
首页 >> 帮助 >> 高级教程 >> 浏览文章
售后联系QQ:25014998 联系QQ:1007153526
QQ群:62660420 24741759 79010434 33855915(500人)
邮箱:Art2008_cms@163.com

使用图文并茂标签设置个性的列表效果

来源:hj0120 | 作者:管理员 | 发布时间:2011-04-29 | 访问数:

我们可以通过标签辅助工具中的图文并茂标签打造各种新式的列表显示效果;

 

一、个性的头条效果(如图)

   设置方法:

  注意:如果第一条设定了图片标题,系统会自动显示图片标题!

CSS代码
  1. .toutiao{text-align:center;}   
  2. .toutiao a{ FONT-WEIGHT: 700; FONT-SIZE: 32px; COLOR: #08114c; FONT-FAMILY: "黑体"; LETTER-SPACING: -2px}   
  3. .topnews{text-indent:0pxpadding-left:20px;}   
  4. .topnews A {FONT-SIZE: 14px; COLOR: #004181; LINE-HEIGHT: 22px}   

 

 二、个性的图文并茂列表 (如图)

 

 

CSS代码
  1. .list01 {margin-top:5px;}   
  2. .list01 li{line-height:24px; BACKGROUND: url(../CusImage/point.gif) no-repeat left 10pxpadding-left:10px;margin-left:10pxmargin-right:10px}   
  3. .list01 a{font-size:14px;color:#005599;}   
  4. .list01 img{border:#D8D8D8 1px solid;padding:2px;}   
  5. .list01 .NewsInfo_tab { border-bottom:1px dashed #999999margin-bottom:5px;text-align:left}   
  6. .list01 .NewsInfo_tab li{BACKGROUND:; padding-left:0pxoverflow:hidden;margin-left:0px; }   
  7. .list01 .NewsInfo_tab li .NewsInfo_title{ font-weight:bold}   
  8. .list01 .NewsInfo_title { float:left}   
  9. .list01 .NewsInfo_time{ float:rightright;color:#666}   
  10. ..list01.NewsInfo{ text-align:center;}   

 

使用标签辅助工具设定不同参数,配合css样式,可以做出非常多的效果,大家可以在使用中灵活运用,多多实践。

 

0% (0)
0% (0)

没有相关信息