柒比贰首页美化教程,幻灯片下方精美UI布局
柒比贰首页美化教程,幻灯片下方精美UI布局。发这篇文章前我想先说说,不管咋样只是一串代码而已,你辛苦写了出来,我也辛苦找出来给扒出来了,都是可复制性的,扒起来也简单,我这里也就给放出来了,喜欢的人可以拿去玩玩。
  • 柒比贰简单首页UI美化教程

效果图:

柒比贰首页美化教程,幻灯片下方精美UI布局

修改步骤:

1、修改php文件

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

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


柒比贰首页美化教程,幻灯片下方精美UI布局

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>

 

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

 

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

比如我的首页顶部菜单,文章分类菜单的彩色图标就是引用的字体图标。当然我是将字体图标下载下来引用然后修改css控制变色的,不算真正的彩色字体图标。下面我…

0172

登陆查看,感谢理解!

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

css代码 :

/*首页UI美化开始*/

.hh_fenlei01 {

width: 100%;

margin-top: 45px;

}

.hh_fenlei01_warp {

width: 1250px;

padding: 20px;

margin: 0 auto;

background: #eee;

height: 114px

}

.hh_fenlei01 ul {

list-style: none;

}

.hh_fenlei01 ul li {

float: left;

width: 25%;

}

.hh_fenlei01 ul li a i {

width: 72px;

height: 72px;

border-radius: 50%;

margin-right: 28px;

background-repeat: no-repeat;

background-size: cover;

display: block;

float: left

}

.hh_fenlei01 ul li a {

display: block;

}

.hh_fenleilist1_left {

background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iIzc5NUZFNSIvPjxwYXRoIGQ9Ik0zMzYuNDU3IDI3Ny45NDNoMzUxLjA4NnY0NjguMTE0SDMzNi40NTdWMjc3Ljk0M3pNNTEyIDcxNi44YTI5LjI1NyAyOS4yNTcgMCAxIDAgMC01OC41MTQgMjkuMjU3IDI5LjI1NyAwIDAgMCAwIDU4LjUxNHpNMzk0Ljk3MSAzMzYuNDU3VjYyOS4wM0g2MjkuMDNWMzM2LjQ1N0gzOTQuOTd6IiBmaWxsPSIjRkZGIi8+PC9zdmc+)

}

.hh_fenleilist2_left {

background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iI0YyN0Y2NiIvPjxwYXRoIGQ9Ik02NzguODk3IDI5Mi41NzFsNjAuNTMzIDcyLjE0OWE4Ny43NzEgODcuNzcxIDAgMCAxLTEzNC40NjUgMTEyLjg0NGwtNC43NTUtNS42NzZBMTE2Ljc1IDExNi43NSAwIDAgMSA1MTIgNTEyYTExNi43OCAxMTYuNzggMCAwIDEtODkuNjg4LTQxLjgzOGwtNi4yMTcgNy40MDJBODcuNzcxIDg3Ljc3MSAwIDAgMSAyODEuNjMgMzY0LjcybDYwLjUzMy03Mi4xNDloMzM2Ljc1ek03MDMuNDg4IDY3My43OTJsLTU4LjUxNCA1OC41MTR2LTU4LjUxNGg1OC41MTR6bS01OC41MTQtMTAyLjRoNTguNTE0djE2MC45MTRIMzIzLjE0NVY1NzEuMzkyaDU4LjUxNHYxMDIuNGgyNjMuMzE1di0xMDIuNHpNMzgxLjY1OSA3MzIuMzA2bC01OC41MTQtNTguNTE0aDU4LjUxNHY1OC41MTR6bS01OC41MTQtNTguNTE0bDU4LjUxNCA1OC41MTR2LTU4LjUxNGgtNTguNTE0em0zMjEuODI5IDB2LTEwMi40aDU4LjUxNHYxNjAuOTE0SDMyMy4xNDVWNTcxLjM5Mmg1OC41MTR2MTAyLjRoMjYzLjMxNXptNTguNTE0IDBsLTU4LjUxNCA1OC41MTR2LTU4LjUxNGg1OC41MTR6IiBmaWxsPSIjRkZGIi8+PC9zdmc+)

}

