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
微信扫一扫 
支付宝扫一扫 