Marquee标签制作滚动公告、新闻列表

江山如画 • 2019年2月28日上午8:57 • 网页制作 • 阅读 9863

Marquee标签制作滚动公告、新闻列表

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>marquee实现的滚动公告|www.125jz.com</title>
<style type="text/css">
* {
 margin: 0px;
 padding: 0px;
}

body {
 font-size: 14px;
}

.notice {
 margin: 50px auto;
 width: 300px;
 height: 200px;
 border: 5px solid #CCC;
 border-radius: 8px;
 box-shadow: 2px 2px 10px #ababab;
}

.title {
 height: 50px;
 background: linear-gradient(#ed5b6c, #cd3c4d);
 border-radius: 4px 4px 0 0;
 color: #FFF;
 font-family: Verdana, Geneva, sans-serif;
 line-height: 50px;
 padding-left: 10px;
}

ul {
 list-style: none;/*  去掉ul标签默认的点样式  */
}

marquee {
 width: 98%;
 height: 140px;
 overflow: hidden;
}

a {
 color: #333;
 font-size: 12px;
 text-decoration: none;     /* 超链接样式 */
}

a:hover {
 color: #ff0000;
}

.notice ul li {
 height: 24px;
}

.notice ul li a {
 float: left;
 text-indent: 15px;
}

.notice ul li span {
 float: right;
 color: #999;
}
</style>
</head>

<body>
<div class="notice">
  <h2 class="title">Notice</h2>
  <ul>
    <marquee direction="up" scrollamount="5" onMouseOver="this.stop();" onMouseOut="this.start();">
    <li><a href="#">1.html5 教程</a><span>2016-06-01</span></li>
    <li><a href="#">2.网页特效（案例）</a><span>2016-06-01</span></li>
    <li><a href="#">3.跟永哥学HTML案例）</a><span>2016-06-01</span></li>
    <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2016-06-01</span></li>
    <li><a href="#">5.分页页码制作（案例）</a><span>2016-06-01</span></li>
    <li><a href="#">6.导航条菜单的制作（案例）</a><span>2016-06-01</span></li>
    <li><a href="#">7.信息列表制作(案例)</a><span>2016-06-01</span></li>
    <li><a href="#">8.下拉菜单制作(案例)</a><span>2016-06-01</span></li>
    </marquee>
  </ul>
</div>
</body>
</html>

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3321.html