html alert效果//来源http://js.jirengu.com/tulahabene

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html alert效果//来源http://js.jirengu.com/tulahabene相关的知识，希望对你有一定的参考价值。

.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;
}
<!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>

以上是关于html alert效果//来源http://js.jirengu.com/tulahabene的主要内容，如果未能解决你的问题，请参考以下文章

html 菜单//来源http://js.jirengu.com/hirasuxuva

html 企业首页//来源http://js.jirengu.com/xolureheqo

html Modal样式//来源http://js.jirengu.com/dituyefika

alert的使用方法有哪些？

alert效果

去除移动端alert/confirm的网址(url)