Zblog之SiteNav导航模板文章页添加表格
深山的鹿博客原创,介绍一下Zblog之SiteNav导航模板文章页添加表格,先看一下成功截图,可实现调用后台数据输出需要导航的网址信息,说白了就是一个简单的调用,这里仅介绍一下显示出这个样式的方法。
首先打开style目录下的main.css,在末尾添加表格样式:
table { *border-collapse: collapse; /* IE7 and lower */ 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,在您需要的位置放上一下代码:
<div class="zebra" > <table cellspacing="0" cellpadding="5" align="center" interlaced="disabled"> <tbody> <tr class="firstRow"> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 网站名称 </td> <td width="646" valign="top" style=" word-break: break-all;"></td> </tr> <tr> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 网站域名 </td> <td width="646" valign="top" style=" word-break: break-all;"> {$article.Metas.alink} </td> </tr> <tr> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 网站说明 </td> <td width="646" valign="top" style=" word-break: break-all;"></td> </tr> <tr> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 网站导航 </td> <td width="646" valign="top" style=" word-break: break-all;"></td> </tr> <tr> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 站长邮箱 </td> <td width="650" valign="top" style=" word-break: break-all;"></td> </tr> <tr> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 联系Q Q </td> <td width="646" valign="top" style=" word-break: break-all;"></td> </tr> <tr> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 收录时间 </td> <td width="650" valign="top" style=" word-break: break-all;"> {$article.Metas.time} </td> </tr> <tr> <td width="200" valign="middle" style=" word-break: break-all;" align="center"> 用户评论 </td> <td width="700" valign="top" style=" word-break: break-all;"></td> </tr> </tbody> </table> </div> <p> </p> <div class="zebrb" > <table cellspacing="0" cellpadding="10" align="center" interlaced="enabled"> <tbody> <tr class="ue-table-interlace-color-single firstRow"> <td width="294" valign="middle" style=" word-break: break-all;background-color: #f5f5f5" align="center"> 站长之家综合查询 </td> <td width="294" valign="middle" style=" word-break: break-all;" align="center"> 百度Site一下 </td> <td width="294" valign="middle" style=" word-break: break-all;background-color: #f5f5f5" align="center"> 爱站网综合查询 </td> </tr> </tbody> </table> </div>