css列表及图片样式.doc

列表调用样式1 - 纯文本列表(c1)

纯文本列表只调用标题,适合标题比较长的列表形式,长度约为26个中文字符.
<ul class="c1 ico3">
  {dede:arclist row='8'}
    <li><a href="[field:arcurl /]">[field:title /]</a></li>
  {/dede:arclist}
</ul>

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个中文字符的长标题和短日期
<ul class="d1 ico3">
  {dede:arclist row='8'}
    <li><span class="date">[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
  {/dede:arclist}
</ul>

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个中文字符的长标题和短日期
<ul class="d2 ico3">
  {dede:arclist row='8'}
    <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
  {/dede:arclist}
</ul>

.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)

左侧调用图片,右侧调用文字标题列表
<ul class="e5">
    {dede:arclist row='2' type='image'}
    <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
    {/dede:arclist}
</ul>
<ul class="c1 ico3">
  {dede:arclist row='6'}
    <li><a href="[field:arcurl /]">[field:title /]</a></li>
  {/dede:arclist}
</ul>
.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)

上部调用图片,下部调用文字标题加长日期列表
<ul class="e6">
    {dede:arclist row='3'  type='image'}
    <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
    {/dede:arclist}
</ul>
<ul class="d2 ico3">
  {dede:arclist row='3'}
    <li><span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>
  {/dede:arclist}
</ul>

.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)

上部调用图片,下部调用两列文字列表
<ul class="e6">
    {dede:arclist row='3'  type='image'}
    <li><a href="[field:arcurl /]"><img src="[field:litpic _fcksavedurl=""[field:litpic" /]" /></a></li>
    {/dede:arclist}
</ul>
<ul class="c2 ico3">
  {dede:arclist row='6'}
    <li><a href="[field:arcurl /]">[field:title /]</a></li>
  {/dede:arclist}
</ul>

.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;
}

<div class="commend">
<dl class="tbox light">
<dt class='light'><strong>推荐内容</strong></dt>
<dd class='light'>
<ul class="d4">

{dede:arclist flag='c' titlelen=42 row=6}
<li><a href="[field:arcurl/]">[field:title/]</a>
<p>[field:description function='cn_substr(@me,80)'/]...</p>
</li>{/dede:arclist}
</ul>
</dd>
</dl>
</div>

.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;
}

<div class="productrange">
<dl class="tbox">
<dt><strong>推荐商品</strong></dt>
<dd>
<ul class="f1">
{dede:arclist flag='c' titlelen=42 row=8}
<li>
<a href="[field:arcurl/]">[field:title/]</a>
<span><small>好评:</small>[field:scores/]</span>
<span><small>人气:</small>[field:click/]</span>
</li>
{/dede:arclist}
</ul>
</dd>
</dl>
</div>
.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;
}

<div class="listbox">
<ul class="e2">
{dede:list pagesize='10'}
<li>
[field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}' class='preview'><img src='{@me['litpic']}'/></a>"); [/field:array]
[<b>[field:typelink/]</b>]
<a href="[field:arcurl/]" class="title">[field:title/]</a>
<span class="info">
<small>日期：</small>[field:pubdate function="GetDateTimeMK(@me)"/]
<small>点击：</small>[field:click/]
<small>好评：</small>[field:scores/]
</span>
<p class="intro">
[field:description/]...
</p>
</li>
{/dede:list}
</ul>
</div>

}
.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;
}

<div class="listbox">
<ul class="d5">
{dede:list pagesize='20'}
<li><a href="[field:arcurl/]" class="title">[field:title/]</a><span class="date">[field:pubdate function="GetDateTimeMK(@me)"/]</span></li>
{/dede:list}
</ul>
</div>
.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;
}

<div class="latestlogin"> <strong>最近登陆的会员</strong>
<ul class="e7">
{dede:memberlist row=6 signlen=30}
<li><a href="[field:spaceurl/]" target="_blank"><img src="[field:face/]" alt='[field:spacename/]' width="52" height="52" />[field:uname/]</a></li>
{/dede:memberlist}
</ul>
</div>
.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;
}

<div class="">
<dl class="tbox">
<dt><strong>热点图集</strong></dt>
<dd>
<ul class="e3">
{dede:arclist row='5' type='image.' orderby=click}
<li>
<a href="[field:arcurl/]" class="preview"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]"/></a>
<a href="[field:arcurl/]" class="title">[field:title/]</a>
<span class="intro">更新:[field:pubdate function="GetDateMK(@me)"/]</span>
</li>
{/dede:arclist}

</ul>
</dd>
</dl>
</div>

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;
}

<div class="mt1">
<dl class="tbox">
<dt><strong>推荐图集</strong></dt>
<dd>
<ul class="e9">
{dede:arclist row='8' type='mend.'}
<li><a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]"/><span class="title">[field:title/]</span></a></li>
{/dede:arclist}
</ul>
</dd>
</dl>
</div>

.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;
}

<div class="listbox">
<ul class="e8">
{dede:list pagesize='12'}
<li>
<a href="[field:arcurl/]" class="pic"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]"/></a>
<a href="[field:arcurl/]" class="title">[field:title/]</a>
<span class="date"><small>最后更新：</small>[field:pubdate function="GetDateMK(@me)"/]</span>
</li>
{/dede:list}
</ul>
</div>
.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;
}

<div>
<dl class="tbox">
<dt><strong>栏目列表</strong></dt>
<dd>
<ul class="d6">
{dede:channel type='son' currentstyle="<li><a href='~typelink~' class='thisclass'>~typename~</a></li>"}
<li><a href='[field:typeurl/]'>[field:typename/]</a></li>{/dede:channel}
</ul>
</dd>
</dl>
</div>
/*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;
}

<div class='sonnav'>
{dede:channel currentstyle="<span><a href='~typelink~' class='thisclass'>~typename~</a></span>"}
<span><a href='[field:typeurl/]'>[field:typename/]</a></span>{/dede:channel}
</div>

/*---------- 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;
}

<div class="onenews">
{dede:arclist flag='h' limit='0,1' infolen='230'}
<h2><a href="[field:arcurl/]">[field:ti