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%的人还看了以下文章

  • 太赞了!推荐2个多彩渐变配色网站

    1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的,但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来,其中有的渐变色甚至拥有极为复杂的情绪,而你需要做的,就是输入你想传递的情绪,然后就能搜到相关的情绪和色彩,包括渐变的 CSS …

    2023年1月18日
    2340
  • 第7课:HTML标签的属性

    许多元素都可以设置属性。 属性是什么? HTML通过标签告诉浏览器如何展示网页(比如告诉浏览器显示一个换行)。你可以为某些元素附加一些信息,这些附加信息被称为属性(attribute)。例1: <h2 style=”background-color: #ff0000;”>上125jz.com学网页制作</h2> 属性应写在元素的首标签…

    2018年1月20日
    1.7K0
  • css布局基础:定位综合练习

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图: 效果说明: 1、随着网页向下滚动,当导航到达窗口顶端(t…

    2020年4月4日
    2.5K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    1.9K0
  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    1.8K0
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…

    2019年2月15日
    2.6K0

发表回复

登录后才能评论