制作漂亮的wordpress前台登录注册页面

  • A+
所属分类:wp教程

wordpress博客的后台登录页面非常简单,虽然也可以美化wordpress的登录后台但对于很多人来说,如何定制一个不一样的登录页面已经成为广大博主迫不及待的一件事情了,今天来告诉大家如何打造一个完美的Wordpress前端登录页面。

制作漂亮的wordpress前台登录注册页面

1.新建一个名为register.php的文件并添加以下代码放到你主题目录的pages文件夹下

  1. <?php
  2. //代码来自唯爱,下一句是必须的,表示当前模板的名称
  3. /*Template Name: Register*/
  4. //如果用户已经登陆那么跳转到首页
  5. if (is_user_logged_in()){
  6.   //重定向浏览器
  7.   wp_safe_redirect( get_option('home') );
  8.   //确保重定向后,后续代码不会被执行
  9.   exit;
  10. }
  11. //获取注册页面提交时候的表单数据
  12. $redirect_to = sanitize_user( $_REQUEST['redirect_to'] );
  13. if( !emptyempty($_POST['csyor_reg']) ) {
  14.   $error = '';
  15.   $sanitized_user_login = sanitize_user( $_POST['user_login'] );
  16.   $user_website = sanitize_user( $_POST['website'] );
  17.   $user_description = sanitize_user( $_POST['description'] );
  18.   $user_nickname = sanitize_user( $_POST['nickname'] );
  19.   $user_email = apply_filters( 'user_registration_email', $_POST['user_email'] );
  20.   $comment_aaa            = ( isset($_POST['aaa']) ) ? trim($_POST['aaa']) : '0';
  21.   $comment_bbb          = ( isset($_POST['bbb']) ) ? trim($_POST['bbb']) : '0';
  22.   $comment_subab        = ( isset($_POST['subab']) ) ? trim($_POST['subab']) : '0';
  23.   // 验证邮箱
  24.   if ( $user_email == '' ) {
  25.     $error .= '<strong>错误:</strong><br>请填写电子邮件地址。';
  26.   } elseif ( ! is_email( $user_email ) ) {
  27.     $error .= '<strong>错误:</strong><br>电子邮件地址不正确。';
  28.     $user_email = '';
  29.   } elseif ( email_exists( $user_email ) ) {
  30.     $error .= '<strong>错误:</strong><br>该电子邮件地址已经被注册,请换一个。';
  31.   }
  32.   // 验证用户名
  33.   elseif ( $sanitized_user_login == '' ) {
  34.     $error .= '<strong>错误:</strong><br>请输入登陆账号。';
  35.   } elseif ( !preg_match("/^[a-zA-Z0-9_]{4,16}$/",$sanitized_user_login) ) {
  36.     $error .= '<strong>错误:</strong><br>登陆账号只能包含字母、数字、下划线,长度4到16位。';
  37.     $sanitized_user_login = '';
  38.   } elseif ( username_exists( $sanitized_user_login ) ) {
  39.     $error .= '<strong>错误:</strong><br>该用户名已被注册,请再选择一个。';
  40.   }
  41.   //验证密码
  42.   elseif(strlen($_POST['user_pass']) < 6){
  43.     $error .= '<strong>错误:</strong><br>密码长度至少6位。';
  44.   }elseif($_POST['user_pass'] != $_POST['user_pass2']){
  45.     $error .= '<strong>错误:</strong><br>两次输入的密码必须一致。';
  46.   }elseif(((int)$comment_subab)!=(((int)$comment_aaa)+((int)$comment_bbb))){
  47.     $error .= '<strong>错误:</strong><br>请输入正确的计算结果。';
  48.   }
  49.   if($error == '') {
  50.     //验证全部通过进入注册信息添加
  51.     $display_name = emptyempty($user_nickname)?$sanitized_user_login:$user_nickname;
  52.     $user_pass = $_POST['user_pass'];
  53.     $user_id = wp_insert_user( array (
  54.       'user_login' => $sanitized_user_login,
  55.       'user_pass' => $user_pass ,
  56.       'nickname' => $user_nickname,
  57.       'display_name' => $display_name,
  58.       'user_email' => $user_email,
  59.       'user_url' => $user_website,
  60.       'description' => $user_description) ) ;
  61.     //意外情况判断,添加失败
  62.     if ( ! $user_id ) {
  63.       $error .= sprintf( '<strong>错误:</strong><br>无法完成您的注册请求... 请联系<a href="mailto:%s">管理员</a>!</p>', get_option( 'admin_email' ) );
  64.     }else if (!is_user_logged_in()) {
  65.       //注册成功发送邮件通知用户
  66.       $to = $user_email;
  67.       $subject = '您在 [' . get_option("blogname") . '] 的注册已经成功';
  68.       $message = '<div style="background-color:#eef2fa; border:1px solid #d8e3e8; color:#111; padding:0 15px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px;">
  69.         <p>' . $user_nickname . ', 您好!</p>
  70.         <p>感谢您在 [' . get_option("blogname") . '] 注册用户~</p>
  71.         <p>你的注册信息如下:<br />
  72.         账号:'. $sanitized_user_login . '<br />
  73.         邮箱:'. $user_email . '<br />
  74.         密码:'. $_POST['user_pass'] . '<br />
  75.         </p>
  76.         <p>欢迎光临 <a href="'%20.%20get_option('home')%20.%20'">' . get_option('blogname') . '</a>。</p>
  77.     <p>(此郵件由系統自動發出, 請勿回覆.)</p>
  78.     </div>';
  79.       $from = "From: "" . get_option('blogname') . "" <$wp_email>";
  80.       $headers = "$fromnContent-Type: text/html; charset=" . get_option('blog_charset') . "n";
  81.       wp_mail( $to$subject$message$headers );
  82.       $user = get_userdatabylogin($sanitized_user_login);
  83.       $user_id = $user->ID;
  84.       // 自动登录
  85.       wp_set_current_user($user_id$user_login);
  86.       wp_set_auth_cookie($user_id);
  87.       do_action('wp_login', $user_login);
  88.       wp_safe_redirect( $redirect_to );
  89.     }
  90.   }
  91. }
  92. ?>
  93. <html>
  94.   <head>
  95. <title><?php echo get_bloginfo('name') ?> - 用户注册</title>
  96.     <meta charset="utf-8" />
  97.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  98.     <link href="<?php%20echo%20get_template_directory_uri();%20?>/css/reg.css" rel="stylesheet">
  99.  </head>
  100.       <body>
  101.       <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  102.     <div class="vi_box">
  103.       <div class="logo">
  104. <img class="shang_logo animated fadeInUpBig" src="<?php%20echo%20get_template_directory_uri();%20?>/img/logo.png" height="40" alt="mrhee"></div>
  105. <?php if(!emptyempty($error)) {
  106.       //输出错误提示信息
  107.       echo '<p class="iblue">'.$error.'</p>';
  108.     }
  109.     if (!is_user_logged_in()) { ?>
  110.   <form name="registerform" method="post" action="#">
  111.         <input type="text" placeholder="用户名"  name="user_login" id="user_login" tabIndex="2" value="<?php if(!empty($sanitized_user_login)) echo $sanitized_user_login; ?>" required>
  112.         <hr class="hr15">
  113.          <div class="col-xs-pass1">
  114.         <input id="user_pwd1" placeholder="密码"  type="password" tabindex="3" name="user_pass"  required>
  115.            </div> <div class="col-xs-pass2">
  116.             <input id="user_pwd2"   placeholder="重复密码" type="password" tabindex="4"  name="user_pass2"  required></div>
  117.                 <hr class="hr15">
  118.                 <input type="text" placeholder="邮箱"  name="user_email" id="user_email" tabIndex="1" value="<?php if(!empty($user_email)) echo $user_email; ?>" required>
  119.                     <hr class="hr15">
  120.                     <input id="nickname" placeholder="昵称" type="text" tabindex="5"  name="nickname" />
  121.         <hr class="hr15">
  122.                     <input id="website" placeholder="网站" type="text" tabindex="6"  name="website" />
  123.                             <hr class="hr15">
  124.                             <div class="col-xs-yz">
  125.                             <?php $aaa=rand(1,9); $bbb=rand(1,9); ?>
  126.                             <?php echo $aaa; ?>+<?php echo $bbb; ?>=
  127.     <input name="aaa" value="<?php echo $aaa; ?>" type="hidden" />
  128.     <input name="bbb" value="<?php echo $bbb; ?>" type="hidden" />
  129. </div>
  130. <div class="col-xs-js">
  131. <input  type="text" name="subab" id="subab" tabindex="8"  placeholder="计算结果" required></div>
  132.         <hr class="hr15">
  133.     <input type="submit" name="wp-submit"  id="wp-submit"  style="width:100%;"  tabindex="7" value="注册" />
  134.     <input type="hidden" name="csyor_reg" value="ok" />
  135.     <input type="hidden" name="redirect_to" value="<?php echo $redirect_to; ?>"/>
  136.         <hr class="hr20">
  137.         <hr class="new">
  138.         <div class="row push">
  139.           <div class="col-xs-btn">
  140.             <a href="<?php%20echo%20home_url()%20?>" class="btn btn-sm btn-danger btn-block">
  141.              返回首页</a>
  142.           </div>
  143.           <div class="col-xs-btn">
  144.             <a href="<?php%20echo%20home_url()%20?>/password" class="btn btn-sm btn-success btn-block">
  145.              忘记密码</a>
  146.           </div>
  147.         </div>      <br>
  148.       </form>
  149.         <?php
  150.          } else {
  151.        echo 'alert("您已注册成功,并已登录!")';
  152.      }
  153.     ?>
  154. </div>  <?php endwhileelse: ?>
  155.   <?php endif; ?>
  156. <canvas height="100%" width="100%" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 1;"  id="canvas"></canvas>
  157. <script>
  158. var canvas,
  159.     ctx,
  160.     width,
  161.     height,
  162.     size,
  163.     lines,
  164.     tick;
  165. function line() {
  166.     this.path = [];
  167.     this.speed = rand(10, 20);
  168.     this.count = randInt(10, 30);
  169.     this.x = width / 2, +1;
  170.     this.y = height / 2 + 1;
  171.     this.target = {
  172.         x: width / 2,
  173.         y: height / 2
  174.     };
  175.     this.dist = 0;
  176.     this.angle = 0;
  177.     this.hue = tick / 5;
  178.     this.life = 1;
  179.     this.updateAngle();
  180.     this.updateDist();
  181. }
  182. line.prototype.step = function(i) {
  183.     this.x += Math.cos(this.angle) * this.speed;
  184.     this.y += Math.sin(this.angle) * this.speed;
  185.     this.updateDist();
  186.     if (this.dist < this.speed) {
  187.         this.x = this.target.x;
  188.         this.y = this.target.y;
  189.         this.changeTarget();
  190.     }
  191.     this.path.push({
  192.         x: this.x,
  193.         y: this.y
  194.     });
  195.     if (this.path.length > this.count) {
  196.         this.path.shift();
  197.     }
  198.     this.life -= 0.001;
  199.     if (this.life <= 0) {
  200.         this.path = null;
  201.         lines.splice(i, 1);
  202.     }
  203. };
  204. line.prototype.updateDist = function() {
  205.     var dx = this.target.x - this.x,
  206.         dy = this.target.y - this.y;
  207.     this.dist = Math.sqrt(dx * dx + dy * dy);
  208. }
  209. line.prototype.updateAngle = function() {
  210.     var dx = this.target.x - this.x,
  211.         dy = this.target.y - this.y;
  212.     this.angle = Math.atan2(dy, dx);
  213. }
  214. line.prototype.changeTarget = function() {
  215.     var randStart = randInt(0, 3);
  216.     switch (randStart) {
  217.         case 0: // up
  218.             this.target.y = this.y - size;
  219.             break;
  220.         case 1: // right
  221.             this.target.x = this.x + size;
  222.             break;
  223.         case 2: // down
  224.             this.target.y = this.y + size;
  225.             break;
  226.         case 3: // left
  227.             this.target.x = this.x - size;
  228.     }
  229.     this.updateAngle();
  230. };
  231. line.prototype.draw = function(i) {
  232.     ctx.beginPath();
  233.     var rando = rand(0, 10);
  234.     for (var j = 0, length = this.path.length; j < length; j++) {
  235.         ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
  236.     }
  237.     ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
  238.     ctx.lineWidth = rand(0.1, 2);
  239.     ctx.stroke();
  240. };
  241. function rand(min, max) {
  242.     return Math.random() * (max - min) + min;
  243. }
  244. function randInt(min, max) {
  245.     return Math.floor(min + Math.random() * (max - min + 1));
  246. };
  247. function init() {
  248.     canvas = document.getElementById('canvas');
  249.     ctx = canvas.getContext('2d');
  250.     size = 30;
  251.     lines = [];
  252.     reset();
  253.     loop();
  254. }
  255. function reset() {
  256.     width = Math.ceil(window.innerWidth / 2) * 2;
  257.     height = Math.ceil(window.innerHeight / 2) * 2;
  258.     tick = 0;
  259.     lines.length = 0;
  260.     canvas.width = width;
  261.     canvas.height = height;
  262. }
  263. function create() {
  264.     if (tick % 10 === 0) {
  265.         lines.push(new line());
  266.     }
  267. }
  268. function step() {
  269.     var i = lines.length;
  270.     while (i--) {
  271.         lines[i].step(i);
  272.     }
  273. }
  274. function clear() {
  275.     ctx.globalCompositeOperation = 'destination-out';
  276.     ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
  277.     ctx.fillRect(0, 0, width, height);
  278.     ctx.globalCompositeOperation = 'lighter';
  279. }
  280. function draw() {
  281.     ctx.save();
  282.     ctx.translate(width / 2, height / 2);
  283.     ctx.rotate(tick * 0.001);
  284.     var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
  285.     ctx.scale(scale, scale);
  286.     ctx.translate(-width / 2, -height / 2);
  287.     var i = lines.length;
  288.     while (i--) {
  289.         lines[i].draw(i);
  290.     }
  291.     ctx.restore();
  292. }
  293. function loop() {
  294.     requestAnimationFrame(loop);
  295.     create();
  296.     step();
  297.     clear();
  298.     draw();
  299.     tick++;
  300. }
  301. function onresize() {
  302.     reset();
  303. }
  304. window.addEventListener('resize', onresize);
  305. init();
  306. </script>
  307. </body>
  308. </html>
  309. <audio autoplay="autoplay">
  310. <source src="http://p2.music.126.net/pOH2QXwQc_7IX4l2sB-iSA==/7954966629620463.mp3" type="audio/mpeg">
  311. </audio>

