视频教程
WordPress主题制作开发中,文章内容页也是非常重要的页面之一。对于内容页的美化也是WordPress主题开发者必会的知识点。
新制作WordPress主题,如果我们没有对文章内容页的CSS样式做特别设定,默认效果如下:
显然和网站主题很不搭配并且上述的编号列表功能也没有实现。下面学做网站网教大家如果美化自定义WordPress主题文章内容页的编号列表功能。
首先应该先了解基本的CSS知识,我们本节需要代码的一些小知识,如果你不会代码那也没有关系,可以继续往下看,本小节不难。
CSS样式分析
新制作的WordPress主题,对于文章内容页的编号列表是没有任何样式的:
编号列表不显示的根本原因是由于我们的li标签被添加了 list-style 属性。尝试去除,发现列表前面的小圆圈出现了——这是CSS无序列表自带显示的默认样式。
为了保持与内容页CSS风格的统一,我们希望颜色与上面的灰色一致,并且大小也一样。
查看上面任意一行字体样式:
最主要的两个属性——颜色和大小:
color: #636b6f;
font-size: 15px;
添加到下面的列表CSS样式中,还可以添加一个margin-left属性让列表的内容边距增大一些:
现在我们就完成了文章内容页编号列表样式的小小修改。