console
<div class="container">
<header>
<h1>bilibili直播通知</h1>
</header>
<section>
<p>您关注的5个主播正在直播,更多详情请查看下表</p>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>主播</th>
<th>开播时间</th>
<th>链接</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>渗透之C君</td>
<td>2017-09-13 20:26:15</td>
<td><a href="https://live.bilibili.com/1011" target="_blank">https://live.bilibili.com/1011</a></td>
</tr>
<tr>
<td>逍遥散人</td>
<td>2017-09-13 20:29:17</td>
<td>https://live.bilibili.com/1017</td>
</tr>
</tbody>
</table>
</div>
</section>
<footer>
<p>此邮件由<a href="#">LiveMessager</a>发送,如果您不想再次收到此邮件,请前往后台关闭邮件提醒</p>
</footer>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
margin-top: 10px;
min-width: 600px;
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
padding: 8px 16px;
}
a {
text-decoration: none;
color: #337ab7;
}
a:hover {
text-decoration: underline;
}
.container {
max-width: 640px;
background-color: #FFFFFF;
}
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
header {
background-color: #ffafc9;
background: -webkit-linear-gradient(-45deg, #ffafc9, #f25d8e);
width: 100%;
height: 200px;
vertical-align: middle;
display: flex;
align-items: center;
}
header h1 {
color: #00a1d6;
width: 100%;
font-size: 20px;
line-height: 40px;
text-align: center;
font-weight: normal;
background-color: rgba(255,255,255,0.6);
}
section {
padding: 40px 20px 10px;
}
footer p {
font-size: 12px;
color: #999;
text-align: center;
padding: 40px 0 20px 0;
}
footer a {
color: #999;
text-decoration: underline;
}
@media screen and (min-width:420px) {
header {
height: 300px;
}
header h1 {
font-size: 30px;
line-height: 60px;
}
}