.hh_fenleilist3_left {

background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iIzUwQzlBOCIvPjxwYXRoIGQ9Ik02MDcuMTQ0IDU1NS44ODZoNzkuNjI0bDczLjE0MiAxMTcuMDI4aC03OS42MjN6TTI2My4wMjIgMzM2LjQ1N2g3My42NTVsLS4wMyAxMzIuMDM4aDEwMi43MzdWMzM2LjQ1N2g3Mi42NzV2MzM2LjQ1N2gtNzIuNjc1VjU0Mi4yMzdIMzM2LjY3N3YxMzAuNjc3aC03My42NTV6IiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTU1NS44ODYgNDk3LjM3MWg4Ny43NzFhNDMuODg2IDQzLjg4NiAwIDAgMCAwLTg3Ljc3MWgtODcuNzcxdi03My4xNDNoODcuNzcxYTExNy4wMjkgMTE3LjAyOSAwIDEgMSAwIDIzNC4wNTdoLTg3Ljc3MXYtNzMuMTQzeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)

}

.hh_fenleilist4_left {

background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0wIDUxMmE1MTIgNTEyIDAgMSAwIDEwMjQgMEE1MTIgNTEyIDAgMSAwIDAgNTEyeiIgZmlsbD0iIzVBOTNFQyIvPjxwYXRoIGQ9Ik0yOTIuNTcxIDMyMS44MjlINzMxLjQzdjM1MS4wODVoLTE3NC4xMWwtMTE4LjMxNiA4OC4xMzctLjAyOS04OC4xMzdIMjkyLjU3MXoiIGZpbGw9IiNGRkYiLz48cGF0aCBkPSJNMzgwLjM0MyA0NTMuNDg2YTI5LjI1NyAyOS4yNTcgMCAxIDAgNTguNTE0IDAgMjkuMjU3IDI5LjI1NyAwIDEgMC01OC41MTQgMHpNNTg1LjE0MyA0NTMuNDg2YTI5LjI1NyAyOS4yNTcgMCAxIDAgNTguNTE0IDAgMjkuMjU3IDI5LjI1NyAwIDEgMC01OC41MTQgMHoiIGZpbGw9IiM1QTkzRUMiLz48cGF0aCBkPSJNNTk5Ljc3MSA0NTMuNDg2aDI5LjI1OHY0My44ODVhMTAyLjQgMTAyLjQgMCAwIDEtMTAyLjQgMTAyLjRINDk3LjM3YTEwMi40IDEwMi40IDAgMCAxLTEwMi40LTEwMi40di00My44ODVoMjkuMjU4djQzLjg4NWE3My4xNDMgNzMuMTQzIDAgMCAwIDczLjE0MiA3My4xNDNoMjkuMjU4YTczLjE0MyA3My4xNDMgMCAwIDAgNzMuMTQyLTczLjE0M3YtNDMuODg1eiIgZmlsbD0iIzVBOTNFQyIvPjwvc3ZnPg==)

}

.hh_fenleilist_right {

float: left;

padding-top: 12px;

}

.hh_fenleilist_right h3 {

font-size: 18px;

font-family: PingFangSC-Semibold;

font-weight: 600;

color: #000;

}

.hh_fenleilist_right h4 {

margin-top: 6px;

width: 120px;

font-size: 12px;

color: #666;

font-weight: 400;

}

/*首页UI美化8小块*/

.hh_fenlei02 {

width: 100%;

margin-top: 30px;

margin-bottom: 40px;

}

.hh_fenlei02_warp {

width: 1310px;

margin: 0 auto;

height: 114px;

padding: 10px 5px;

}

.hh_home_tags_3 {

display: block;

float: left;

list-style: none

}

.hh_home_tags_4 {

display: block;

float: left;

list-style: none;

margin-left: 46px;

}

.hh_home_tags_3_listul {

list-style: none

}

.hh_home_tags_3_list {

float: left;

}

.hh_home_tags_3_list:nth-child(3n+1) {

margin-right: 30px;

margin-left: 40px;

}

.hh_home_tags_3_list {

margin-right: 30px;

position: relative;

}

.hh_home_tags_3_list:nth-child(3n) {

margin-right: 35px;

}

.hh_home_tags_3_list:first-child {

margin-left: 0

}

.hh_home_tags_3_list:nth-child(3n):after {

content: “”;

position: absolute;

top: 50%;

right: -35px;

height: 70%;

transform: translateY(-50%);

border-right: 1px solid #eee;

}

.hh_home_tags_4 .hh_home_tags_3_list:nth-child(3n):after {

content: none;

}

.hh_home_tags_4 li {

margin-right: 20px

}

.hh_home_tags_3_listul li {

margin-bottom: 0px;

}

.hh_home_tags_3_listul li a {

font-size: 14px;

color: #666;

display: block;

height: 40px;

line-height: 40px;

}

.hh_home_tags_3_listul li a:hover {

color: #000;

}

.hh_home_tags_3_listul li a i {

font-style: normal;

position: relative;

right: 5px;

}

