html固定在屏幕右下角的信息（提示信息，广告）

来源：互联网发布：阿里云服务器如何重启编辑：程序博客网时间：2024/06/05 04:22

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>

0 0