wordpress的7b2主题网址导航页面优化

原版导航不是很喜欢，搜了搜官网圈子里的各类教程，瞄到了胖子哥的美化，感觉甚合我意。

原教程地址：https://www.ourule.com/document/89.html

不过还有些要折腾的地方，于是就折腾了一下午……由于今天搞这个代码太累了，就线弄出来这些，感觉好像也没改啥。

下个版本想替换图标，比如热门啥都弄个小火苗，搞个页面背景，导航条一类，修改内页啥的，反正怎么好看怎么来吧。基本也是参考别人的了，自己也没啥审美。

由于我只玩网页端，手机端没有过多注意，而且很多地方需要你自己改，毕竟我是照着自己网站改的，可能跟你的会有出入，样式冲突等等，宽度大小啥的很可能要你去F12改。

所以着急正式用的大佬，还是等别的大佬搞个更好的吧，我的只能拿来玩玩。

上代码

此部分为子主题CSS部分代码（由于是编程小白，全程靠百度，所以写的比较辣鸡，勿喷）

/*导航页面*/
/*修改导航标题并且置顶*/
.links-home .b2-tab-links h1{
    padding-top:0px!important ;
    line-height: 80px;
}
/*让标题居中，然后删除右侧margin*/
.links-home h1{
    text-align: center;
    margin-right: 0px;
}
/*给标题加个logo*/
.h1-logo{
    width: 55px;
    height: 55px;
    float: left;
    margin-left: 27px;
    margin-top: 10px;
    
}
.h1-logo img {
    width: 100%;
    height: auto;
    
}
/*修改导航标题下面的统计样式*/
.link-total{
    margin-top: 15px;
    margin-right: 35px;
    font-weight: 600;                 
	font-size: 13px;                 
	font-family: "黑体";                 
	color: #8c888b;                 
	background: -webkit-linear-gradient(45deg, #1b4042, #5a3828, #5d5b54, #392b61, #1e324e);             
	color: transparent;                 
/*设置字体颜色透明*/                 
	-webkit-background-clip: text;
/*背景裁剪为文本形式*/
	animation: ran 30s linear infinite;
}
@keyframes ran {
	from {
		backgroud-position: 0 0;
	}
	to {
		background-position: 2000px 0;
	}
}
/*设置导航菜单样式*/
.b2-tab-links .toc-list{
    text-align: center;
    font-size: 16px;
}
.toc-list li:after {
  
  transition: 0.3s;
  content: "";
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.toc-list li:hover {
  cursor: pointer;
}
.toc-list li:hover:after {
  width: 100%;
  left: 0;
}
/*导航字体高度*/
.b2-tab-links a.toc-link{
    height: 40px;
    line-height: 40px;
    padding: 0px 50px;
}
.b2-tab-links .toc-list{
    margin-right: 0px;
}
/*申请入驻样式*/
.link-join{
    text-align: center;
    margin-right: 0px;
}
/*侧边置顶*/
.inner-wrapper-sticky{
  top:0px!important;  
  margin-top: 20px;
}
/*列表友链logo样式(暂不生效)*/
/*.link-img:hover {*/
/*	opacity: 1;*/
/*	filter: alpha(opacity=70);*/
/*	transition: all 0.2s linear;*/
/*	-moz-transition: all 0.2s linear;*/
/*	-o-transition: all 0.2s linear;*/
/*	-webkit-transition: all 0.2s linear;*/
/*	-webkit-transform: scale(1.12);*/
/*	-moz-transform: scale(1.12);*/
/*	-o-transform: scale(1.12);*/
/*	-m-transform: scale(1.12);*/
/*	transform: scale(1.12);*/
/*}*/
/*友情页面大图*/
.links-banner {
    position: absolute;
    left: 286px;
    margin: 10px 0;
    width: 82%;
}
.banner-img {
    width: 100%;
    
}
.banner-img img{
    width: 100%;
    height: 70px;
}
/*他胖子站代码https://www.ourule.com/document/89.html*/
/*导航页面更新*/
.archive .content-area.links-home{
	margin-top:-10px; 
}
.links-home .b2-tab-links{
	width:240px;
	background:#fff;
	border-top: 1px solid #f5f6f7;
}
.links-home .home-links-right{ 
	max-width:1545px;
	margin:110px auto 0;
}
 
.links-home .link-top h2{
	font-size:16px;
	line-height:1.5715;
	height:auto;
	font-weight:normal;
}
 
.links-home .link-desc{
	font-size:12px;
	color:rgba(0,0,0,0.45)
}
 
.links-home .link-img{
	width:70px;
	height:70px;
}
 
.links-home .link-in{
	border:1px solid #e3e8f0;
}
 
.links-home .link-box .cat-box{
	font-size:20px;
	font-weight:500;
	padding-left: 24px;
}
 
.links-home .link-title h2::before{
	width:8px;
	height:8px;
	border-radius:50%;
	border:2px solid var(--b2color);
	background:#fff;
	top:10px;
}
 
.links-home .link-title .link-more i{
	font-size:24px;
	font-weight:bold;
}
 
.links-home .link-title{
	padding:0 0 24px;
}
 
.links-home .b2-tab-links h1{
	font-size:24px;
	font-weight:500;
   padding-top:10px;
       box-shadow: 0px 1px 1px 0px rgba(17,58,93,.1);
      
}
 
 
 
 
 
/*手机模式下样式修复*/
@media screen and (min-width:768px) {
	.site .top-style .wrapper{
		width:100%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .link-box-0 .link-list li{
		width:25%
	}
}
 
 
@media (min-width:768px) and (max-width:992px) {
	
	.links-home .b2-tab-links{
		display:none
	}
}
 
/*平板式下样式修复*/
@media screen and (min-width:992px) {
	.site .top-style .wrapper{
		width:100%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .link-box-0 .link-list li{
		width:33.33333%
	}
}
 
/*小屏显示器模式下样式修复*/
@media screen and (min-width:1200px) {
	.site .top-style .wrapper{
		width:100%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .home-links-right{
		width:1040px;
	}
	.links-home .link-box-0 .link-list li{
		width:25%
	}
}
 
/*全尺寸显示器模式下样式修复*/
@media screen and (min-width:1480px) {
	.site .top-style .wrapper{
		width:95%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .home-links-right{
		width:100%;
	}
	.links-home .link-box-0 .link-list li{
		width:20%
	}
}
.b2-document-content .b2-single-content.wrapper{
    width: auto;
}
/*导航页面*/

主题原文件需要替换的Links文件

主题根目录下的archive-links.php文件，覆盖替换。（记得自己备份）：此文件内的回到首页部分，里面有个网址（www.xtuku.com）要改成自己的网站地址

主题/b2/Modules/Templates/Modules 目录下的links.php文件，覆盖替换。（记得自己备份）

并且需要在子主题的header.php或footer.php 引入 以下代码

完整代码如下（点击下方『运行代码』按钮可查看效果！可全选代码自行复制）

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

请下载替换文件