在网页开发过程中实现公告上下滚动是常有的事,那如何实现呢?请往下看:
html代码:
<div class="notice">
<ul>
<li>开通优睿素材网vip会员,畅享海量资源下载</li>
<li>优睿素材网正式上线啦,更多素材等着你哦</li>
</ul>
</div>
css代码:
div,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
width: 300px;/*单行显示,超出隐藏*/
height: 35px;/*固定公告栏显示区域的高度*/
padding: 0 30px;
background-color: #b3effe;
overflow: hidden;
}
.notice ul li {
list-style: none;
height: 35px;
/*以下为了单行显示,超出隐藏*/
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;