.hh_home_tags_3_list1 .hh_home_tags_3_listul li a {

font-weight: 600;

color: #333;

}

.hh_home_tags_3_list1 .hh_home_tags_3_listul li a:hover {

color: #12bf94

}

.sj {

color: #12bf94

}

.home-collections .clearfix .fl {

font-size: 24px;

font-weight: 600;

}

.home-collections .clearfix {

margin-bottom: 20px;

padding: 0;

}

.home-collections .clearfix .fr {

display: block;

/* width: 113px; */

background: #f5f5f5;

padding: 10px 20px;

border-radius: 30px;

font-size: 14px;

text-align: center;

}

.home-collections .clearfix .fr:hover {

color: #12bf94

}

.home-menu-post .zrz-menu-in {

width: 44%;

float: right;

}

.hh_home_zhuanhuanwenzhang_left_title {

display: block;

width: 20%;

float: left;

font-size: 24px;

font-weight: 600;

color: #333;

line-height: 54px;

}

.jinrigengxinRmenu {

box-shadow: 0 0 0

}

.hh_zhuanti_bootom {

margin-bottom: 80px

}

.hh_home_chakangengduo {

color: rgb(51, 51, 51);

font-weight: 300;

display: block;

padding: 10px 20px;

font-size: 14px;

line-height: 1;

position: relative;

border-radius: 30px;

background: #f5f5f5;

}

.hh_home_chakangengduo:hover {

color: #12bf94

}

/**/

.widget .box-header span {

font-size: 12px;

font-weight: 300;

display: block;

padding: 7px 20px;

background: #f0eeee;

border-radius: 30px;

}

.widget_user .bg-blue-light {

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

border: 0;

}

.entry-content h2:before {

content: “e630”;

color: #f13b03;

font-family: sj !important;

}

.entry-title a {

color: #666

}

.widget_user_achievement .widget-title span {

font-size: 18px;

font-weight: 700;

/* display: none; */

padding: 0;

background: #fff;

float: left;

}

.hh_fenleilist_right a h3:hover{color:#2978f7}

.single .entry-content #gallery-1 .gallery-item{

float: left;

margin-top: 2%;

margin-right: 2%;

text-align: center;

width: 48%;

border: 1px solid #eaeeff;

box-shadow: 0 0px 3px #f7f9ff;

}

.single .entry-content #gallery-1 .gallery-caption{display:none}

.single .entry-content .wp-caption p{text-align:center}

.home-menu-post li:hover a, .zrz-menu-post .current-menu-item a{color: #40aafd;box-shadow: 0 0 0;

border: 1px solid #e5f4ff;}

.home-menu-post li a{display:block;padding:10px 20px;font-size:14px;line-height:1;position:relative;border-radius:30px;color: #454574;border-radius: 30px;background: #ffffff;box-shadow: 0px 2px 6px #e4ebff;border: 1px solid #f8fcff;}

.menu-top .zrz-post-menu .menu-item-has-children{padding:18px 10px !important}

@media (max-width:767px){

.entry-content img{max-width:100% !important}

.hh_fenlei01 ul li a span{ background: #795fe5;width: 3rem; height: 3rem;}

.hh_fenleilist_right h3{font-size: 0.875rem;

font-weight: 300;

margin-left: 16px;}

.hh_fenlei01 ul li a .fw{font-size: 1.5rem;

line-height: 3rem;

left: 11px;}

.hh_fenleilist_right h4{display:none}

.hh_fenlei01_warp{height: 120px;

padding: 20px 0px;}

.hh_fenlei01{ margin-top: 5px;

margin-bottom: 20px;}

.home-collections .clearfix .fl{ font-size: 1.2rem;}

.hh_fenlei02{display:none;}

}

.mission a b{color: #f16b6f;}

.home_title .title h3:before{

width:3px;

display:block;

background:red

}

.hh_home_tags_3_listul li a .fw{color:#005cf9;}

.home-menu-post .zrz-menu-in .fw{color:#545474;}

.home-menu-post li:hover a, .zrz-menu-post .current-menu-item a .fw{color:#005cf9}

.home .mobile-full-width.content-area{ margin-top: 20px;}

.site-content #bubble-home{box-shadow: 0 0 5px #e7f0fe;}

.site-content #primary{box-shadow: 0 0 5px #e7f0fe;}

.site-content .link-list ul li .box{box-shadow: 0 0 5px #dbe2fe;}

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

© 版权声明
THE END
喜欢就支持以下吧
点赞0 分享
评论 抢沙发
图片正在生成中,请稍后...