2.新建一个名为reg.css的css文件并添加以下代码放到你主题目录的css文件中

  1. *{
  2.     -webkit-box-sizing: border-box;
  3.     -moz-box-sizing: border-box;
  4.     -box-sizing: border-box;
  5.     padding:0;
  6.     margin:0;
  7.     list-style:none;
  8.     box-sizing: border-box;
  9. }
  10. body,html{
  11.     height:100%;
  12.     overflow-x:hidden;
  13. }
  14. body{
  15.     background:url(http://img.bizhi.sogou.com/images/2013/12/20/459331.jpg) no-repeat center;
  16.     background-size: cover;
  17.     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  18. }
  19. a{
  20.     color:#27A9E3;
  21.     text-decoration:none;
  22.     cursor:pointer;
  23. }
  24. .iblue {
  25.     margin: 20px 0px;
  26.     padding: 15px 15px 15px 70px;
  27.     font-size: 12px;
  28.     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  29.     border-radius: 5px;
  30.     background: url(../img/info.png) no-repeat 20px 20px #e4eff9;
  31.     border: 1px solid #9acbe8;
  32.     color: #5d93b2;
  33. }
  34. .qrimg {
  35.     display: block;
  36.     width: 100%;
  37.     border: 1px solid #ccc;
  38. }
  39. .vi_box{
  40.     margin: 5% auto 10% auto;
  41.     width: 90%;
  42.     padding: 40px;
  43.     background-color: #ffffff;
  44.     border-radius: 10px;
  45. }
  46. .logo {
  47.     display: block;
  48.     text-align: center;
  49.      margin: 0 auto 20px auto;
  50. }
  51. @media screen and (min-width: 768px){
  52.     .vi_box {
  53.          width: 20%;
  54.     }
  55. }
  56. a.logo{
  57.     display: block;
  58.     height: 58px;
  59.     width: 167px;
  60.     margin: 0 auto 30px auto;
  61.     background-size: 167px 42px;
  62. }
  63. .message {
  64.     margin: 10px 0 0 -58px;
  65.     padding: 18px 10px 18px 60px;
  66.     background: #27A9E3;
  67.     color: #fff;
  68.     font-size: 16px;
  69. }
  70. #darkbannerwrap {
  71.     background: url(/Style/images/login/aiwrap.png);
  72.     width: 18px;
  73.     height: 10px;
  74.     margin: 0 0 20px -58px;
  75.     position: relative;
  76. }
  77. input[type=text],
  78. input[type=file],
  79. input[type=password],
  80. input[type=email], select {
  81.     border: 1px solid #e4e4e4;
  82.     vertical-align: middle;
  83.     border-radius: 30px;
  84.     height: 50px;
  85.     padding: 0px 20px;
  86.     font-size: 14px;
  87.     color: #555555;
  88.     outline:none;
  89.     width:100%;
  90.     border-radius: 30px;
  91. }
  92. input[type=text]:focus,
  93. input[type=file]:focus,
  94. input[type=password]:focus,
  95. input[type=email]:focus, select:focus {
  96.     border: 1px solid #27A9E3;
  97.     border-radius: 30px;
  98. }
  99. input[type=submit],
  100. input[type=button]{
  101.     display: inline-block;
  102.     vertical-align: middle;
  103.     padding: 12px 24px;
  104.     margin: 0px;
  105.     font-size: 20px;
  106.     line-height: 24px;
  107.     text-align: center;
  108.     white-space: nowrap;
  109.     vertical-align: middle;
  110.     cursor: pointer;
  111.     color: #ffffff;
  112.     background-color: #5bc0de;
  113.     border-radius: 30px;
  114.     border: none;
  115.     -webkit-appearance: none;
  116.     outline:none;
  117.     width:100%;
  118.     border-radius: 30px;
  119. }
  120. hr.hr15 {
  121.     height: 15px;
  122.     border: none;
  123.     margin: 0px;
  124.     padding: 0px;
  125.     width: 100%;
  126. }
  127. hr.hr20 {
  128.     height: 20px;
  129.     border: none;
  130.     margin: 0px;
  131.     padding: 0px;
  132.     width: 100%;
  133. }
  134. hr.new{
  135.      margin-top: 20px;
  136.     margin-bottom: 20px;
  137.     border: 0;
  138.     border-top: 1px solid #eee;
  139. }
  140. .copyright{
  141.     font-size:14px;
  142.     color:rgba(255,255,255,0.85);
  143.     display:block;
  144.     position:absolute;
  145.     bottom:15px;
  146.     right:15px;
  147. }
  148. .chk_3 {
  149.     display: none;
  150. }
  151. .chk_3 + label {
  152.     background-color: #fafbfa;
  153.     /* padding: 9px; */
  154.     border-radius: 50px;
  155.     display: inline-block;
  156.     position: relative;
  157.     margin-right: 5px;
  158.     -webkit-transition: all 0.1s ease-in;
  159.     transition: all 0.1s ease-in;
  160.     width: 40px;
  161.     height: 17px;
  162. }
  163. .chk_3  + label:after {
  164.     content: ' ';
  165.     position: absolute;
  166.     top: 0;
  167.     -webkit-transition: box-shadow 0.1s ease-in;
  168.     transition: box-shadow 0.1s ease-in;
  169.     left: 0;
  170.     width: 100%;
  171.     height: 100%;
  172.     border-radius: 100px;
  173.     box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);
  174. }
  175. .chk_3  + label:before {
  176.     content: ' ';
  177.     position: absolute;
  178.     background: white;
  179.     top: 1px;
  180.     left: 1px;
  181.     z-index: 999999;
  182.     width: 18px;
  183.     -webkit-transition: all 0.1s ease-in;
  184.     transition: all 0.1s ease-in;
  185.     height: 17px;
  186.     border-radius: 100px;
  187.     box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);
  188. }
  189. .chk_3:active + label:after {
  190.     box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
  191. }
  192. .chk_3:active + label:before {
  193.     width: 37px;
  194. }
  195. .chk_3:checked:active + label:before {
  196.     width: 37px;
  197.     left: 20px;
  198. }
  199. .chk_3  + label:active {
  200.     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  201. }
  202. .chk_3:checked + label:before {
  203.     content: ' ';
  204.     position: absolute;
  205.     left: 26px;
  206.     border-radius: 100px;
  207. }
  208. .chk_3:checked + label:after {
  209.     content: ' ';
  210.     font-size: 1.5em;
  211.     position: absolute;
  212.     background: #4cda60;
  213.     box-shadow: 0 0 1px #4cda60;
  214. }
  215. .bg-primary {
  216.     color:#fff;
  217.     background-color:#337ab7
  218. }
  219. a.bg-primary:focus,a.bg-primary:hover {
  220.     background-color:#286090
  221. }
  222. .bg-success {
  223.     background-color:#dff0d8
  224. }
  225. a.bg-success:focus,a.bg-success:hover {
  226.     background-color:#c1e2b3
  227. }
  228. .bg-info {
  229.     background-color:#d9edf7
  230. }
  231. a.bg-info:focus,a.bg-info:hover {
  232.     background-color:#afd9ee
  233. }
  234. .bg-warning {
  235.     background-color:#fcf8e3
  236. }
  237. a.bg-warning:focus,a.bg-warning:hover {
  238.     background-color:#f7ecb5
  239. }
  240. .bg-danger {
  241.     background-color:#f2dede
  242. }
  243. a.bg-danger:focus,a.bg-danger:hover {
  244.     background-color:#e4b9b9
  245. }
  246. .row {
  247.     margin-right:-15px;
  248.     margin-left:-15px
  249. }
  250. .col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
  251.     position:relative;
  252.     min-height:1px;
  253.     padding-right:0px;
  254.     padding-left:0px
  255. }
  256. .col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
  257.     float:left
  258. }
  259. .col-xs-12 {
  260.     width:100%
  261. }
  262. .col-xs-11 {
  263.     width:91.66666667%
  264. }
  265. .col-xs-10 {
  266.     width:83.33333333%
  267. }
  268. .col-xs-9 {
  269.     width:75%
  270. }
  271. .col-xs-8 {
  272.     width:66.66666667%
  273. }
  274. .col-xs-7 {
  275.     width:58.33333333%
  276. }
  277. .col-xs-6 {
  278.     width:50%
  279. }
  280. .col-xs-5 {
  281.     width:41.66666667%
  282. }
  283. .col-xs-4 {
  284.     width:33.33333333%
  285. }
  286. .col-xs-3 {
  287.     width:25%
  288. }
  289. .col-xs-2 {
  290.     width:16.66666667%
  291. }
  292. .col-xs-1 {
  293.     width:8.33333333%
  294. }
  295. .col-xs-btn {
  296.     position:relative;
  297.     min-height:1px;
  298.     padding-right:20px;
  299.     padding-left:20px
  300. }
  301. .col-xs-btn {
  302.     float:left
  303. }
  304. .col-xs-btn {
  305.     width:50%
  306. }
  307. .col-xs-pass1 {
  308.     position:relative;
  309.     min-height:1px;
  310.     padding-right:5px;
  311. }
  312. .col-xs-pass1 {
  313.     float:left
  314. }
  315. .col-xs-pass1 {
  316.     width:50%
  317. }
  318. .col-xs-pass2 {
  319.     position:relative;
  320.     min-height:1px;
  321.     padding-left:5px
  322. }
  323. .col-xs-pass2 {
  324.     float:left
  325. }
  326. .col-xs-pass2 {
  327.     width:50%
  328. }
  329. .col-xs-yz {
  330.     position:relative;
  331.     min-height:1px;
  332.     padding-right:10px;
  333. text-align:center;
  334.     letter-spacing:10px;
  335.     font-size:200%;
  336.     font-family: "Microsoft Yahei";
  337.     margin: 1.5% auto 0px auto;
  338.     color:#f3a5a5;
  339. }
  340. .col-xs-yz {
  341.     float:left
  342. }
  343. .col-xs-yz {
  344.     width:50%
  345. }
  346. .col-xs-js {
  347.     position:relative;
  348.     min-height:1px;
  349.     padding-right:0px;
  350.     padding-left:10px
  351. }
  352. .col-xs-js {
  353.     float:left
  354. }
  355. .col-xs-js {
  356.     width:50%
  357. }
  358. .btn {
  359.     display:inline-block;
  360.     padding:6px 12px;
  361.     margin-bottom:0;
  362.     font-size:14px;
  363.     font-weight:400;
  364.     line-height:1.42857143;
  365.     text-align:center;
  366.     white-space:nowrap;
  367.     vertical-align:middle;
  368.     -ms-touch-action:manipulation;
  369.     touch-action:manipulation;
  370.     cursor:pointer;
  371.     -webkit-user-select:none;
  372.     -moz-user-select:none;
  373.     -ms-user-select:none;
  374.     user-select:none;
  375.     background-image:none;
  376.     border:1px solid transparent;
  377.     border-radius:4px
  378. }
  379. .btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus {
  380.     outline:thin dotted;
  381.     outline:5px auto -webkit-focus-ring-color;
  382.     outline-offset:-2px
  383. }
  384. .btn.focus,.btn:focus,.btn:hover {
  385.     color:#333;
  386.     text-decoration:none
  387. }
  388. .btn.active,.btn:active {
  389.     background-image:none;
  390.     outline:0;
  391.     -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
  392.     box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
  393. }
  394. .btn.disabled,.btn[disabled],fieldset[disabled] .btn {
  395.     cursor:not-allowed;
  396.     filter:alpha(opacity=65);
  397.     -webkit-box-shadow:none;
  398.     box-shadow:none;
  399.     opacity:.65
  400. }
  401. a.btn.disabled,fieldset[disabled] a.btn {
  402.     pointer-events:none
  403. }
  404. .btn-default {
  405.     color:#333;
  406.     background-color:#fff;
  407.     border-color:#ccc
  408. }
  409. .btn-default.focus,.btn-default:focus {
  410.     color:#333;
  411.     background-color:#e6e6e6;
  412.     border-color:#8c8c8c
  413. }
  414. .btn-default:hover {
  415.     color:#333;
  416.     background-color:#e6e6e6;
  417.     border-color:#adadad
  418. }
  419. .btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default {
  420.     color:#333;
  421.     background-color:#e6e6e6;
  422.     border-color:#adadad
  423. }
  424. .btn-default.active.focus,.btn-default.active:focus,.btn-default.active:hover,.btn-default:active.focus,.btn-default:active:focus,.btn-default:active:hover,.open>.dropdown-toggle.btn-default.focus,.open>.dropdown-toggle.btn-default:focus,.open>.dropdown-toggle.btn-default:hover {
  425.     color:#333;
  426.     background-color:#d4d4d4;
  427.     border-color:#8c8c8c
  428. }
  429. .btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default {
  430.     background-image:none
  431. }
  432. .btn-default.disabled.focus,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled].focus,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover {
  433.     background-color:#fff;
  434.     border-color:#ccc
  435. }
  436. .btn-default .badge {
  437.     color:#fff;
  438.     background-color:#333
  439. }
  440. .btn-primary {
  441.     color:#fff;
  442.     background-color:#337ab7;
  443.     border-color:#2e6da4
  444. }
  445. .btn-primary.focus,.btn-primary:focus {
  446.     color:#fff;
  447.     background-color:#286090;
  448.     border-color:#122b40
  449. }
  450. .btn-primary:hover {
  451.     color:#fff;
  452.     background-color:#286090;
  453.     border-color:#204d74
  454. }
  455. .btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary {
  456.     color:#fff;
  457.     background-color:#286090;
  458.     border-color:#204d74
  459. }
  460. .btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,.open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,.open>.dropdown-toggle.btn-primary:hover {
  461.     color:#fff;
  462.     background-color:#204d74;
  463.     border-color:#122b40
  464. }
  465. .btn-primary.active,.btn-primary:active,.open>.dropdown-toggle.btn-primary {
  466.     background-image:none
  467. }
  468. .btn-primary.disabled.focus,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled].focus,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover {
  469.     background-color:#337ab7;
  470.     border-color:#2e6da4
  471. }
  472. .btn-primary .badge {
  473.     color:#337ab7;
  474.     background-color:#fff
  475. }
  476. .btn-success {
  477.     color:#fff;
  478.     background-color:#5cb85c;
  479.     border-color:#4cae4c
  480. }
  481. .btn-success.focus,.btn-success:focus {
  482.     color:#fff;
  483.     background-color:#449d44;
  484.     border-color:#255625
  485. }
  486. .btn-success:hover {
  487.     color:#fff;
  488.     background-color:#449d44;
  489.     border-color:#398439
  490. }
  491. .btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success {
  492.     color:#fff;
  493.     background-color:#449d44;
  494.     border-color:#398439
  495. }
  496. .btn-success.active.focus,.btn-success.active:focus,.btn-success.active:hover,.btn-success:active.focus,.btn-success:active:focus,.btn-success:active:hover,.open>.dropdown-toggle.btn-success.focus,.open>.dropdown-toggle.btn-success:focus,.open>.dropdown-toggle.btn-success:hover {
  497.     color:#fff;
  498.     background-color:#398439;
  499.     border-color:#255625
  500. }
  501. .btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success {
  502.     background-image:none
  503. }
  504. .btn-success.disabled.focus,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled].focus,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover {
  505.     background-color:#5cb85c;
  506.     border-color:#4cae4c
  507. }
  508. .btn-success .badge {
  509.     color:#5cb85c;
  510.     background-color:#fff
  511. }
  512. .btn-info {
  513.     color:#fff;
  514.     background-color:#5bc0de;
  515.     border-color:#46b8da
  516. }
  517. .btn-info.focus,.btn-info:focus {
  518.     color:#fff;
  519.     background-color:#31b0d5;
  520.     border-color:#1b6d85
  521. }
  522. .btn-info:hover {
  523.     color:#fff;
  524.     background-color:#31b0d5;
  525.     border-color:#269abc
  526. }
  527. .btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info {
  528.     color:#fff;
  529.     background-color:#31b0d5;
  530.     border-color:#269abc
  531. }
  532. .btn-info.active.focus,.btn-info.active:focus,.btn-info.active:hover,.btn-info:active.focus,.btn-info:active:focus,.btn-info:active:hover,.open>.dropdown-toggle.btn-info.focus,.open>.dropdown-toggle.btn-info:focus,.open>.dropdown-toggle.btn-info:hover {
  533.     color:#fff;
  534.     background-color:#269abc;
  535.     border-color:#1b6d85
  536. }
  537. .btn-info.active,.btn-info:active,.open>.dropdown-toggle.btn-info {
  538.     background-image:none
  539. }
  540. .btn-info.disabled.focus,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled].focus,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover {
  541.     background-color:#5bc0de;
  542.     border-color:#46b8da
  543. }
  544. .btn-info .badge {
  545.     color:#5bc0de;
  546.     background-color:#fff
  547. }
  548. .btn-warning {
  549.     color:#fff;
  550.     background-color:#f0ad4e;
  551.     border-color:#eea236
  552. }
  553. .btn-warning.focus,.btn-warning:focus {
  554.     color:#fff;
  555.     background-color:#ec971f;
  556.     border-color:#985f0d
  557. }
  558. .btn-warning:hover {
  559.     color:#fff;
  560.     background-color:#ec971f;
  561.     border-color:#d58512
  562. }
  563. .btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning {
  564.     color:#fff;
  565.     background-color:#ec971f;
  566.     border-color:#d58512
  567. }
  568. .btn-warning.active.focus,.btn-warning.active:focus,.btn-warning.active:hover,.btn-warning:active.focus,.btn-warning:active:focus,.btn-warning:active:hover,.open>.dropdown-toggle.btn-warning.focus,.open>.dropdown-toggle.btn-warning:focus,.open>.dropdown-toggle.btn-warning:hover {
  569.     color:#fff;
  570.     background-color:#d58512;
  571.     border-color:#985f0d
  572. }
  573. .btn-warning.active,.btn-warning:active,.open>.dropdown-toggle.btn-warning {
  574.     background-image:none
  575. }
  576. .btn-warning.disabled.focus,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled].focus,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover {
  577.     background-color:#f0ad4e;
  578.     border-color:#eea236
  579. }
  580. .btn-warning .badge {
  581.     color:#f0ad4e;
  582.     background-color:#fff
  583. }
  584. .btn-danger {
  585.     color:#fff;
  586.     background-color:#d9534f;
  587.     border-color:#d43f3a
  588. }
  589. .btn-danger.focus,.btn-danger:focus {
  590.     color:#fff;
  591.     background-color:#c9302c;
  592.     border-color:#761c19
  593. }
  594. .btn-danger:hover {
  595.     color:#fff;
  596.     background-color:#c9302c;
  597.     border-color:#ac2925
  598. }
  599. .btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger {
  600.     color:#fff;
  601.     background-color:#c9302c;
  602.     border-color:#ac2925
  603. }
  604. .btn-danger.active.focus,.btn-danger.active:focus,.btn-danger.active:hover,.btn-danger:active.focus,.btn-danger:active:focus,.btn-danger:active:hover,.open>.dropdown-toggle.btn-danger.focus,.open>.dropdown-toggle.btn-danger:focus,.open>.dropdown-toggle.btn-danger:hover {
  605.     color:#fff;
  606.     background-color:#ac2925;
  607.     border-color:#761c19
  608. }
  609. .btn-danger.active,.btn-danger:active,.open>.dropdown-toggle.btn-danger {
  610.     background-image:none
  611. }
  612. .btn-danger.disabled.focus,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled].focus,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover {
  613.     background-color:#d9534f;
  614.     border-color:#d43f3a
  615. }
  616. .btn-danger .badge {
  617.     color:#d9534f;
  618.     background-color:#fff
  619. }
  620. .btn-link {
  621.     font-weight:400;
  622.     color:#337ab7;
  623.     border-radius:0
  624. }
  625. .btn-link,.btn-link.active,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link {
  626.     background-color:transparent;
  627.     -webkit-box-shadow:none;
  628.     box-shadow:none
  629. }
  630. .btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover {
  631.     border-color:transparent
  632. }
  633. .btn-link:focus,.btn-link:hover {
  634.     color:#23527c;
  635.     text-decoration:underline;
  636.     background-color:transparent
  637. }
  638. .btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover {
  639.     color:#777;
  640.     text-decoration:none
  641. }
  642. .btn-group-lg>.btn,.btn-lg {
  643.     padding:10px 16px;
  644.     font-size:18px;
  645.     line-height:1.3333333;
  646.     border-radius:6px
  647. }
  648. .btn-group-sm>.btn,.btn-sm {
  649.     padding:5px 10px;
  650.     font-size:12px;
  651.     line-height:1.5;
  652.     border-radius:3px
  653. }
  654. .btn-group-xs>.btn,.btn-xs {
  655.     padding:1px 5px;
  656.     font-size:12px;
  657.     line-height:1.5;
  658.     border-radius:3px
  659. }
  660. .btn-block {
  661.     display:block;
  662.     width:100%
  663. }
  664. .btn-block+.btn-block {
  665.     margin-top:5px
  666. }
  667. .btn-group,.btn-group-vertical {
  668.     position:relative;
  669.     display:inline-block;
  670.     vertical-align:middle
  671. }
  672. .btn-group-vertical>.btn,.btn-group>.btn {
  673.     position:relative;
  674.     float:left
  675. }
  676. .btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover {
  677.     z-index:2
  678. }
  679. .btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group {
  680.     margin-left:-1px
  681. }
  682. .btn-toolbar {
  683.     margin-left:-5px
  684. }
  685. .btn-toolbar .btn,.btn-toolbar .btn-group,.btn-toolbar .input-group {
  686.     float:left
  687. }
  688. .btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group {
  689.     margin-left:5px
  690. }
  691. .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  692.     border-radius:0
  693. }
  694. .btn-group>.btn:first-child {
  695.     margin-left:0
  696. }
  697. .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
  698.     border-top-right-radius:0;
  699.     border-bottom-right-radius:0
  700. }
  701. .btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child) {
  702.     border-top-left-radius:0;
  703.     border-bottom-left-radius:0
  704. }
  705. .btn-group>.btn-group {
  706.     float:left
  707. }
  708. .btn-group>.btn-group:not(:first-child):not(:last-child)>.btn {
  709.     border-radius:0
  710. }
  711. .btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
  712.     border-top-right-radius:0;
  713.     border-bottom-right-radius:0
  714. }
  715. .btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child {
  716.     border-top-left-radius:0;
  717.     border-bottom-left-radius:0
  718. }
  719. .btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle {
  720.     outline:0
  721. }
  722. .btn-group>.btn+.dropdown-toggle {
  723.     padding-right:8px;
  724.     padding-left:8px
  725. }
  726. .btn-group>.btn-lg+.dropdown-toggle {
  727.     padding-right:12px;
  728.     padding-left:12px
  729. }
  730. .btn-group.open .dropdown-toggle {
  731.     -webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
  732.     box-shadow:inset 0 3px 5px rgba(0,0,0,.125)
  733. }
  734. .btn-group.open .dropdown-toggle.btn-link {
  735.     -webkit-box-shadow:none;
  736.     box-shadow:none
  737. }
  738. .btn .caret {
  739.     margin-left:0
  740. }
  741. .btn-lg .caret {
  742.     border-width:5px 5px 0;
  743.     border-bottom-width:0
  744. }
  745. .dropup .btn-lg .caret {
  746.     border-width:0 5px 5px
  747. }
  748. .btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn {
  749.     display:block;
  750.     float:none;
  751.     width:100%;
  752.     max-width:100%
  753. }
  754. .btn-group-vertical>.btn-group>.btn {
  755.     float:none
  756. }
  757. .btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group {
  758.     margin-top:-1px;
  759.     margin-left:0
  760. }
  761. .btn-group-vertical>.btn:not(:first-child):not(:last-child) {
  762.     border-radius:0
  763. }
  764. .btn-group-vertical>.btn:first-child:not(:last-child) {
  765.     border-top-left-radius:4px;
  766.     border-top-right-radius:4px;
  767.     border-bottom-right-radius:0;
  768.     border-bottom-left-radius:0
  769. }
  770. .btn-group-vertical>.btn:last-child:not(:first-child) {
  771.     border-top-left-radius:0;
  772.     border-top-right-radius:0;
  773.     border-bottom-right-radius:4px;
  774.     border-bottom-left-radius:4px
  775. }
  776. .btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn {
  777.     border-radius:0
  778. }
  779. .btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle {
  780.     border-bottom-right-radius:0;
  781.     border-bottom-left-radius:0
  782. }
  783. .btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child {
  784.     border-top-left-radius:0;
  785.     border-top-right-radius:0
  786. }
  787. .btn-group-justified {
  788.     display:table;
  789.     width:100%;
  790.     table-layout:fixed;
  791.     border-collapse:separate
  792. }
  793. .btn-group-justified>.btn,.btn-group-justified>.btn-group {
  794.     display:table-cell;
  795.     float:none;
  796.     width:1%
  797. }
  798. .btn-group-justified>.btn-group .btn {
  799.     width:100%
  800. }
  801. .btn-group-justified>.btn-group .dropdown-menu {
  802.     left:auto
  803. }
  804. button.close {
  805.     -webkit-appearance:none;
  806.     padding:0;
  807.     cursor:pointer;
  808.     background:0 0;
  809.     border:0
  810. }

3.打开后台页面>新建页面>选择刚刚制作的模板>发布

文件下载
下载地址
weinxin
我的微信
这是我的微信扫一扫
SJ

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: