.ulcss{width:300pxheight:30pxline-height:30pxbackground:url(喇叭图标地址) no-repeat 5 centerpadding-left:10px}
</style>
<div>
<ul class="ulcss">
<li>消息提示(4)</li>
</ul>
</div>
颜色这些自己定义
div用于大的布局。小的地方用其他标签，比如ul这些也可以，因为div兼容问题比较多
喇叭一直在页面上，可以通过CSS来实现，如：
.audioIcon {position: fixed
top: 45px
right: 35px
z-index: 2000
width: 60px
height: 60px
}
暂停或者播放，则可以通过JS来实现，如：
function playOrPaused(id,obj){if(audio.paused){
audio.play()
//这里写改变小喇叭的图片样式
return
}
audio.pause()
//这里写改变小喇叭的图片样式
}
去bootcss网站上下载一个看一下就明白了，让别人讲你自己也要了解下。.icon-cart:before {
content: "\e623"
}
或
.icon-cart:after {
content: "\e623"
}
都可以
\e623 就是对应的你要插入的那个字体图标的编号
![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png)
