当前位置:奉上博客 » 站长之家 » 正文

7b2主题美化-添加高端企业级的底部介绍

以下代码放到footer.php

	<div class="footer-navi">
		<div class="container">
			<div class="about widget fl">
			  <h2 class="title">关于我们</h2>
			  <p>奉上建站日记-集源码下载,素材设计,私人定制,素材分享,设计教程,在线教程等众多服务为一体,致力于打造资源下载行业的一站式交互平台。</p>
			</div>
			<div class="navis fl hide_sm">
				<div class="navi">
					<h2 class="title">热门频道</h2>
					<ul>
					  <li> <a href="/collection" target="_blank">文章专题</a> </li>
					  <li> <a href="/circle" target="_blank">热门话题</a> </li>
					  <li> <a href="/newsflashes" target="_blank">新闻快讯</a> </li>
					  <li> <a href="/document" target="_blank">百科知识</a> </li>
					  <li> <a href="/links" target="_blank">资源导航</a> </li>
					  <li> <a href="/app/download" target="_blank">APP下载</a> </li>
					</ul>
				</div>
				<div class="navi">
					<h2 class="title">素材源码</h2>
					<ul>
					  <li> <a href="/category/yuanma" target="_blank">精品源码</a> </li>
					  <li> <a href="/category/yuanma/youxiym" target="_blank">游戏源码</a> </li>
					  <li> <a href="/shop" target="_blank">源素商铺</a> </li>
					  <li> <a href="/vips" target="_blank">会员商城</a> </li>
					  <li> <a href="/verify" target="_blank">认证服务</a> </li>
					  <li> <a href="/announcements" target="_blank">公告系统</a> </li>
					</ul>
				</div>
				<div class="navi">
					<h2 class="title">技术支持</h2>
					<ul>
					  <li> <a href="https://wpa.qq.com/msgrd?v=3&uin=你的群号&site=qq&menu=yes" target="_blank">联系我们</a> </li>
					  <li> <a href="/" target="_blank">广告投放</a> </li>
					  <li> <a href="/write" target="_blank">入驻优创</a> </li>
					  <li> <a href="/write" target="_blank">作者投稿</a> </li>
					  <li> <a href="/link-register" target="_blank">友链申请</a> </li>
					  <li> <a href="/requests" target="_blank">意见反馈</a> </li>
					</ul>
				</div>
			</div>
			<div class="ewms widget fr hide_sm">
			  <ul class="clearfix">
				<li>
				  <div>
					<i class="erweima wei-denglu1"></i>
					<h4>QQ</h4>
				  </div>
				  
				</li>
				<li>
				  <div>
					<i class="erweima wei-xchengxu-copy"></i>
					<h4>微信</h4>
				  </div>
				  
				<li>
				  <div>
					<i class="erweima wei-huodong"></i>
					<h4>微博</h4>
				  </div>
				  
				</li>
			  </ul>
			  <div class="like">
				<strong>木子资源</strong>
				<h3>新媒体矩阵等你来关注</h3>
			  </div>
			</div>
		</div>
		<div class="container container-bq">
			<div class="bands">
				<ul>
					<li> <a href="http://logo.tukuv.com/" class="thumb band band-uisdc" target="_blank"> <span class="hidden">标志君</span> </a> </li>
					<li> <a href="https://www.tucool.cn/" class="thumb band band-uiii" target="_blank"> <span class="hidden">图酷中国</span> </a> </li>
					<li> <a href="https://www.0sheji.com/" class="thumb band band-uisdc-xue" target="_blank"> <span class="hidden">0Design</span> </a> </li>
					<li> <a href="/" class="thumb band band-uisdc-hao" target="_blank"> <span class="hidden">合作伙伴</span> </a> </li>
					<li> <a href="https://www.youmaitu.com/" class="thumb band band-uisdc-hunter" target="_blank"> <span class="hidden">优麦兔</span> </a> </li>
					<li> <a href="#" class="thumb band band-uisdc-basic" target="_blank"> <span class="hidden">源码猪</span> </a> </li>
				</ul>
			</div>
			<div class="qqgroup fr hide_sm">
				<a href="https://jq.qq.com/你的链接"> <i class="weian wei-aui-icon-qq"></i> 官方QQ群 </a>
			</div>
		</div>
	</div>

