織夢dede列表頁實現(xiàn)隔行_多行隨意換色_DedeCms教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
下面給大家分享一段代碼能讓織夢dede列表頁實現(xiàn)隔行_多行隨意換色,具體代碼如下
標簽說明:
標簽說明:
arclist 標簽下使用 [field:global.autoindex/] 默認從1開始
channel 標簽下使用 [field:global.autoindex/] 默認從0開始
channelartlist 標簽下使用 {dede:global.itemindex/} 默認從1開始
arclist 從0開始[field:global name=autoindex runphp="yes"]@me=@me-1;[/field:global]
channel 從1開始[field:global name=autoindex runphp="yes"]@me=@me+1;[/field:global][field:typename/]
channelartlist 從0開始{dede:global name=itemindex runphp='yes'}@me=@me-1;{/dede:global}
channelartlist 標簽下使用 {dede:global name='itemindex' runphp='yes'}@me;{/dede:global}
隔行換色(增加樣式),list同arclist
- <div>
- <ul>
- {dede:list pagesize='50'}
- <li>
- [field:global runphp='yes' name=autoindex]
- $a="<div id='a'>";
- $b="<div id='b'>";
- if ((@me%2)==0) @me=$a;
- else @me=$b;
- [/field:global]
- <span class="date">[[field:typelink/]][field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
- <a href="[field:arcurl /]">[field:title /]</a>
- </li>
- {/dede:list}
- </ul>
- </div>
如果運用channel弄隔行換色,需要自增從1開始,精簡寫法如下:
- <div>
- <ul>
- {dede:channel row=6 typeid=''}
- [field:global name=autoindex runphp="yes"]((@me+1) % 2 == 0)?@me="<li class=\"last\">":@me="<li>";[/field:global]
- <h4 class="title">[field:title/]</h4>
- </li>
- {/dede:channel}
- </ul>
- </div>
隔3行(n行)換色(增加樣式)精簡寫法,替換橙色字體部分
- <div>
- <ul>
- {dede:arclist row=6 typeid=''}
- [field:global name=autoindex runphp="yes"](@me % 3 == 0)?@me="<li class=\"last\">":@me="<li>";[/field:global]
- <h4 class="title">[field:title/]</h4>
- </li>
- {/dede:arclist}
- </ul>
- </div>
多行隨意換色(增加樣式)
如果想隨機生成彩色/樣式,可以參考文章《dede優(yōu)化方法整理之:tag標簽》
- <div>
- <ul>
- {dede:arclist typeid='8' row='6' orderby='weight'}
- [field:global runphp='yes' name=autoindex]
- $a="<li class='gd1'>";
- $b="<li class='gd2'>";
- $c="<li class='gd3'>";
- $d="<li class='gd4'>";
- $e="<li class='gd5'>";
- $f="<li class='gd6'>";
- if ((@me/1)==1) @me=$a; <!--調(diào)用的<li>次數(shù)(第一次調(diào)用)能被1整除,則該<li>對應$a的class='gd_1'-->
- else if ((@me/2)==1) @me=$b;<!--調(diào)用的<li>次數(shù)(第二次調(diào)用)能被2整除,則該<li>對應$b的class='gd_2'-->
- else if ((@me/3)==1) @me=$c;<!--調(diào)用的<li>次數(shù)(第三次調(diào)用)能被3整除,則該<li>對應$c的class='gd_3'-->
- else if ((@me/4)==1) @me=$d;<!--調(diào)用的<li>次數(shù)(第四次調(diào)用)能被4整除,則該<li>對應$d的class='gd_4'-->
- else if ((@me/5)==1) @me=$e;<!--調(diào)用的<li>次數(shù)(第五次調(diào)用)能被5整除,則該<li>對應$e的class='gd_5'-->
- else if ((@me/6)==1) @me=$f;<!--調(diào)用的<li>次數(shù)(第六次調(diào)用)能被6整除,則該<li>對應$f的class='gd_6'-->
- [/field:global]
- <div class="gdbox">
- <a href="[field:arcurl/]"><img src="[field:litpic/]" width="" height="" alt='[field:title function='html2text(@me)/][field:spacename/]' /></a>
- <p><a href='[field:arcurl/]'>[field:title/]</a></p>
- </div>
- </li>
- {/dede:arclist}
- </ul>
- </div>
精簡寫法
- <div>
- <ul>
- {dede:arclist row=6 typeid=''}
- <li class=gd_[field:global.autoindex]>
- <h4 class="title">[field:title/]</h4>
- </li>
- {/dede:arclist}
- </ul>
- </div>
- 公共css樣式部分
- 這里注意每張圖的在調(diào)用的時候width和height可以為空,如果是或者亂填都沒關系,靠樣式進行定義。
- <style type="text/css">
- .gd1{width:750px;height:330px}
- .gd2{width:370px;height:165px}
- .gd3{width:185px;height:165px}
- .gd4{width:185px;height:165px}
- .gd5{width:335px;height:247px}
- .gd6{width:335px;height:247px}
- .gd1 img{width:750px;height:330px}
- .gd2 img{width:370px;height:165px}
- .gd3 img{width:185px;height:165px}
- .gd4 img{width:186px;height:165px}
- .gd5 img{width:335px;height:247px}
- .gd6 img{width:335px;height:247px}
- </style>
僅供大家學習參考,趕緊嘗試一下吧。
相關DedeCms教程:
- 織夢dedecms首頁調(diào)用縮略圖為背景
- dedecms織夢模板任意調(diào)用會員信息的函數(shù)教程
- dedecms快速批量刪除TAG標簽
- dedecms模板最新文章圖片的flash調(diào)用源代碼
- 更改data目錄名稱也可讓dedecms更安全
- 織夢dede使用sql命令批量刪除關鍵字
- DEDECMS自動內(nèi)鏈生成解決方法--DEDE關鍵字內(nèi)鏈
- dedecms在plus目錄調(diào)用當前模板head.htm,footer.htm方法
- 織夢dedecms增加英文欄目名稱
- 織夢CMS5.7SP1的TAGS字數(shù)怎么改長?
- dede首頁調(diào)用文章標題|概述|所在欄目
- 默認隱藏部分內(nèi)容,點擊展開更多JS代碼
DedeCms教程教程Rss訂閱Cms教程搜索
DedeCms教程推薦
- DedeCMS 目錄權(quán)限安全設置說明文檔
- 織夢dedeCMS二次開發(fā)文檔手冊,文件詳解以及數(shù)據(jù)庫結(jié)構(gòu)字
- DedeCms 萬能安全防護代碼
- DedeCms教程:優(yōu)化DedeCMS搜索結(jié)果
- 一種很酷的時間效果
- DedeCms教程:Linux+Apache+PHP+MySQL服務器環(huán)境(CentOS篇)
- 織夢內(nèi)容管理系統(tǒng)V3(DedeCms V3)簡介
- 織夢網(wǎng)站系統(tǒng)添加迅雷專用鏈接(視頻教程)
- DedeCms教程:DedeCMS站點高級安全策略(Linux篇)
- 織夢DedeCMS模板可以使用的公共函數(shù)集合
猜你也喜歡看這些
- 織夢html5品牌公司企業(yè)集團網(wǎng)站模板(帶測試數(shù)據(jù))
- 織夢CMS紅灰色大氣網(wǎng)絡工作室網(wǎng)站模板
- 織夢模板養(yǎng)生資訊,帶數(shù)據(jù),SEO優(yōu)化
- 響應式生物科技醫(yī)療行業(yè)網(wǎng)站模板
- 織夢dedecms電子數(shù)碼產(chǎn)品/移動充電器企業(yè)網(wǎng)站模板 帶圖集功能
- dedecms 紅藍風格機械類企業(yè)網(wǎng)站模板
- dedecms生態(tài)園林公司企業(yè)網(wǎng)站模板
- dede婚紗攝影藝術照兒童寫真工作室通用織夢模板
- dedecms紅色企業(yè)網(wǎng)站模板(產(chǎn)品展示)
- dedecms模板機械企業(yè)模板 黑紅色
。