代码如下:
<h4><i class="fa fa-window-minimize fa-rotate-90"></i>热门排行榜</h4>
<ul id="work_list_hot">
<?php
query_posts('cat=2&showposts=10&child_of=0&orderby=meta_value_num&meta_key=views');
while(have_posts()): the_post();
?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title();?>"><?php the_title();?></a></li>
<?php endwhile; ?>
</ul>
样式如下:
div.work_hot_list h4 {
font-weight: bold;
line-height: 25px;
margin-bottom: 1em;
display: flex;
align-items: Center;
}
ul#work_list_hot {
list-style-type: none;
counter-reset: sectioncounter;
}
ul#work_list_hot li {
margin-bottom: 1em;
display: flex;
align-items: Center;
}
ul#work_list_hot li:before {
content: counter(sectioncounter);
counter-increment: sectioncounter;
background: #ffa100;
width: 20px;
height: 20px;
border-radius: 10px;
margin: 0;
padding: 0;
float: left;
margin-right: 10px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: Center;
}
.et_pb_widget a {
color: #666;
text-decoration: none;
}
前端显示模式如下:
评论