Skip to content

Instantly share code, notes, and snippets.

@liu246542

liu246542/nine_template.html

Last active May 4, 2019 15:03
Show Gist options
  • Save liu246542/6694d2cf18cf3ccb999dfbc82b210ace to your computer and use it in GitHub Desktop.
Save liu246542/6694d2cf18cf3ccb999dfbc82b210ace to your computer and use it in GitHub Desktop.
Download ZIP
守序善良-混乱邪恶 九宫格模板
Raw
nine_template.html
<!DOCTYPE html>
<html>
<head>
<title>九宫图</title>
<meta charset="utf-8">
<style type="text/css">
#content {
background-color: black;
margin: 0 auto 0 auto;
width: 600px;
height: 720px;
}
.card {
color: white;
width: 160px;
height: 200px;
padding: 18px;
float: left;
}
.card>img {
border: 1px solid white;
}
.quote {
height: 50px;
/*font-family: Source Han CN;*/
/*font-family: Microsoft YaHei;*/
font-weight: 600;
position: relative;
top: -10px;
}
</style>
<script type="text/javascript" src="./html2canvas.min.js"></script>
</head>
<body>
<div id="content">
<div class="card">
<img src="./geping.jpg">
<center>
<h2>守序善良</h2>
</center>
<center class="quote">b站黑我千百遍<br />我为b站献音源</center>
</div>
<div class="card">
<img src="./zhang.jpg">
<center>
<h2>中立善良</h2>
</center>
<center class="quote">你们年轻人挺有意思的</center>
</div>
<div class="card">
<img src="./wyf.jpg">
<center>
<h2>混乱善良</h2>
</center>
<center class="quote">大碗能让你开心<br />但这确是我本意</center>
</div>
<div class="card">
<img src="./leijun.jpg">
<center>
<h2>守序中立</h2>
</center>
<center class="quote">Are you OK?</center>
</div>
<div class="card">
<img src="./lx.jpg">
<center>
<h2>绝对中立</h2>
</center>
<center class="quote">挺好玩，不介入</center>
</div>
<div class="card">
<img src="./blg.jpg">
<center>
<h2>混乱中立</h2>
</center>
<center class="quote">这是个赚钱的机会</center>
</div>
<div class="card">
<img src="./banana.jpg">
<center>
<h2>守序邪恶</h2>
</center>
<center class="quote">请不要鬼畜我</center>
</div>
<div class="card">
<img src="./lxlt.jpg">
<center>
<h2>中立邪恶</h2>
</center>
<center class="quote">有个小组织在黑我</center>
</div>
<div class="card">
<img src="./cxk.jpg">
<center>
<h2>混乱邪恶</h2>
</center>
<center class="quote">律师函警告</center>
</div>
</div>
<script type="text/javascript">
let headcollect = document.getElementsByTagName('h2');
console.log(headcollect)
const colorBar = ["white", "gray", "purple", "olive", "green", "lime", "fuchsia", "teal", "red"]
colorBar.forEach((value, index) => { headcollect[index].style['color'] = value })
html2canvas(document.getElementById("content")).then(canvas => {
document.body.appendChild(canvas)
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment