分享个 WordPress 文章中 CSS 列表项布局技巧

tengxunyun cera

熟悉的站长们都知道,对 CSS/JS 是“纯小白”水平,凡是涉及到 CSS/JS 的时候一般只会“复制”、“粘贴”而已,直至现在都是看到 CSS/JS 代码基本就“晕菜”了,估计这辈子没治了都!每次碰到 CSS/J 代码问题的时候,要不是放弃就是度娘、谷姐一番,找到了是万幸,找不到就放弃了。

最近需要给 WordPress 文章内添加一个『项目列表』,要求是每个项目的宽度未知且所有项目都在一个容器内,项目数量未知还需要可以在显示时排列整齐和自动换行以及自适应。经过一番谷姐蹂躏后中越算是找到了,进行了简单的修改后用到了文章中,效果还算满意,特分享出来!

将下面的 CSS 代码加入到 Begin 主题「定制风格」里:

/*列表项目:元素宽度未知,且所有元素都在一个容器*/
.new_wrapper {
width: 100%;
padding: 15px;
margin: 20px auto;

}
.new_container {
display: flex;
flex-wrap: wrap;
margin-bottom: -20px;
margin-right: -30px;
color: rgb(255, 255, 255);
}
.new_item {
display: inline-block;
margin-right: 30px;
margin-bottom: 20px;
padding: 5px 10px;
font-size: 20px;
border-radius: 5px / 5px;
background: rgb(103, 164, 243);
}
其中.new_wrapper 里面的width 赋值可以根据需要来自行调整,如果需要自适应就以百分比赋值,如果需要指定宽度就赋值像素值即可,其他参数都可以根据自己需要来调整。

然后在 WordPress 文中如果需要使用这个列表项目样式的时候,只需要参照如下格式再「源代码」模式里添加即可:

项目 12345
项目 ABCDEFS
项目 KLJLO
项目 lsielsielsie
项目 545744433
项目 8754323222
项目 009009089909889
项目 ABCDEFS
项目 KLJLO
项目 lsielsielsie
项目 545744433
项目 8754323222
项目 009009089909889

最后呈现的效果如下图所示:

至此,基本上是满足自己的需要了,有机会可以再研究美化一下的,不过重在解决问题嘛!能用就可以了!虽然不懂 CSS/JS,但还是比较喜欢收集和使用 CSS/JS 代码的,有些代码对博客文章也确实有美化的实用效果,对文章浏览体验提升有不少帮助!

cera aliyun tengxunyun cloudiplc

相关推荐

WordPress查询指定时间范围内最热门|评论最多文章

