xingrz · April 1, 2014 10:18
diff --git a/exit.html b/exit.html
 <!DOCTYPE html>
 <html lang="zh-cn">
  <head>
    <title>出口资讯</title>
    <meta charset="utf8">
    <style>
    body {
      margin: 0;
      padding: 0 100px;
      background: black;
      color: white;
      font-family: Arial, "Simhei";
      font-size: 30px;
    }

    strong, small {
      display: block;
    }

    small {
      font-size: 50%;
      font-weight: normal;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    li {
      display: block;
    }

    .brand {
      margin-left: auto;
      margin-right: auto;
      padding-top: 10px;
      padding-bottom: 10px;
      width: 400px;
      text-align: center;
      background: white;
      color: red;
      font-size: 80%;
    }

    .title {
      text-align: center;
      margin-top: 200px;
      font-size: 300%;
    }

    .exits > li {
      padding: 20px 0;
    }

    .exit {
      float: left;
      width: 250px;
    }

    .exit strong {
      font-size: 450%;
      line-height: 1;
      margin-top: -10%;
      float: left;
      width: 120px;
    }

    .exit small {
      font-size: 160%;
      margin-left: 120px;
    }

    .exit small.en {
      font-size: 120%;
    }

    .road {
      margin-left: 250px;
      background: white;
      color: black;
      border-radius: 20px;
      font-size: 140%;
      padding: 10px 20px;
    }

    .pois {
      margin-left: 250px;
    }

    .pois > li {
      padding: 15px 10px;
    }
    </style>
  </head>
  <body>
    <div class="brand">
      <strong>广州地铁</strong>
      <small>Guangzhou Metro</small>
    </div>

    <h1 class="title">
      <strong>出口资讯</strong>
      <small>Exit Information</small>
    </h1>

    <ul class="exits">
      <li>
        <header>
          <div class="exit">
            <strong>A</strong>
            <small class="zh">出口</small>
            <small class="en">Exit</small>
          </div>
          <h2 class="road">
            <strong>华软大道西</strong>
            <small>CS Avenue</small>
          </h2>
        </header>
        <ul class="pois">
          <li>
            <strong>E型教学楼</strong>
            <small>Teaching building</small>
          </li>
          <li>
            <strong>体育场</strong>
            <small>Playground</small>
          </li>
        </ul>
      </li>
      <li>
        <header>
          <div class="exit">
            <strong>B</strong>
            <small class="zh">出口</small>
            <small class="en">Exit</small>
          </div>
          <h2 class="road">
            <strong>华软大道东<strong>
            <small>CS Avenue</small>
          </h2>
        </header>
        <ul class="pois">
          <li>
            <strong>教保处</strong>
            <small>Jiaobaochu</small>
          </li>
        </ul>
      </li>
      <li>
        <header>
          <div class="exit">
            <strong>C</strong>
            <small class="zh">出口</small>
            <small class="en">Exit</small>
          </div>
          <h2 class="road">
            <strong>华软大道东<strong>
            <small>CS Avenue</small>
          </h2>
        </header>
        <ul class="pois">
          <li>
            <strong>网络中心</strong>
            <small>Wangluo Zhongxin</small>
          </li>
          <li>
            <strong>学生处</strong>
            <small>Xueshengchu</small>
          </li>
        </ul>
      </li>
    </ul>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="zh-cn">
	<head>
	<title>出口资讯</title>
	<meta charset="utf8">
	<style>
	body {
	margin: 0;
	padding: 0 100px;
	background: black;
	color: white;
	font-family: Arial, "Simhei";
	font-size: 30px;
	}

	strong, small {
	display: block;
	}

	small {
	font-size: 50%;
	font-weight: normal;
	}

	ul {
	list-style: none;
	padding: 0;
	}

	li {
	display: block;
	}

	.brand {
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 400px;
	text-align: center;
	background: white;
	color: red;
	font-size: 80%;
	}

	.title {
	text-align: center;
	margin-top: 200px;
	font-size: 300%;
	}

	.exits > li {
	padding: 20px 0;
	}

	.exit {
	float: left;
	width: 250px;
	}

	.exit strong {
	font-size: 450%;
	line-height: 1;
	margin-top: -10%;
	float: left;
	width: 120px;
	}

	.exit small {
	font-size: 160%;
	margin-left: 120px;
	}

	.exit small.en {
	font-size: 120%;
	}

	.road {
	margin-left: 250px;
	background: white;
	color: black;
	border-radius: 20px;
	font-size: 140%;
	padding: 10px 20px;
	}

	.pois {
	margin-left: 250px;
	}

	.pois > li {
	padding: 15px 10px;
	}
	</style>
	</head>
	<body>
	<div class="brand">
	<strong>广州地铁</strong>
	<small>Guangzhou Metro</small>
	</div>

	<h1 class="title">
	<strong>出口资讯</strong>
	<small>Exit Information</small>
	</h1>

	<ul class="exits">
	<li>
	<header>
	<div class="exit">
	<strong>A</strong>
	<small class="zh">出口</small>
	<small class="en">Exit</small>
	</div>
	<h2 class="road">
	<strong>华软大道西</strong>
	<small>CS Avenue</small>
	</h2>
	</header>
	<ul class="pois">
	<li>
	<strong>E型教学楼</strong>
	<small>Teaching building</small>
	</li>
	<li>
	<strong>体育场</strong>
	<small>Playground</small>
	</li>
	</ul>
	</li>
	<li>
	<header>
	<div class="exit">
	<strong>B</strong>
	<small class="zh">出口</small>
	<small class="en">Exit</small>
	</div>
	<h2 class="road">
	<strong>华软大道东<strong>
	<small>CS Avenue</small>
	</h2>
	</header>
	<ul class="pois">
	<li>
	<strong>教保处</strong>
	<small>Jiaobaochu</small>
	</li>
	</ul>
	</li>
	<li>
	<header>
	<div class="exit">
	<strong>C</strong>
	<small class="zh">出口</small>
	<small class="en">Exit</small>
	</div>
	<h2 class="road">
	<strong>华软大道东<strong>
	<small>CS Avenue</small>
	</h2>
	</header>
	<ul class="pois">
	<li>
	<strong>网络中心</strong>
	<small>Wangluo Zhongxin</small>
	</li>
	<li>
	<strong>学生处</strong>
	<small>Xueshengchu</small>
	</li>
	</ul>
	</li>
	</ul>
	</body>
	</html>