免费《新手做网站视频教程》,在线观看,如果你想从零开始自己做网站,点击开始吧!

WordPress主题制作:文章内容页 之 编号列表

  1. 首页
  2. »
  3. 图文教程
  4. »
  5. WordPress建站教程
  6. »
  7. WordPress主题制作:文章内容页 之 编号列表

文章目录

视频教程


WordPress主题制作开发中,文章内容页也是非常重要的页面之一。对于内容页的美化也是WordPress主题开发者必会的知识点。

新制作WordPress主题,如果我们没有对文章内容页的CSS样式做特别设定,默认效果如下:

显然和网站主题很不搭配并且上述的编号列表功能也没有实现。下面学做网站网教大家如果美化自定义WordPress主题文章内容页的编号列表功能。

首先应该先了解基本的CSS知识,我们本节需要代码的一些小知识,如果你不会代码那也没有关系,可以继续往下看,本小节不难。

 

CSS样式分析

新制作的WordPress主题,对于文章内容页的编号列表是没有任何样式的:

编号列表不显示的根本原因是由于我们的li标签被添加了 list-style 属性。尝试去除,发现列表前面的小圆圈出现了——这是CSS无序列表自带显示的默认样式。

为了保持与内容页CSS风格的统一,我们希望颜色与上面的灰色一致,并且大小也一样。

查看上面任意一行字体样式:

最主要的两个属性——颜色和大小:

color: #636b6f;

font-size: 15px;

添加到下面的列表CSS样式中,还可以添加一个margin-left属性让列表的内容边距增大一些:

现在我们就完成了文章内容页编号列表样式的小小修改。

推荐阅读

联系我