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>