用js+css实现仿h5 Notification功能

```html <div class="notification-container"> <div class="notification-wrapper"> <div class="notification-title">标题</div> <div class="notification-content">内容</div> </div> </div> /* CSS */ .notification-container { // 这里是一个容器，用来放置Notification的元素，可以设置位置、大小、背景色、透明度等样式。 position: fixed; // 固定位置，不会随浏览器的滚动而变化。 width: 200px; // 固定宽度，可以根据需要自行调整。 height: 100px; // 固定高度，可以根据需要自行调整。 top: 20px; // 距离浏览器上方20px的位置处显示Notification元素。向下增加top值则会往下平移显示位置。 right: 20px; // 距浏览器左方20px的位置处显式Notificaiton元素；向左减少right值则会往左平衡显式位子。 background-color: #f9f9f9; // Notification背景颜色及透明度；可以根据需要进行修改或者去除此行代理使用默认背景透明度0.5. opacity: 0.5; // Notification 的透明度；0为不适用此效果,1为不适用此效果,0~1之间依此凸升. z-index : 999999 ;// 运用css3中z-index来对Notifiaciton进行重新分层,使其在当前文章中有最大优先权. } .notificaiton_wrapper { /* 放在上一个CSS代理中的position固定位子之后执衬 */ position : relative ; /* 由于是相对于上一个CSS代理中position固定之后运作,所以运甬top/left/right/bottom都无法使Notificaiton盒子平衡 */ width : 100% ; /* 正好占100% ,也就是200px */ height : 100% ; /* 正好占100%,也就是100px */ } .notificaiton_title { /* 酝酿title部分 */ font - size : 14 px ; /* title字体大少14PX*/ font - weight : bolder ; /* title字重劲*/ padding - left : 5 px ; /* title左内间隔5PX*/ } . notificaiton_content { /* 酝酿content部分*/ font - size : 12 px ; /* content字体大少12PX*/ } ```