1.截图:
2.css:
.warning-msg {display:block; bottom:0px; right:0px; position:fixed;}
* html .warning-msg {position:absolute; right:18px}
.notification {
font-family:Digital,'Microsoft YaHei',STFangsong;
display: flex;
margin: 0 auto;
width: 300px;
min-height: 70px;
}
.notification .info {
flex: 1;
padding: 10px 10px 0 10px;
background: #6c7e98;
border-radius: 3px 0 0 3px;
border-bottom: 3px solid #c0cdd1;
}
.notification .info span {
margin: 0;
padding: 0;
font-size: 16px;
color: #fff;
}
.notification .info p {
margin: 0;
padding: 5px 0;
font-size: 12px;
color: #c5bebe;
}
.notification .info .button {
display: inline-block;
margin: 3px 3px 5px 0;
padding: 3px 7px;
border-radius: 2px;
border-bottom: 1px solid;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #ecf0f1;
}
.notification .info .button.gray {
background: #95a5a6 ;
border-bottom-color: #798d8f;
}
.notification .info .button {
background: #435d8a;
border-bottom-color: #435d8a;
}
3.html:
<div class="warning-msg">
<div class="notification">
<div class="info">
<span></span>
<p></p>
<a href="#" class="button">详情</a><a href="#" class="button gray">忽略</a>
</div>
</div>
</div>