微信公眾號最佳實踐 （ 9.1）會員卡
阿新 • • 發佈：2018-12-30
會員卡
會員卡一般是指企業發行的用於識別顧客身份的卡片，普片用於服務行業，他是公司宣傳的理想載體,能夠吸引新顧客，留住老顧客，增強顧客忠誠度的作用，還能實現打折，積分等功能。
頁面佈局
準備素材，包括會員卡的正面和反面圖片 - - 大小固定的透明企業logo以及背景圖案。
HTML 頁面：
<body id="" class="">
<div id="loading" style="display: none; ">
<div class="bk"></div>
<div class CSS來控制各個元素的層疊樣式：
body{background-color:#E5E5E5;text-align:center;font-family:'Helvetica Neue',sans-serif;overflow-x:hidden;}
body,article,section,h1,h2,hgroup,p,a,ul,li,em,div,small,span,footer,canvas,figure,figcaption,input{margin:0;padding:0;}
img{border:none;}
a{text-decoration:none;cursor:pointer;}
a.autotel{text-decoration:none;color:inherit;}
ul{list-style-type:none;}
small,small em{font-size:15px;}.box:after{clear:both;display:block;visibility:hidden;height:0;content:".";}.box{*zoom:1;}.inner{width:320px;margin:0 auto;}.footFix{width:100%;text-align:center;position:fixed;left:0;bottom:0;}@font-face{font-family:'myfont1';src:url('../img/OCR-B 10 BT.ttf');}#footBtn a,.err_sub,.kkyl_frm input[type=submit],.popup .ok,#pwr_footFrm input[type=submit],#poBtn{display:block;border:1px solid #646464;color:#fff;font-size:18px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-image:-webkit-gradient(linear,0% 0,0% 100%,from(#00c600),to(#00a200));background-image:-webkit-linear-gradient(top,#00a200,#00c600);background-image:-moz-linear-gradient(top,#00a200,#00c600);background-image:-ms-linear-gradient(top,#00a200,#00c600);background-image:-o-linear-gradient(top,#00a200,#00c600);box-shadow:inset 0 0 2px #fff;}#footBtn a:hover,.err_sub:hover,.kkyl_frm input[type=submit]:hover,.popup .ok:hover,#pwr_footFrm input[type=submit]:hover,#poBtn:hover{background-image:-webkit-gradient(linear,0% 0,0% 100%,from(#56c657),to(#049817));background-image:-webkit-linear-gradient(top,#049817,#56c657);background-image:-moz-linear-gradient(top,#049817,#56c657);background-image:-ms-linear-gradient(top,#049817,#56c657);background-image:-o-linear-gradient(top,#049817,#56c657);}#footBtn{width:100%;height:60px;background-color:#4f4f4f;text-align:center;}#footBtn a{height:38px;line-height:38px;margin:10px 10px 0 10px;}.card{position:relative;-webkit-perspective:300;-moz-perspective:300;-ms-perspective:300;perspective:300;}
.card .front,.card .back{position:absolute;top:0;left:0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all .9s ease-in-out;-moz-transition:all .9s ease-in-out;-ms-transition:all .9s ease-in-out;transition:all .9s ease-in-out;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;}
.card .front{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);z-index:1;}
.card.flip .front{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg);z-index:0;}
.card .back{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg);z-index:0;}
.card.flip .back{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);z-index:1;}
.card.old .front,.card.old .back{-webkit-transition-duration:0;-moz-transition-duration:0;-ms-transition-duration:0;transition-duration:0;}
.modal{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:.5;}
.popup{position:fixed;z-index:2;left:50%;top:50%;width:240px;height:163px;}
.popup .pinner{border:2px solid #090204;background-color:#eee;width:205px;height:153px;margin:-82px 0 0 -120px;border-radius:7px;position:relative;padding:10px 15px 0 20px;}.popup .pclose{position:absolute;top:-10px;right:-10px;cursor:pointer;display:inline-block;width:38px;height:38px;background-color:#666;color:#eee;border:2px solid #eee;border-radius:20px;font-size:20px;font-weight:bold;font-family:'Aribl',sans-serif;text-align:center;line-height:38px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}.popup .title{height:34px;line-height:34px;display:block;border-bottom:1px solid #bbb;color:#666;text-align:left;}.popup .cont{display:block;border-top:1px solid #fff;padding:10px 0;color:#666;font-size:14px;}.popup .ok,.popup .cancel{display:inline-block;width:86px;height:30px;line-height:30px;border:none;box-shadow:inset 0 0 2px #fff;text-align:center;letter-spacing:4px;font-size:18px;float:left;}.popup .ok{margin-left:28px;}.popup .cancel{color:#666;border:1px solid #ccc;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-image:-webkit-gradient(linear,0% 0,0% 100%,from(#fafafa),to(#e9e9e9));background-image:-webkit-linear-gradient(top,#e9e9e9,#fafafa);background-image:-moz-linear-gradient(top,#e9e9e9,#fafafa);background-image:-ms-linear-gradient(top,#e9e9e9,#fafafa);background-image:-o-linear-gradient(top,#e9e9e9,#fafafa);}.popup .cancel:hover{background-image:-webkit-gradient(linear,0% 0,0% 100%,from(#fff),to(#e9e9e9));background-image:-webkit-linear-gradient(top,#e9e9e9,#fff);background-image:-moz-linear-gradient(top,#e9e9e9,#fff);background-image:-ms-linear-gradient(top,#e9e9e9,#fff);background-image:-o-linear-gradient(top,#e9e9e9,#fff);}#loading{position:fixed;left:50%;top:50%;z-index:99;}#loading,#loading .bk,#loading .cont{width:146px;height:146px;}#loading .bk,#loading .cont{position:relative;}#loading .bk{background-color:#000;opacity:.5;border-radius:10px;margin:-73px 0 0 -73px;z-index:0;}#loading .cont{margin:-146px 0 0 -73px;text-align:center;color:#f5f5f5;font-size:14px;line-height:35px;z-index:1;}#loading img{width:35px;height:35px;margin:30px auto;display:block;}#poNotice{margin:0 auto 27px auto;line-height:24px;font-size:14px;color:#FF5F01;font-weight:normal;}#poBtn,#poBtn span{height:38px;line-height:38px;font-size:18px;}#poBtn{width:200px;height:38px;line-height:38px;margin:0 auto;}#poBtn span{width:160px;padding-right:40px;display:inline-block;text-align:right;background:url('../img/icons.png') no-repeat 170px -441px;-webkit-background-size:25px 500px;background-size:25px;}#card_ctn{position:relative;}
#card_ctn .bk1{height:155px;background:#4b5359 url('../img/wei_shop_bk2.jpg') repeat-x 0 0;}
#card_ctn .cont{min-height:160px;width:320px;margin:-155px auto 0 auto;padding-top:28px;background:url('../img/wei_shop_bk1.jpg') no-repeat 0 0;}
#card_ctn .card{width:236px;height:143px;margin:0 auto;}
#card_ctn .backtag{position:relative;margin:0 0 -24px 168px;}
#card_ctn .backtag,#card_ctn .backtag p,#card_ctn .backtag canvas{width:54px;height:24px;}#card_ctn .backtag p,#card_ctn .backtag canvas{position:absolute;top:0;left:0;}
#card_ctn .backtag canvas{height:30px;}
#card_ctn .backtag p{line-height:20px;text-align:center;font-size:9px;}
.cc_shop .c{display:inline-block;width:220px;text-align:right;margin:0 auto;height:27px;line-height:27px;font-size:11px;color:#999;}.cc_shop em{font-style:normal;font-weight:bold;font-size:18px;color:#ff7e00;font-family:Verdana,Tahoma,Helvetica,Arial;margin:0 6px;}.cc_shop h1{line-height:26px;font-size:16px;margin-bottom:15px;}.cc_shop h1 a{display:inline-block;margin:0 auto;}.cc_shop h1,.cc_shop h1 a{color:#486d02;}.cc_shop2 h1{line-height:44px;height:44px;font-size:18px;}.cc_shop2 h1 a{display:inline-block;margin:0 auto;height:44px;padding-right:27px;background:url('../img/icons.png') no-repeat right -203px;-webkit-background-size:25px 500px;background-size:25px;}.cc_shop2 h1,.cc_shop2 h1 a{color:#486d02;}
.fg{margin:0 auto;position:relative;width:236px;height:143px;-webkit-background-size:236