作者:火鸟大叔 | 来源:互联网 | 2023-01-21 09:38
1.公共底部footer.html代码
<style type="text/css">
/*pc端底部*/
.footer {
box-sizing: border-box;
width: 96%;
position: fixed;
left: 2%;
bottom: 0px;
color: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.footer .left {display: inline-block;}
.footer .right {display: inline-block;float: right;}
/*微信二维码*/
.wx_box {position: relative;}
.wx_erweima_box {display: none; position: absolute;left: -120px;bottom: 60px;width: 200px !important;height: 200px !important;max-width: 200px;}
.wx_erweima_box:after {
z-index: 10000;
content: '';
display: block;
width: 20px;
height: 20px;
background-color: #fff;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg);
margin-top: -14px;
margin-left: 126px;
}
.wx_erweima {
width: 200px !important;height: 200px !important;max-width: 200px;
}
style>
<div class="footer big_screen_display">
<div class="left">
<div style="margin:5px 0;">中国.西安div>
<div>陕西省西安市太白南路269号中天国际B座20层div>
div>
<div class="right">
<img src="images/QQ.png" />
<div class="wx_box" style="display: inline-block;" onmouseenter="changeShowErweima()" onmouseleave="hideErweima()" >
<img src="images/weixin.png"/>
<div class="wx_erweima_box">
<img src="images/wx_erweima.jpg" class="wx_erweima"/>
div>
div>
<a target="_blank" href="http://blog.sina.com.cn/u/2004204804"><img src="images/weibo.png" style="margin-right:0px;" />a>
div>
div>
<script type="text/Javascript">
//切换展示二维码
function changeShowErweima(){
if($('.wx_erweima_box')[0].style.display == 'block'){
$('.wx_erweima_box')[0].style.display = 'none';
}else{
$('.wx_erweima_box')[0].style.display = 'block';
}
}
function hideErweima() {
$('.wx_erweima_box')[0].style.display = 'none';
}
script>
2.引入公共页面
<div class="footerpage_m">div>
$(function() {
//调用公共footer
$('.footerpage_m').load('common/footer_m.html')
})