Created
October 13, 2017 09:57
-
-
Save anonymous/289448843d25ff4f72a9ecd49169bbe0 to your computer and use it in GitHub Desktop.
// source http://js.jirengu.com/tulahabene
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
.content { | |
width: 600px; | |
margin: 0 auto; | |
} | |
.alert { | |
margin-top: 30px; | |
border-radius: 3px; | |
color: #fff; | |
position: relative; | |
padding: 0.75rem 0.75rem 0.75rem 0.75rem | |
} | |
.alert>span { | |
position: absolute; | |
right: 0.5em; | |
top: 0.02em; | |
} | |
.alert>h3 { | |
margin: 0.25rem 0; | |
} | |
.close { | |
font-size: 23px; | |
font-weight: bold; | |
cursor: pointer; | |
} | |
.success { | |
background-color: #32cf65; | |
} | |
.info { | |
background-color: #3776d9; | |
} | |
.danger { | |
background-color: #fc3c63; | |
} | |
.warning { | |
background-color: #fedc63; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="content"> | |
<div class="alert success"><span class="close">x</span><h3>成功</h3><p>提交成功!</p></div> | |
<div class="alert info"><span class="close">x</span><h3>消息</h3><p>你有一条新消息</p></div> | |
<div class="alert danger"><span class="close">x</span><h3>错误</h3><p>烫烫烫烫</p></div> | |
<div class="alert warning"><span class="close">x</span><h3>警告</h3><p>下次不许这样了</p></div> | |
</div> | |
<script id="jsbin-source-css" type="text/css">.content { | |
width: 600px; | |
margin: 0 auto; | |
} | |
.alert { | |
margin-top: 30px; | |
border-radius: 3px; | |
color: #fff; | |
position: relative; | |
padding: 0.75rem 0.75rem 0.75rem 0.75rem | |
} | |
.alert>span { | |
position: absolute; | |
right: 0.5em; | |
top: 0.02em; | |
} | |
.alert>h3 { | |
margin: 0.25rem 0; | |
} | |
.close { | |
font-size: 23px; | |
font-weight: bold; | |
cursor: pointer; | |
} | |
.success { | |
background-color: #32cf65; | |
} | |
.info { | |
background-color: #3776d9; | |
} | |
.danger { | |
background-color: #fc3c63; | |
} | |
.warning { | |
background-color: #fedc63; | |
}</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.content { | |
width: 600px; | |
margin: 0 auto; | |
} | |
.alert { | |
margin-top: 30px; | |
border-radius: 3px; | |
color: #fff; | |
position: relative; | |
padding: 0.75rem 0.75rem 0.75rem 0.75rem | |
} | |
.alert>span { | |
position: absolute; | |
right: 0.5em; | |
top: 0.02em; | |
} | |
.alert>h3 { | |
margin: 0.25rem 0; | |
} | |
.close { | |
font-size: 23px; | |
font-weight: bold; | |
cursor: pointer; | |
} | |
.success { | |
background-color: #32cf65; | |
} | |
.info { | |
background-color: #3776d9; | |
} | |
.danger { | |
background-color: #fc3c63; | |
} | |
.warning { | |
background-color: #fedc63; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment