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

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

效果演示

Marquee标签实现跑马灯、滚动公告、通知效果

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

(0)
江山如画的头像江山如画管理团队
上一篇 2019年2月26日 下午2:07
下一篇 2019年3月7日 上午9:34

99%的人还看了以下文章

  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    4.9K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    3.7K0
  • Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT,分享给大家 ,并且可以播放。 我思考了三种方法: 是在Zoho Docs上操作; 是PPT以图片的形式保存(动画效果没有了),直接轮播; 是自己手写动画+轮播,达到PPT播放效果(用express.js来实现)比较复杂,并且对小白站长不适用。 很自信的要自己手…

    2023年1月16日 网页制作
    1.1K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    3.4K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    3.0K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    3.2K0

发表回复

登录后才能评论