预览图
代码
注意
1.要放在那就插在那里
2.本文禁止转载
3.此源码可以放图片
</div></div></div></div><div id="home-row-kf" class=" home_row home_row_5 module-html " style="background-color:;">
<div class="wrapper"><div class="home-row-left content-area "><div id="html-box-kf" class="html-box"><div class="footer-fav">
<div class="container">
<div class="fl site-info">
<h2> <a href="#" target="_blank" se_prerender_url="complete"> 柠檬博客 BLOG.LEMONCT.XYZ</a> </h2>
<div class="site-p">
<a href="" target="_blank">
<p>柠博</p>
<p>小巷的风,依旧温暖！-</p>
</a>
</div>
</div>
<div class="fr site-fav">
<a href="#" class="btn btn-fav btn-orange"> <i class="tubiao wei-shoucang1"></i> 按Ctrl+D收藏本站 </a>
</div>
<div class="site-girl">
<a href="https://www.lemonct.xyz/" target="_blank">
<div class="girl fl"> <i class="thumb " style="background-image:url(在这里可以添加图片)"></i> </div>
<div class="girl-info hide_md">
<h4>柠檬导航 </h4>
<h4> @柠檬MIki</h4>
</div>
</a>
</div>
</div>
</div>
<style>
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
}
@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,#fe3d7d 0,#fe5b34 50%,#fe3d7d 100%);
border: 1px solid #fd592b;
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,#fe5b34 0,#fe3d7d 50%,#fe5b34 100%);
border: 1px solid #fd592b;
border-radius: 3px
}
.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
}
}}
</style></div></div></div></div>
</div>
