使用wordpress程序做網(wǎng)站時(shí)，我們通常通過(guò)動(dòng)態(tài)代碼去調(diào)用某個(gè)版塊的文章列表。這種文章列表一般是使用無(wú)序列表標(biāo)簽<ul>標(biāo)簽來(lái)排列的。但為了一些效果的需要，我們需要在調(diào)用的文章列表前面顯示一個(gè)編號(hào)。

在做網(wǎng)站時(shí)如何去顯示上面的自動(dòng)遞增的編號(hào)效果呢，這種效果我們可以用css3的 “nth-child 偽類(lèi)”以及“:before和:after偽類(lèi)” 來(lái)實(shí)現(xiàn)這樣的效果。（相關(guān)知識(shí)：CSS視頻教程）

方法一：CSS3給列表前插入項(xiàng)目序列編號(hào)

方法二：使用“:before和:after偽類(lèi)”遞增

1. 在要顯示文章列表的DIV中放入調(diào)用某個(gè)欄目下的文章列表的WORDPRESS代碼：

   
   <ul class="xwz_bh">
   
   <?php if (have_posts()) : ?>
   
   <?php query_posts('cat=1' . $mcatID. '&caller_get_posts=1&showposts=6'); ?>
   
   <?php while (have_posts()) : the_post(); ?>
   
   <a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
   
   <?php endwhile;?>
   
   <?php endif; wp_reset_query(); ?>
   
   
   
   </ul>
   
   

2. 以上的代碼就可以調(diào)用ID=1的分類(lèi)下的文章，并且調(diào)用文章的數(shù)量為6篇，這些參數(shù)可以根據(jù)自己的需要進(jìn)行設(shè)置。
3. 放一段控制文章列表編號(hào)的的CSS，將以下的CSS代碼放到網(wǎng)站的模板的style.css文件的最底部。

   
   .xwz_bh li{list-style:none;height:30px;line-height:30px;font-size:14px; margin-bottom:5px;}
   
   .xwz_bh li:before{ color:#fff; margin-right:5px; display:inline-block; width:30px; height:30px;border-radius:3px; text-align:center;}
   
   .xwz_bh li:nth-child(1):before{content:'1';background:red;}
   
   .xwz_bh li:nth-child(2):before{content:'2';background:red;}
   
   .xwz_bh li:nth-child(3):before{content:'3';background:red;}
   
   .xwz_bh li:nth-child(4):before{content:'4';background:green;}
   
   .xwz_bh li:nth-child(5):before{content:'5';background:green;}
   
   .xwz_bh li:nth-child(6):before{content:'6';background:green;}
   
   .xwz_bh li:nth-child(7):before{content:'7';background:green;}
   
   .xwz_bh li:nth-child(8):before{content:'8';background:green;}
   
   .xwz_bh li:nth-child(9):before{content:'9';background:green;}
   
   .xwz_bh li:nth-child(10):before{content:'10';background:green;}
   
   

4. 這樣通過(guò)“:before和:after偽類(lèi)”就可以在文章的列表的前面添加一些我們需要的內(nèi)容了，達(dá)到這種效果。

標(biāo)簽： isp 代碼 網(wǎng)站的模板

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。