CSS列表和图片样式

opendoc001 贡献于2014-07-10

作者 wzl  创建于2010-10-31 09:17:00   修改者wzl  修改于2010-10-31 10:48:00字数14842

文档摘要:CSS列表和图片样式
关键词:

列表调用样式1 - 纯文本列表(c1) 纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符. css样式: /*---------- c : 纯文本列表 ---------*/ .c1{/* 纯文本链接列表 */ padding:4px 0px; clear:right; } .c1 li{ height:27px; line-height:27px; overflow:hidden; padding-left:16px; background:url(../images/ico-2.gif) 7px 11px no-repeat; } .c1 a{ color:#585858; } .c2{/* 水平切分的两列纯文本链接列表 */ width:100%; padding:4px 0px; overflow:hidden; clear:both; } .c2 li{ width:44%; margin-right:1%; float:left; height:27px; line-height:27px; overflow:hidden; padding-left:16px; background:url(../images/ico-2.gif) 7px 11px no-repeat; } 列表调用样式2 - 带日期的长标题列表(d1) 可以调用23个中文字符的长标题和短日期
      {dede:arclist row='8'}     
  • [field:pubdate function="MyDate('m-d',@me)"/][field:title /]
  •   {/dede:arclist}
css样式: .d1{/* 前置时间日期的小列表 */ padding:4px 0px; } .d1 li{ height:27px; line-height:27px; overflow:hidden; } .d1 li span{ color:#ABA9A2; margin-right:5px; float:left; } .d1 li a{ } 列表调用样式3 - 带日期的短标题列表(d2) 可以调用19个中文字符的长标题和短日期
      {dede:arclist row='8'}     
  • [field:pubdate function="MyDate('Y-m-d',@me)"/][field:title /]
  •   {/dede:arclist}
.d2{/* 后置时间日期的小列表 */ padding:4px 0px; } .d2 li{ height:27px; line-height:27px; overflow:hidden; } .d2 li span{ color:#777; float:right; padding-right:10px; margin-left:10px; } .d2 li a{ overflow:hidden; } 列表调用样式4 - 图文混排列表1(e5,c1) 左侧调用图片,右侧调用文字标题列表
        {dede:arclist row='2' type='image'}     
  •     {/dede:arclist}
.e5{/* 竖排小图列表 102*70 (仅供首页图文混排列表使用) */ padding-left:8px; width:112px; float:left; font-size:0px; line-height:0px; } .e5 li{ display:block; width:104px; overflow:hidden; padding-top:8px; } .c1{/* 纯文本链接列表 */ padding:4px 0px; clear:right; } .c1 li{ height:27px; line-height:27px; overflow:hidden; padding-left:16px; background:url(../images/ico-2.gif) 7px 11px no-repeat; } .c1 a{ color:#585858; } 列表调用样式5 - 图文混排列表2(e6,d2) 上部调用图片,下部调用文字标题加长日期列表
        {dede:arclist row='3'  type='image'}     
  •     {/dede:arclist}
      {dede:arclist row='3'}     
  • [field:pubdate function="MyDate('Y-m-d',@me)"/][field:title /]
  •   {/dede:arclist}
.e6{/* 横排小图列表 102*70 (仅供首页图文混排列表使用) */ height:81px; padding-left:6px; clear:both; overflow:hidden; } .e6 li{ display:block; width:104px; padding-top:8px; padding-right:8px; overflow:hidden; float:left; } .e5 li a,.e6 li a{ width:102px; height:70px; overflow:hidden; display:block; border:1px solid #676767; } .e5 li a img,.e6 li a img{ display:block; width:102px; height:70px; } .e5 li a:hover,.e6 li a:hover{ border:1px solid #333; } .d2{/* 后置时间日期的小列表 */ padding:4px 0px; } .d2 li{ height:27px; line-height:27px; overflow:hidden; } .d2 li span{ color:#777; float:right; padding-right:10px; margin-left:10px; } .d2 li a{ overflow:hidden; } 列表调用样式6 - 图文混排列表3(e6,c2) 上部调用图片,下部调用两列文字列表
        {dede:arclist row='3'  type='image'}     
  •     {/dede:arclist}
.e6{/* 横排小图列表 102*70 (仅供首页图文混排列表使用) */ height:81px; padding-left:6px; clear:both; overflow:hidden; } .e6 li{ display:block; width:104px; padding-top:8px; padding-right:8px; overflow:hidden; float:left; } .e5 li a,.e6 li a{ width:102px; height:70px; overflow:hidden; display:block; border:1px solid #676767; } .e5 li a img,.e6 li a img{ display:block; width:102px; height:70px; } .e5 li a:hover,.e6 li a:hover{ border:1px solid #333; } .c2{/* 水平切分的两列纯文本链接列表 */ width:100%; padding:4px 0px; overflow:hidden; clear:both; } .c2 li{ width:44%; margin-right:1%; float:left; height:27px; line-height:27px; overflow:hidden; padding-left:16px; background:url(../images/ico-2.gif) 7px 11px no-repeat; }
推荐内容
    {dede:arclist flag='c' titlelen=42 row=6}
  • [field:title/]

    [field:description function='cn_substr(@me,80)'/]...

  • {/dede:arclist}
.d4{/*带内容简介的小列表*/ padding:0px 0px; } .d4 li{ padding:4px 8px; overflow:hidden; } .d4 li a{ display:block; line-height:23px; overflow:hidden; text-indent:14px; background:url(../images/ico-3.gif) 4px 9px no-repeat; } .d4 li p{ color:#888; line-height:17px; height:33px; overflow:hidden; }
推荐商品
    {dede:arclist flag='c' titlelen=42 row=8}
  • [field:title/] 好评:[field:scores/] 人气:[field:click/]
  • {/dede:arclist}
.f1{/* 带数字ICO的排行榜列表 */ background:url(../images/number-range.gif) 5px 5px no-repeat; overflow:hidden; } .f1 li{ height:38px; display:block; padding:3px 0px 4px 0px;; border-bottom:1px dashed #DCEBD7; padding-left:38px; overflow:hidden; } .f1 li a{ height:21px; line-height:21px; overflow:hidden; display:block; } .f1 li span{ line-height:15px; color:#666666; margin-left:5px; } .f1 li span small{ font-size:12px; color:#999; } .f1 li span a{ display:inline; line-height:15px; color:#666666; color:#690; }
    {dede:list pagesize='10'}
  • [field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : ""); [/field:array] [[field:typelink/]] [field:title/] 日期:[field:pubdate function="GetDateTimeMK(@me)"/] 点击:[field:click/] 好评:[field:scores/]

    [field:description/]...

  • {/dede:list}
} .e2 li{ width:100%; overflow:hidden; clear:both; padding:12px 0px; border-bottom:1px solid #EEE; color:#aaa; } .e2 li b a{ color:#555; } .e2 li a.preview{ width:84px; float:left; margin-right:7px; margin-bottom:3px; margin-left:10px; display:inline; } .e2 li a.preview img{ width:80px; /*height:60px;*/ display:block; padding:1px; border:1px solid #EEE; } .e2 li a.preview:hover img{ border:1px solid #AAA; } .e2 li a.title{ overflow:hidden; line-height:25px; font-weight:bold; font-size:14px; margin-left:2px; } .e2 span.info{ display:block; line-height:23px; color:#555; padding-left:12px; } .e2 span.info small{ color:#AAA; font-size:12px; margin-left:3px; } .e2 span.info a{ color:#690; } .e2 p.intro{ color:#776955; line-height:20px; margin-left:5px; padding-left:10px; padding-right:10px; }
    {dede:list pagesize='20'}
  • [field:title/][field:pubdate function="GetDateTimeMK(@me)"/]
  • {/dede:list}
.d5{/* 后置时间日期的大列表 */ padding:8px; border-bottom:1px solid #EEE; } .d5 li{ height:41px; line-height:41px; background:url(../images/ico-2.gif) 2px 17px no-repeat; padding-left:16px; } .d5 li a{ font-size:14px; } .d5 li span{ margin-left:10px; color:#777; }
最近登陆的会员
    {dede:memberlist row=6 signlen=30}
  • [field:spacename/][field:uname/]
  • {/dede:memberlist}
.index .latestlogin{ padding-top:16px; } .index .latestlogin strong{ width:102px; padding-left:6px; letter-spacing:1px; color:#555; display:block; line-height:21px; background:#FFF; position:relative; z-index:5; } .index .latestlogin ul{ width:224px; border-top:1px solid #DDDDDD; padding-top:20px; z-index:3; margin:-12px auto 0px; } */ clear:both; overflow:hidden; } .e7 li{ width:60px; height:86px; float:left; overflow:hidden; padding-left:11px; } .e7 li a{ display:block; margin:0px auto; text-align:center; } .e7 li a img{ width:52px; height:52px; display:block; margin:0px auto 6px; padding:2px; border:1px solid #DDD; } .e7 li a:hover img{ border:1px solid #AAA; }
热点图集
    {dede:arclist row='5' type='image.' orderby=click}
  • [field:title function='html2text(@me)'/] [field:title/] 更新:[field:pubdate function="GetDateMK(@me)"/]
  • {/dede:arclist}
clear:both; overflow:hidden; } .e3 li{ height:50px; overflow:hidden; padding:6px; border-bottom:1px dashed #DCEBD7; } .e3 li a.preview{ width:58px; height:48px; float:left; display:block; margin-right:6px; overflow:hidden; } .e3 li a.preview img{ width:58px; height:48px; } .e3 li a.title{ height:21px; display:block; line-height:21px; overflow:hidden; } .e3 li .intro{ color:#777; display:block; float:left; line-height:23px; }
推荐图集
    {dede:arclist row='8' type='image.commend.'}
  • [field:title function='html2text(@me)'/][field:title/]
  • {/dede:arclist}
.e9{/* 右侧小图列表 */ width:100%; clear:both; overflow:hidden; padding-top:4px; } .e9 li{ width:106px; height:110px; float:left; text-align:center; overflow:hidden; margin-left:6px; display:inline; } .e9 li a{ color:#777; } .e9 li a img{ width:102px; height:76px; display:block; padding:1px; border:1px solid #DDD; } .e9 li a span.title{ display:block; height:29px; line-height:29px; overflow:hidden; }
    {dede:list pagesize='12'}
  • [field:title function='html2text(@me)'/] [field:title/] 最后更新:[field:pubdate function="GetDateMK(@me)"/]
  • {/dede:list}
.e8{/*图集列表专用大图列表*/ width:100%; overflow:hidden; clear:both; margin-left:12px; margin-top:16px; } .e8 li{ width:168px; height:184px; float:left; display:block; overflow:hidden; margin-right:8px; text-align:center; } .e8 li .pic{ width:160px; height:120px; display:block; background:url(../images/picbox-listbg.gif) no-repeat; text-align:left; overflow:hidden; } .e8 li .pic img{ width:152px; height:112px; display:block; margin-left:3px; margin-top:3px; border:none; } .e8 li .title{ height:31px; display:block; line-height:31px; font-weight:bold; overflow:hidden; } .e8 li .date{ color:#666; } .e8 li .date small{ line-height:17px; font-size:12px; color:#999; }
栏目列表
/*list_nav ------------------*/ .d6{ width:100%; overflow:hidden; padding-bottom:6px; clear:both; display:inherit; } .d6 li{ float:left; margin:6px 0 1px 8px; display:inline; } .d6 li a{ width:87px; padding-left:20px; height:26px; line-height:26px; display:block; background:url(../images/green_skin.png) -42px -222px no-repeat; color:#316301; } .d6 li a:hover{ text-decoration:none; } .d6 li a.thisclass{ background:url(../images/green_skin.png) -42px -249px no-repeat; }
{dede:channel currentstyle="~typename~"} [field:typename/]{/dede:channel}
/*---------- frame : channel-nav ---------*/ .channel-nav { margin-top:8px; padding-left:6px; height:24px; width:950px; overflow:hidden; } .channel-nav .sonnav { width:830px; line-height:26px; float:left; color:#256DB1; } .channel-nav .sonnav span { margin-right:10px; float:left; } .channel-nav .sonnav span a{ padding:0 4px; border:1px solid #BADAA1; height:22px; line-height:21px; background:url(../images/channel_bg.png) repeat-x; display:inline-block; } .channel-nav .sonnav span a.thisclass{ border:1px solid #3aa21b; } .channel-nav .sonnav a { color:#428C5B; text-decoration:none; } .channel-nav .sonnav a:hover{ color:#287212; }
{dede:arclist flag='h' limit='0,1' infolen='230'}

[field:title/]

[field:info/]...[查看全文]

{/dede:arclist}
Css样式: .index .bignews{ width:424px; height:400px; float:right; border:1px solid #BADAA1; overflow:hidden; } .index .bignews a{ color:#555; } .index .bignews .onenews{ margin:0 3px 0 3px; padding:7px 6px; border-bottom:1px dashed #EBEBEB; } .index .bignews .onenews h2{ text-align:center; display:block; height:32px; line-height:28px; } .index .bignews .onenews h2 a{ font-size:16px; } .index .bignews .onenews p{ line-height:19px; color:#666; }
{dede:channelartlist}
{dede:field name='typename'/}更多...
    {dede:arclist titlelen='60' row='8'}
  • [field:pubdate function="MyDate('m-d',@me)"/][field:title /]
  • {/dede:arclist}
{/dede:channelartlist}
width:720px; overflow:hidden; float:left; clear:both; overflow:hidden; } .channel .listbox dl{ width:352px; margin-right:8px; margin-top:8px; float:left; } .channel .listbox ul a{ color:#666; } .tbox{ margin:0 0 8px 0; border-bottom:1px solid #BADAA1; overflow:hidden; background:url(../images/green_skin.png) 0 -294px repeat-x; } .tbox dt{ height:24px; border:1px solid #BADAA1; overflow:hidden; clear:both; } .tbox dd{ border-left:1px solid #BADAA1; border-right:1px solid #BADAA1; /*padding:4px 4px 0px;*/ overflow:hidden; } .tbox dt strong{ height:24px; line-height:24px; !important;line-height:25px; padding-left:8px; padding-right:4px; display:block; float:left; color:#316301; letter-spacing:1px; } .tbox dt strong a{ color:#316301; } .tbox dt strong a:hover{ color:#596F37; text-decoration:none; } .tbox dt span.more{ float:right; position:relative; line-height:25px; padding-right:8px; color:#596F37; } .tbox dt span.more a{ color:#596F37; text-decoration:none; } .tbox dt span.more a:hover{ color:#ff3333; text-decoration:underline; } .tbox dt span.label{ height:25px; float:right; overflow:hidden; padding-right:1px; padding-top:2px; } .tbox dt span.label a{ height:26px; display:block; padding:0px 7px 0px 8px; line-height:26px; border-left:1px solid #BADAA1; float:left; color:#666; text-decoration:none; overflow:hidden; letter-spacing:1px; } .tbox dt span.label a:hover{ color:#360; } .tbox dt span.label a.thisclass{ background:#FFF; color:#333; border-top:3px solid #BADAA1; } .f4{/*友情链接(图片)专用*/ }.f4 li{ width:94px; height:37px; display:block; float:left; overflow:hidden; margin:10px 12px 2px 8px; } .f4 li a{ width:88px; height:31px; overflow:hidden; float:left; border:3px solid #FFF; } .f4 li a:hover{ border:3px solid #EEE; } .f5{/*友情链接(文字)专用*/ width:100%; overflow:hidden; clear:both; padding-bottom:10px; } .f5 li{ float:left; line-height:14px; padding:8px 10px 0px; white-space:nowrap; } .f5 li a{ color:#666666; float:left; } .f6{/* 链接横排自适应列表 */ width:100%; overflow:hidden; clear:both; padding-bottom:10px; } .f6 li{ float:left; line-height:14px; padding:8px 10px 0px; white-space:nowrap; } .f6 li a{ color:#666666; float:left; }

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 5 金币 [ 分享文档获得金币 ] 1 人已下载

下载文档