以下代码放到css样式

/*底部*/
 .slider-height{
    width: 100%!important;
}
 #home-row-pclunbo .wrapper{
       width: 100%!important;
       margin-top: -128px;
       height: auto;
}
.home-row-left.content-area{
      width: 100%!important;
       height: auto;
      border-radius: 0;
}
 .home_row.home_row_bg_img {
    background-size: 1920px 1249px;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: center 0;
    margin-top: -126px;
    background-attachment: initial;
}
 .post-box-content {
	height: auto;
	background: #fff
}
#home-row-pclunbo .slider-1 .flickity-page-dots {
	position: absolute;
	top: 88%;
    right: calc(50% - 5%);
    left: calc(50% - 5%);
	padding: 0 .1rem .12rem 0;
}
#home-row-pclunbo .slider-1.slider-type-width .slider-info-box {
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: self-start;
	flex-flow: column
}
.dot.is-selected{
 	width: 22px!important;
		height: 26px;
		margin: 0 3px;
		border-radius: 8px!important;
		transition-delay: 0.1s;
}#home-row-pclunbo .slider-1 .flickity-page-dots .dot {
		width: 10px;
		height: 10px;
		margin: 0 3px;
		border-radius: 50%
	}
	/*底部*/
/* 底部美化 */
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	box-sizing: border-box
}
html {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: 100%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow-x: hidden;
	max-width: 100%
}[v-cloak] {
	display: none !important
}
/* 1313 */
body {
	overflow-x: hidden;
	letter-spacing: .034em;
	margin: 0;
	padding: 0
}
/* 1516 */
ol,ul {
	list-style: none
}
/* ------------------------------------------ */
/* 1989 */
.erweima {
	font-family: "weian" !important;
	font-size: 40px;
	color: #fff;
	opacity: .3;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
.tubiao {
	font-family: "weian" !important;
	font-size: 16px;
	color: #fff;
	opacity: .8;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
/* 2022 */
.home .site-content {
	padding-bottom: 0
}
/* 6802 */
.footer {
	font-size: 13px
}
.footer a {
	/*font-size: 13px*/
}
/* ------------------------------------------ */
@media(min-width:768px) {
	.fl {
		float: left
	}
}
@media(min-width:768px) {
	.fr {
		float: right
	}
}
a,a:active,a:visited {
	text-decoration: none;
	transition: all .2s
}
.thumb {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 66.7%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: transparent;
	position: relative;
	overflow: hidden;
	transition: all .2s
}
@media(max-width:1329px) {
	.hide_md {
		display: none !important
	}
}
.btn {
	display: block;
	cursor: pointer;
	border-radius: 3px;
	text-align: center;
	line-height: 2.4;
	outline: 0;
	border: 0
}
.btn-orange {
	background-color: #fe5b34;
	background-image: -webkit-linear-gradient(left,#fe3d7d 0,#fe5b34 50%,#fe3d7d 100%);
	background-image: linear-gradient(to right,#3385ff 0,#3385ff 50%,#3385ff 100%);
	border: 1px solid #3385ff;
	border-radius: 3px;
	color: #fff
}
.btn-orange:hover {
	color: #fff;
	background-color: #fe5b34;
	background-image: -webkit-linear-gradient(left,#fe5b34 0,#fe3d7d 50%,#fe5b34 100%);
	background-image: linear-gradient(to right,#1e62eb 0,#1e62eb 50%,#1e62eb 100%);
	border: 1px solid #1e62eb;
	border-radius: 3px
}
.btn-orange-light {
	background-color: #fe5b34;
	background-image: -webkit-linear-gradient(left,#fe5b34 0,#fe3d7d 50%,#fe5b34 100%);
	background-image: linear-gradient(to right,#fe5b34 0,#fe3d7d 50%,#fe5b34 100%);
	border: 1px solid #fd592b;
	border-radius: 3px
}
.btn-group {
	display: box;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between
}
.btn-group>.btn {
	border-radius: 0
}
.btn-group>.btn:first-child {
	border-radius: 3px 0 0 3px
}
.btn-group>.btn:last-child {
	border-radius: 0 3px 3px 0
}
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
@media(min-width:768px) {
	.container {
		max-width: 768px;
		overflow: visible
	}
}
@media(min-width:1024px) {
	.container {
		max-width: 1310px
	}
}
.container:before,.container:after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: none;
	clear: both
}
.footer-fav {
	position: relative;
	/* z-index: 20; */
	/* background: #f7fafc; */
	background: #edf3f9;
	width: 100%;
	overflow: hidden
}
@media(min-width:768px) {
	.footer-fav {
		width: auto;
		overflow: visible;
		background: #edf3f9
	}
}
.footer-fav .container {
	padding-top: 36px;
	padding-bottom: 36px;
	overflow: visible
}
.footer-fav .site-info {
	width: 60%
}
@media(min-width:768px) {
	.footer-fav .site-info {
		width: auto
	}
}
.footer-fav .site-info h2 {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 10px;
	text-transform: uppercase
}
@media(min-width:768px) {
	.footer-fav .site-info h2 {
		font-size: 26px
	}
}
.footer-fav .site-info h2 a {
	color: #000
}
.footer-fav .site-info .site-p {
	margin-bottom: 10px
}
.footer-fav .site-info .site-p p:first-child::after {
	content: ','
}
@media(min-width:768px) {
	.footer-fav .site-info .site-p {
		margin-bottom: 0
	}
	.footer-fav .site-info .site-p p:first-child::after {
		content: ''
	}
}
.footer-fav .site-info p {
	font-size: 12px;
	color: #797979;
	line-height: 1.8;
	margin-bottom: 10px;
	display: inline
}
@media(min-width:768px) {
	.footer-fav .site-info p {
		font-size: 14px;
		margin-bottom: 0;
		display: block
	}
}
.footer-fav .site-fav {
	padding-top: 5px
}
@media(min-width:768px) {
	.footer-fav .site-fav {
		padding-top: 24px
	}
}
.footer-fav .site-fav .btn-orange {
	font-size: 14px;
	line-height: 2.5;
	padding: 0 1.2em
}
@media(min-width:768px) {
	.footer-fav .site-fav .btn-orange {
		font-size: 16px;
		line-height: 3.5;
		padding: 0 2em
	}
}
.footer-fav .site-girl {
	position: absolute;
	left: 50%;
	bottom: 0
}
.footer-fav .site-girl .girl {
	width: 180px;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: all .3s
}
@media(min-width:768px) {
	.footer-fav .site-girl .girl {
		left: -50px
	}
}
.footer-fav .site-girl .girl::after {
	content: 'Hi~';
	display: block;
	position: absolute;
	left: 100%;
	top: 40%;
	color: #a7a7a7;
	font-size: 20px;
	visibility: hidden;
	opacity: 0;
	transition: all .2s;
	transition: all .3s
}
.footer-fav .site-girl .thumb {
	padding-top: 116.667%
}
.footer-fav .site-girl .girl-info {
	margin-left: 150px;
	margin-bottom: 55px
}
.footer-fav .site-girl h4 {
	font-size: 14px;
	font-weight: normal;
	color: #797979;
	line-height: 1.8
}
.footer-fav .site-girl a {
	color: #797979
}
.footer-fav .site-girl a:hover {
	color: #ff5c00
}
@media(min-width:768px) {
	.footer-fav:hover .site-girl .girl {
		left: -80px
	}
	.footer-fav:hover .site-girl .girl::after {
		visibility: visible;
		opacity: 1;
		transition: all .2s
	}
}
@media(max-width:767px) {
	.home .footer-fav {
		display: none
	}
}
@media(max-width:767px) {
	.footer-fav .btn-group>.btn:last-child {
		border-radius: 3px
	}
}
.clearfix {
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: none;
	clear: both
}
@media(min-width:768px) {
	.fl {
		float: left
	}
}
@media(min-width:768px) {
	.fr {
		float: right
	}
}
a,a:active,a:visited {
	text-decoration: none;
	transition: all .2s
}
.thumb {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 66.7%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: transparent;
	position: relative;
	overflow: hidden;
	transition: all .2s
}
.hide {
	visibility: hidden;
	opacity: 0;
	transition: all .2s
}
.hidden {
	display: none !important
}
@media(max-width:1023px) {
	.hide_sm {
		display: none !important
	}
}
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
@media(min-width:768px) {
	.container {
		max-width: 768px;
		overflow: visible
	}
}
@media(min-width:1024px) {
	.container {
		max-width: 1310px
	}
}
.container:before,.container:after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: none;
	clear: both
}
.footer-navi {
	position: relative;
	background: #2a2a32;
	color: #949498;
	line-height: 1.9286;
	padding: 15px 0;
	/* z-index: 20; */
	display: none;
	background: url(https://www.guoji115.com/img/bj.png) no-repeat;/*背景图片*/
	background-size: cover
}
@media(min-width:768px) {
	.footer-navi {
		display: block
	}
}
@media(min-width:1024px) {
	.footer-navi {
		padding: 40px 0
	}
}
@media(min-width:1310px) {
	.footer-navi {
		overflow: visible
	}
}
.footer-navi .container {
	overflow: visible
}
.footer-navi a {
	color: #949498;
	font-size: 14px
}
.footer-navi a:hover {
	color: #fff
}
.footer-navi .title {
	font-size: 16px;
	padding: 20px 0px 8px!important;
	color: #fff;
	font-weight: normal;
	line-height: 1.38889;
	margin-bottom: 14px
}
.footer-navi .widget {
	box-sizing: border-box;
	position: relative
}
@media(min-width:1024px) {
	.footer-navi .widget::before {
		content: '';
		width: 0;
		height: 95%;
		border-left: 1px solid #33333c;
		position: absolute;
		right: 0;
		top: 20px
	}
	.footer-navi .widget::after {
		content: '';
		width: 0;
		height: 95%;
		border-right: 1px solid #222229;
		position: absolute;
		right: 1px;
		top: 20px
	}
}
.footer-navi .about {
	margin: 15px 0 30px
}
@media(min-width:1024px) {
	.footer-navi .about {
		width: 32.1538%;
		padding-right: 15px;
		margin: 0;
		font-size: 13px
	}
}
@media(min-width:1310px) {
	.footer-navi .about {
		font-size: 14px;
		padding-right: 60px
	}
}
@media(min-width:768px) {
	.footer-navi .container-bq {
		padding-top: 32px
	}
}
.footer-navi .navis {
	display: box;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	justify-content: space-around;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 30px
}
@media(min-width:768px) {
	.footer-navi .navis {
		width: 60%;
		margin-bottom: 0
	}
}
@media(min-width:1024px) {
	.footer-navi .navis {
		width: 40%
	}
}
.footer-navi .navis .navi {
	flex: 1;
	text-align: center
}
@media(min-width:1310px) {
	.footer-navi .navis {
		width: 40%
	}
	.footer-navi .navis .navi {
		text-align: left;
		padding-left: 60px
	}
}
.footer-navi .ewms {
	margin: 0 auto
}
@media(min-width:768px) {
	.footer-navi .ewms {
		width: 270px;
		padding-left: 50px;
		margin: 0
	}
}
.footer-navi .ewms::before,.footer-navi .ewms::after {
	right: auto;
	left: 0
}
.footer-navi .ewms::before {
	left: 1px
}
.footer-navi .ewms .like {
	text-align: center
}
.footer-navi .ewms .like strong {
	color: #fe3d7d;
	font-size: 54px;
	line-height: 1.24;
	font-family: Impact;
	font-weight: 400;
	background-image: linear-gradient(to right,#0386ce 0,#097fc1 50%,#0393e8 100%);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-background-size: 200% 100%;
	-webkit-animation: masked-animation 2s infinite linear
}
.footer-navi .ewms .like h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 1.1
}
.footer-navi .ewms ul {
	text-align: center;
	margin-bottom: 35px
}
.footer-navi .ewms li {
	float: left;
	width: 33.3333%;
	box-sizing: border-box;
	display: inline;
	position: relative;
	line-height: 1.3;
	margin-top: 0
}
.footer-navi .ewms li:hover .ewm-content {
	visibility: visible;
	bottom: 100%;
	opacity: 1
}
.footer-navi .ewms .ico {
	font-size: 46px;
	cursor: pointer;
	transition: all .2s
}
.footer-navi .ewms .ico:hover {
	color: #fff
}
.footer-navi .ewms .ico i {
	display: block
}
.footer-navi .ewms h4 {
	font-size: 12px;
	font-weight: normal;
	margin: 0
}
.footer-navi .ewms .ewm-content {
	position: absolute;
	left: 50%;
	bottom: 200%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 16px 32px 0 rgba(0,0,0,0.1);
	box-sizing: border-box;
	width: 330px;
	transform: translate(-50%,0)
}
.footer-navi .ewms .ewm-content::before {
	content: '';
	display: block;
	position: absolute;
	margin-left: -6px;
	left: 50%;
	top: 100%;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #fff
}
@media(max-width:1600px) {
	.footer-navi .ewms .ewm-content.ewm-douyin,.footer-navi .ewms .ewm-content.ewm-wechat {
		left: auto;
		right: 0;
		transform: translate(0,0)
	}
	.footer-navi .ewms .ewm-content.ewm-douyin::before,.footer-navi .ewms .ewm-content.ewm-wechat::before {
		left: auto;
		right: 30px
	}
	.footer-navi .ewms .ewm-content.ewm-douyin {
		transform: translate(70px,0)
	}
	.footer-navi .ewms .ewm-content.ewm-douyin::before {
		right: 100px
	}
}
.footer-navi .ewms .ewm-content.ewm-douyin {
	width: 400px
}
.footer-navi .ewms .ewm-content.ewm-douyin .ewm-main .thumb-div {
	width: 160px
}
.footer-navi .ewms .ewm-main {
	padding: 40px 25px 40px 30px;
	text-align: left
}
.footer-navi .ewms .ewm-main .fl {
	float: left
}
.footer-navi .ewms .ewm-main .fr {
	float: right
}
.footer-navi .ewms .ewm-main .thumb-div {
	width: 120px;
	margin-right: 30px
}
.footer-navi .ewms .ewm-main .thumb {
	padding-top: 100%
}
.footer-navi .ewms .ewm-main h4 {
	font-size: 14px;
	font-weight: normal;
	color: #333;
	line-height: 1.714;
	margin-top: 4px
}
.footer-navi .ewms .ewm-main h4 span {
	color: #47c333
}
.footer-navi .ewms .ewm-main a {
	color: #ff3401
}
.footer-navi .ewms .ewm-main a:hover {
	color: #ff5c00
}
.footer-navi .ewms .ewm-main h5 {
	font-weight: normal;
	font-size: 12px;
	color: #888
}
.footer-navi .ewms .ewm-douyin .ewm-main {
	padding-left: 0;
	padding-right: 0;
	text-align: center
}
.footer-navi .ewms .ewm-douyin .ewm-main .thumb-div {
	margin: 0 auto
}
.footer-navi .ewms .ewm-douyin .ewm-douyin-1,.footer-navi .ewms .ewm-douyin .ewm-douyin-2 {
	width: 50%
}
.footer-navi .ewms .ewm-douyin .ewm-douyin-1 {
	position: relative
}
.footer-navi .ewms .ewm-douyin .ewm-douyin-1:after {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 10%;
	width: 1px;
	height: 80%;
	background: #f3f3f3
}
@media(min-width:768px) {
	.footer-navi .bands {
		float: left;
		width: 100%
	}
}
@media(min-width:1024px) {
	.footer-navi .bands {
		width: 73%
	}
}
.footer-navi .bands ul {
	margin: 0 -8px 0 -7px;
	display: box;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}
.footer-navi .bands ul li {
	padding: 0 8px 15px 7px;
	width: 33.3333%;
	box-sizing: border-box
}
@media(min-width:768px) {
	.footer-navi .bands ul li {
		width: 16.6667%
	}
}
.footer-navi .bands .band {
	background-color: #42424d;
	padding-top: 52px;
	border-radius: 3px;
	transition: all .2s
}
.footer-navi .bands .band::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	transition: all .2s
}
.footer-navi .bands .band:hover {
	background-color: #24242d
}
.footer-navi .bands .band:hover::after {
	background: transparent
}
/*LOGO*/
.footer-navi .bands .band-uisdc {
	background-image: url(https://www.guoji115.com/img/logojun.png);
	background-size: 125px 45px
}
.footer-navi .bands .band-uiii {
	background-image: url(https://www.guoji115.com/img/tukucn.png);
	background-size: 125px 45px
}
.footer-navi .bands .band-uisdc-xue {
	background-image: url(https://www.guoji115.com/img/1618.png);
	background-size: 125px 45px
}
.footer-navi .bands .band-uisdc-hao {
	background-image: url(https://www.guoji115.com/img/li.png);
	background-size: 125px 45px
}
.footer-navi .bands .band-uisdc-hunter {
	background-image: url(https://www.guoji115.com/img/umto.png);
	background-size: 125px 45px
}
.footer-navi .bands .band-uisdc-basic {
	background-image: url(https://www.guoji115.com/img/latiao.png);
	background-size: 125px 45px
}
.footer-navi .qqgroup {
	width: 100%
}
@media(min-width:1024px) {
	.footer-navi .qqgroup {
		width: auto
	}
}
.footer-navi .qqgroup a {
	display: block;
	width: 220px;
	height: 52px;
	line-height: 52px;
	background: #222228;
	border-radius: 3px;
	text-align: center;
	margin: 0 auto
}
.home .footer-navi {
	display: block
}
@media(max-width:1023px) {
	.hide_sm {
		display: none !important
	}
}
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	overflow: hidden;
	*zoom: 1;
}
@media(min-width:768px) {
	.container {
		max-width: 768px;
		overflow: visible
	}
}
@media(min-width:1024px) {
	.container {
		max-width: 1310px
	}
}
.container:before,.container:after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: none;
	clear: both
}
.footer {
	background: #121212;
	position: relative;
	/* z-index: 20 */
}
.footer .container {
	padding-top: 20px;
	padding-bottom: 20px;
	letter-spacing: .02px
}
.footer .colors-shadow {
	position: absolute;
	left: 0;
	top: 4px;
	right: 0;
	height: 50px
}
.footer .colors-shadow::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,rgba(18,18,18,0.8),#121212)
}
.footer .friendlinks {
	font-size: 12px;
	color: #4f4f4f;
	line-height: 2;
	margin: 0 -.5em 20px;
	word-break: keep-all
}
.footer .friendlinks h6 {
	font-size: 12px;
	font-weight: normal;
	display: inline;
	margin: 0 .5em
}
.footer .friendlinks ul {
	display: inline
}
.footer .friendlinks li {
	display: inline;
	margin: 0 .5em
}
.footer .friendlinks a {
	color: #4f4f4f
}
.footer .friendlinks a:hover {
	color: #acacac
}
.footer .copyright {
	color: #7f7f7f;
	line-height: 1.5;
	font-size: 12px;
	text-align: center
}
@media(min-width:768px) {
	.footer .copyright {
		color: #545454
	}
}
.footer .copyright .asline {
	font-style: normal;
	display: block
}
@media(min-width:768px) {
	.footer .copyright .asline {
		display: inline
	}
}
.footer .copyright p {
	padding: .5em 0;
	border-radius: 4px
}
@media(min-width:768px) {
	.footer .copyright p {
		background: #000;
		display: inline-block;
		padding: .5em 1.5em
	}
}
.footer .copyright a {
	color: #7f7f7f
}
@media(min-width:768px) {
	.footer .copyright a {
		color: #545454
	}
}
.footer .copyright a:hover {
	color: #acacac
}
@media all {
	.footer:hover .footer-colors {
		animation-play-state: running
	}
}
@keyframes animate-colors {
	0% {
		background-position: 0 0
	}
	100% {
		background-position: 7000px 0
	}
}
/*
 * 页脚美化
 */
@media screen and (max-width: 768px) {
	.site-footer-nav .wrapper .footer-links {
		display: none!important;
	}
	.footer-bottom {
		width:auto!important;
		background: none!important;
	}
}
.site-footer-nav {
    background-color: #2a2a32!important;
}
.site-footer-nav .wrapper .footer-links {
    margin-top: 0px;background-color: #2a2a32!important;
}
.footer-links {
	font-size: 12px;
    /*color: #4f4f4f;*/
    line-height: 2;
    margin: 0 -.5em 20px;
    word-break: keep-all;
	border:none;
	justify-content: none;
	padding: 20px 0px;
	display: block;
}
.footer-links ul li a:hover {
    color: #acacac;
}
.footer-links ul:before {
	content:'友情链接:';
   line-height: 3em;
}
.footer-bottom {
	padding: .5em 1.5em;
width: 800px;
    margin: 0 auto;
    border-radius: 5px;
    background: #000;
	height: auto;
	margin-bottom: 20px;
	color: #545454;
}
/* 底部美化 */

相关文章