CSS通知
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Notic</title>
<style>
.layout {
width:600px;
margin:0 auto;
}
* {
margin:0;
padding:0;
}
.layout>div {
margin-top:30px;
}
.h {
color:#fff;
padding:1px 16px;
line-height: 2.5;
border-radius:3px;
}
div>ul .close {
text-decoration:none;
float:right;
font-size:24px;
font-weight:bold;
color:rgb(250, 250, 250) ;
cursor: pointer;
}
div>ul>li.noc {
list-style: none;
font-size: 24px;
font-weight:bold;
color:#fff;
}
div>ul>li.sen {
list-style:none;
}
.h.congratulations {
background-color:#4CAF50;
}
.h.notice {
background-color: #2196F3;
}
.h.god {
background-color: #f44336;
}
.h.warning {
background-color: #ff9800;
}
</style>
</head>
<body>
<div class="layout">
<div class="h congratulations">
<ul>
<span class="close">×</span>
<li class="noc">恭喜你</li>
<li class="sen">获得本周学霸，继续加油吧</li>
</ul>
</div>
<div class="h notice">
<ul>
<span class="close">×</span>
<li class="noc">通知</li>
<li class="sen">晚上上课，不要忘了</li>
</ul>
</div>
<div class="h god">
<ul>
<span class="close">×</span>
<li class="noc">天啊</li>
<li class="sen">竟然几天没做任务</li>
</ul>
</div>
<div class="h warning">
<ul>
<span class="close">×</span>
<li class="noc">警告</li>
<li class="sen">学如逆水行舟，不进则退</li>
</ul>
</div>
</div>
</body>
</html>
网友评论