WordPress查询指定时间范围内最热门、评论最多文章仅仅靠WordPress提供的函数是不行的,我们需要按照自己的需求条件执行数据库查询才能获得对应数据,比如本站首页的热门讨论模块,就是采用了数据库查询的方式取得的文章数据。 这两天趁放假,将博客的主题功能优化了下,新增了一些功能,显示效果做了一些细节上的调节。大家可能发现了,我在首页新增了一个热门讨论模块。这个模块里显示的是一个月时间内的评论次数最多的文章,总共显示5篇,并按照评论数量从高到底排列。下面来看看具体怎么实现的,部分代码来自网友。 实现代码 将以下代码复制到你的主题目录下functions.php文件中。 /* 某段时间内评论最多最热文章*/ function most_comm_posts($days=7, $nums=5) { //$days参数限制时间值,单位为‘天’,默认是7天;$nums是要显示文章数量 global $wpdb; $today = date(“Y-m-d H:i:s”); //获取今天日期时间 $daysago = date( “Y-m-d H:i:s”, strtotime($today) – ($days * 24 * 60 * 60) ); //Today – $days $result = $wpdb->get_results(“SELECT comment_count, ID, post_title, post_date FROM $wpdb->posts WHERE post_date BETWEEN ‘$daysago’ AND ‘$today’ ORDER BY comment_count DESC …

WordPress分页代码实现WordPress文章列表分页

WordPress集成了自动分页功能,使用WordPress分页代码调用WordPress分页方法,就可以快速为WordPress文章列表分页,这个方法在WordPress仿站制作WordPress主题时非常有用。 WordPress自带的分页函数非常难看,不能看到页码,只能看到上一页下一页首页,用户体验极差。像大前端DUX主题这种带页码的分页方法就非常不错,不仅显示总共有多少页,而且还自动省略多余的页码,用户体验极佳,效果如本站的文章列表分页。 这种WordPress文章列表分页方法不仅可以随时回到首页,还会自动省略中间的页码,只显示用户所在位置附近的页码,还有上一页下一页以及总共多少页,可以说是把用户需要的条件都考虑进去了。 WordPress分页代码 function mo_paging() { $p = 3; if ( is_singular() ) return; global $wp_query, $paged; $max_page = $wp_query->max_num_pages; if ( $max_page == 1 ) return; echo ‘ ‘; if ( empty( $paged ) ) $paged = 1; echo ‘ ‘; previous_posts_link(‘上一页’); echo ‘ ‘; if ( $paged > $p + 1 ) …

WordPress主题XIU6.0分享

简介 XIU 主题是 themebetter 原创开发的一款基于 WordPress 程序的多功能主题,用过的朋友都知道,这个主题很有特色,这里就不多介绍了。 更新内容 新增全面支持百度熊掌号、粉丝关注、JSON_LD数据、文章实时推送、原创保护 新增首页热门排行显示在手机端(主题设置-首页) 新增首页SEO标题设置(主题设置-SEO) 新增去除底部版权说明的选项(主题设置-基本) 新增文章和页面内容分页时标题自动添加第几页 调整底部友情链接只在首页开启的时候首页分页中不显示 解决PHP7.2环境下主题设置中上传图片可能的报错问题 解决侧栏随动有可能存在的JS报错 移除多说头像获取方式 修复开启Debug后台有Notice提示 修复文章页内容底部的点赞打赏直达链接按钮组合错位   链接: https://pan.baidu.com/s/1Zxd-Yq84EGKwBwTU3hO04Q 提取码: 37ky  

17刀版|hosthatch|大盘鸡|测速分享

Stockholm: 瑞典,斯德哥尔摩 https://manage.hosthatch.com/billing/order/sto-2tb (storage) https://manage.hosthatch.com/billing/order/sto-2g (nvme) https://manage.hosthatch.com/billing/order/sto-8g (nvme) https://manage.hosthatch.com/billing/order/sto-16g (nvme) Los Angeles: 美国,洛杉矶 https://manage.hosthatch.com/billing/order/lax-2tb https://manage.hosthatch.com/billing/order/lax-10tb https://manage.hosthatch.com/billing/order/lax-nvme-16g https://manage.hosthatch.com/billing/order/lax-nvme-8g https://manage.hosthatch.com/billing/order/lax-nvme-2g Chicago: 美国,芝加哥 https://manage.hosthatch.com/billing/order/chi-2tb https://manage.hosthatch.com/billing/order/chi-10tb London: 英国,伦敦 https://manage.hosthatch.com/billing/order/lon-10tb Sydney: 澳大利亚,悉尼 https://manage.hosthatch.com/billing/order/syd-nvme-2g https://manage.hosthatch.com/billing/order/syd-nvme-8g https://manage.hosthatch.com/billing/order/syd-nvme-16g CPU模型:英特尔(R)至强(R)CPU E5-2690 V2 @ 3.00GHz 的核心数:1个 CPU频率:2999.996兆赫 总磁盘大小:246.2 GB(已使用26.2 GB) 内存总量:481 MB(已使用90 MB) 交换总量:511 MB(已使用28 MB) 系统正常运行时间:12天17小时3分钟 平均负载:0.14, 0.06,0.01 OS:Ubuntu 18.04.1 LTS Arch:x86_64(64 Bit) 内核:4.15.0-96-generic ———————— ———————————————- I / O速度(第一轮):378 MB …

微信扫一扫,分享到朋友圈

分享个 WordPress 文章中 CSS 列表项布局技巧