Zblog之SiteNav导航模板文章页添加表格

zblog教程 2020-09-02

张凯个人博客原创,介绍一下Zblog之SiteNav导航模板文章页添加表格,先看一下成功截图,可实现调用后台数据输出需要导航的网址信息,说白了就是一个简单的调用,这里仅介绍一下显示出这个样式的方法。

首先打开style目录下的main.css,在末尾添加表格样式:

  table {

  *border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

  }

  .zebra td, .zebra th {

  border-left: 1px solid #ccc;

  border-top: 1px solid #ccc;

  padding: 10px;

  text-align: left;

  }

  .zebra {

  border: solid #ccc 1px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;

  border-radius: 6px;

  -webkit-box-shadow: 0 1px 1px #ccc;

  -moz-box-shadow: 0 1px 1px #ccc;

  box-shadow: 0 1px 1px #ccc;

  }

  .zebra td, .zebra th {

  padding-left: 10px;

  }

  .zebra tbody tr:nth-child(even) {

  background: #f5f5f5;

  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

  -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;

  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

  }

  .zebrb td, .zebrb th {

  border-left: 1px solid #ccc;

  border-top: 1px solid #ccc;

  padding: 10px;

  text-align: center;

  }

  .zebrb {

  border: solid #ccc 1px;

  -moz-border-radius: 6px;

  -webkit-border-radius: 6px;

  border-radius: 6px;

  -webkit-box-shadow: 0 1px 1px #ccc;

  -moz-box-shadow: 0 1px 1px #ccc;

  box-shadow: 0 1px 1px #ccc;

  }

然后打开template目录下的文章内容页post-single.php,在您需要的位置放上一下代码。

评论 (0)
    Top