lsongdev · February 13, 2016 13:45
diff --git a/wifi.html b/wifi.html
 <!DOCTYPE html>
 <html lang="en" >
 <head>
 <title>Wi-Fi</title>
 <style type="text/css"> 
 * {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue",Helvetica Neue,Helvetica,Arial,Heiti SC,Hiragino Sans GB,Microsoft Yahei,sans-serif;
 }

 .header {
  min-height: 500px;
  position: relative;
  background: url(https://wifi.weixin.qq.com/resources/images/background.jpg) gray;
  background-size: cover;
 }

 .header:after {
  content: ' ';
  bottom: 0;
  width: 100%;
  height: 100px;
  display: block;
  position: absolute;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(1,rgba(0,0,0,.4)));
 }

 .header .user {
  top: 30%;
  width: 100%;
  color: #fff;
  text-align: center;
  position: absolute;
 }

 .header .user > .avatar {
  width: 100px;
 }


 .main {
  text-align: center;
 }

 .main p {
  padding: 50px;
 }

 .btn {
  color: #fff;
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  border-radius: 5px;
  background: #04be01;
  text-decoration: none;
  display: inline-block;
 }

 </style>
 </head>
 <body>
  <div class="container" >
    <header class="header" >
      <div class="user" >
        <img class="avatar" src="http://api.lsong.org/qr?text=http://wifi.lsong.org/login" />
        <h2>欢迎您</h2>
      </div>
    </header>
    <section class="main" >
      <p>欢迎使用Wi-Fi</p>
      <a class="btn" href="">一键连Wi-Fi</a>
    </section>
  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<title>Wi-Fi</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	font-family: "Helvetica Neue",Helvetica Neue,Helvetica,Arial,Heiti SC,Hiragino Sans GB,Microsoft Yahei,sans-serif;
	}

	.header {
	min-height: 500px;
	position: relative;
	background: url(https://wifi.weixin.qq.com/resources/images/background.jpg) gray;
	background-size: cover;
	}

	.header:after {
	content: ' ';
	bottom: 0;
	width: 100%;
	height: 100px;
	display: block;
	position: absolute;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(1,rgba(0,0,0,.4)));
	}

	.header .user {
	top: 30%;
	width: 100%;
	color: #fff;
	text-align: center;
	position: absolute;
	}

	.header .user > .avatar {
	width: 100px;
	}


	.main {
	text-align: center;
	}

	.main p {
	padding: 50px;
	}

	.btn {
	color: #fff;
	height: 40px;
	padding: 0 20px;
	line-height: 40px;
	border-radius: 5px;
	background: #04be01;
	text-decoration: none;
	display: inline-block;
	}

	</style>
	</head>
	<body>
	<div class="container" >
	<header class="header" >
	<div class="user" >
	<img class="avatar" src="http://api.lsong.org/qr?text=http://wifi.lsong.org/login" />
	<h2>欢迎您</h2>
	</div>
	</header>
	<section class="main" >
	<p>欢迎使用Wi-Fi</p>
	<a class="btn" href="">一键连Wi-Fi</a>
	</section>
	</div>
	</body>
	</html>