<marquee srolldelay="50" direction="up"></marquee>

滚动标签<marquee>
scrolldelay：滚动延迟时间，默认90
direction：滚动方向，默认从右往左 down left right up

width:滚动的宽度

height:滚动的高度（两个滚动标签是否在同一平面好像依据的是它的height属性）

例子1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<MARQUEE direction=up behavior=alternate width=60 height=120>

<font color="#CC0066" size="+3">

祝

</font>

</MARQUEE>

<MARQUEE direction=up behavior=alternate width=60 height=80>

<font  size="+3">

大

</font>

</MARQUEE>

<MARQUEE direction=up behavior=alternate width=60 height=120>

<font color="#CCFF33" size="+3">

家

</font>

</MARQUEE>

<MARQUEE direction=up behavior=alternate width=60 height=80>

<font color="#66FFFF" size="+3">

永

</font>

</MARQUEE>

<MARQUEE direction=up behavior=alternate width=60 height=120>

<font color="#33FF00" size="+3">

远

</font>

</MARQUEE>

<MARQUEE direction=up behavior=alternate width=60 height=80>

<font color="#FF00FF" size="+3">

赢

</font>

</MARQUEE>

</body>

</html>

例子2：

浮动与不浮动的区别：

我的理解：浮动与不浮动处于不同平面，浮动的话，div相当于变成了一个行级标签，当一个左浮动的div与一个没有更改设置的div同时存在的时候，看起来会是两个div重合在一起，因为两个div所处的面不同，普通div默认对齐方式为左；两个左浮动标签在一起的时候，它们在一个平面上，所以会紧靠而不是覆盖。两个普通的div会不同行。当前面两个浮动，后面一个不浮动，不浮动的会重合第一个左浮动。

在div的浮动使用中，如果普通div包裹两个浮动div，那么这个大div可能失去块级标签的效应，可以使用clear清除浮动消除这种不良反应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

.d1,.d3,.d2,.d4{

    width:300px;

    height:300px;

    border-color:#000;

    border-style:solid;

    margin:2px;

    float:left;

}

</style>

</head>

<body>

<div>

  <div class="d1">

  <marquee direction="down" valign="top" scrolldelay="100" behavior="slide" height="300">

  <marquee direction="right" scrolldelay="100" behavior="slide" width="300">

    <img src="../image/flower8.jpg" width="100" height="100"/>

  </marquee>

  </marquee>

  </div>

  <div class="d2">

    <img src="../image/flower8.jpg" width="100" height="100"/>

  </div>

<div>

<div style="clear:left;">

  <div class="d3">

    <img src="../image/flower8.jpg" width="100" height="100"/>

  </div>

  <div class="d4">

    <img src="../image/flower8.jpg" width="100" height="100"/>

  </div>

</div>

<div style="clear:left;">

<marquee height="100" direction="up" width="100" bgcolor="#3366cc">

<marquee height="100" direction="left" width="100">

<font style="font-size: 35px; color:#fff">Guo's Blog</font>

</marquee>

</marquee>

</div>

</body>

</html>

html内容滚动的更多相关文章

  1. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

  2. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  3. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  4. 弹窗查看内容时 内容滚动区域设置为body区

    看到渣浪的查看文章或者查看大图有个效果:弹窗查看内容时,如果内容过长有滚动条,则滚动条会被放到body区滚动 什么意思呢? 看个图片,一般正常弹窗是有宽高限制的,如果内容过长则直接在弹窗中进行滚动 点 ...

  5. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  6. webbrowser内容滚动（javascript内容无缝滚动）

    一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...

  7. 每日技术总结：Better-scroll应用于弹出层内容滚动

    一.Better-scroll在项目中的应用 Better-scroll这款滚动插件还是很好用的,通常不会有什么问题.但偶尔总会出点意外.今天再次使用better-scroll,记录一下这次顺利的过程 ...

  8. 控制DIV内容滚动的方法，实现不用拖滚动条就可以看到最新消息

    三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv ...

  9. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  10. vant中tab标签切换时会改变内容滚动高度

    vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了.   ...

随机推荐

  1. 使用Docfx生成项目文档

    使用docfx.console生成本项目的文档 使用docfx.console生成其他项目的文档 直接使用docfx.exe生成项目文档 指定配置文档模板   文档地址:http://gitlab.l ...

  2. Ubuntu 14.04下 Java通用安装方法

    参考: 解决Floodlight1.2+Mininet问题及使用安装 Ubuntu下安装JDK1.7图文详解 Ubuntu 14.04下 Java通用安装方法 1.到oracle官网下下载对应jdk包 ...

  3. 有关keras（Ubuntu14.04,python2.7）

    第一部分:安装 由于我的电脑之前已经已经配置好了caffe,因此有关python的一切相关包都已经安装完成.因此,即使不用Anaconda安装依然很简单. sudo pip install tenso ...

  4. WPF基础学习笔记整理 （一）

    基础知识: WPF:Windows Presentation Foundation,用于Windows的现代图形显示系统: WPF用于编写应用程序的表示层: 引入“内置硬件加速”和“分辨率无关”: S ...

  5. python 字节与字符串转化

    name = 'laogaoyang' # 采用系统默认编码格式 nameBytes = name.encode('utf-8') # 先将 name 解码(采用系统默认格式),然后用 'utf-8' ...

  6. highcharts PHP中使用

    官网 https://www.hcharts.cn/demo/highcharts html <div id="container" style="min-widt ...

  7. 团队作业7—团队项目设计完善&编码测试

    一.根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明. <软件设计方案说明书>Github仓库地址:https://github.com/RNTF6/web 完善内 ...

  8. js 转义

    1. JavaScript 特殊字符 2. 正反斜杠互相替换 'a/b/c'.replace(/\//g,'\\')      //  "a\b\c" $0.value.repla ...

  9. ubuntu下xx-net可用IP为0, ping6显示 Network is unreachable

    不知和xx-net有没有关系. 全新安装系统 sudo apt-get install miredo 这时, ping6 ipv6.google.com 是能ping通的 按github上依次安装py ...

  10. cygwin install git

    Installation with Cygwin If you're comfortable with Cygwin, then use it to install git, ssh, wget an ...