• 柒比贰简单首页UI美化教程

效果图：

修改步骤：

1、修改php文件

位置：/wp-content/themes/seven/inc/functions-templates.php

大概在360行左右（因为我修改过其他的）找到以下代码，放到他的后面就行，具体看图

PHP代码：

<div class="hh_fenlei01">
            <div class="hh_fenlei01_warp"> 
          <ul class="hh_fenleilist">
          <li class="hh_fenleilist1"><a href="#"><i class="hh_fenleilist1_left"></i><div class="hh_fenleilist_right"><h3>广告设计</h3><h4>广告设计频道专题</h4></a></li>
           <li class="hh_fenleilist2"><a href="#"><i class="hh_fenleilist2_left"></i><div class="hh_fenleilist_right"><h3>样机场景</h3><h4>各类样机场景下载</h4></a></li>
            <li class="hh_fenleilist3"><a href="#"><i class="hh_fenleilist3_left"></i><div class="hh_fenleilist_right"><h3>UI模板</h3><h4>国外整套素材打包下载</h4></a></li>
             <li class="hh_fenleilist4"><a href="#"><i class="hh_fenleilist4_left"></i><div class="hh_fenleilist_right"><h3>办公文档</h3><h4>快速完成老板交代的工作</h4></a></li>
          </ul>
        </div>
      </div>
      
     <div class="hh_fenlei02">
<div class="hh_fenlei02_warp">
<ul class="hh_home_tags_3">
<li class="hh_home_tags_3_list1 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#"><i class="sj sjicon_new_recruit"></i>广告专题</a></li>
<li><a href="#"><i class="sj sjicon_new_recruit"></i>样机专题</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list2 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">广告海报</a></li>
<li><a href="#">手机样机</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list3 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">印刷打印</a></li>
<li><a href="#">电脑样机</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list1 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#"><i class="sj sjicon_new_recruit"></i>ui模板</a></li>
<li><a href="#"><i class="sj sjicon_new_recruit"></i>办公文档</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list2 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">UI模板</a></li>
<li><a href="#">ppt</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list3 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">APP模板</a></li>
<li><a href="#">简历模板</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list1 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#"><i class="sj sjicon_new_recruit"></i>视频音乐</a></li>
<li><a href="#"><i class="sj sjicon_new_recruit"></i>网站设计</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list2 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">AE模板</a></li>
<li><a href="#">banner</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list3 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">音乐素材</a></li>
<li><a href="#">注册登录</a></li>
</ul>
</li>
</ul>
<ul class="hh_home_tags_4">
<li class="hh_home_tags_3_list1 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#"><i class="sj sjicon_new_recruit"></i>图标插画</a></li>
<li><a href="#"><i class="sj sjicon_new_recruit"></i>设计工具</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list3 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">图标素材</a></li>
<li><a href="#">软件插件</a></li>
</ul>
</li>
<li class="hh_home_tags_3_list3 hh_home_tags_3_list">
<ul class="hh_home_tags_3_listul">
<li><a href="#">插画素材</a></li>
<li><a href="#">字体下载</a></li>
</ul>
</li>
</ul>
</div>
</div>

小图标可调用我的，如不显示小图标请自行调用

柒比贰7b2主题菜单修改引入彩色阿里图标库

ciyol

• 20年7月7日
• 喜欢：0
• 浏览：1.9k

另外css里面有一个数值是根据自己后台设置的页面宽度定的，我的是1250宽度，下方css代码第7行自己找一下修改一下，不然会有溢出

css代码 ：