html内容滚动
<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内容滚动的更多相关文章
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 弹窗查看内容时 内容滚动区域设置为body区
看到渣浪的查看文章或者查看大图有个效果:弹窗查看内容时,如果内容过长有滚动条,则滚动条会被放到body区滚动 什么意思呢? 看个图片,一般正常弹窗是有宽高限制的,如果内容过长则直接在弹窗中进行滚动 点 ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- webbrowser内容滚动(javascript内容无缝滚动)
一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...
- 每日技术总结:Better-scroll应用于弹出层内容滚动
一.Better-scroll在项目中的应用 Better-scroll这款滚动插件还是很好用的,通常不会有什么问题.但偶尔总会出点意外.今天再次使用better-scroll,记录一下这次顺利的过程 ...
- 控制DIV内容滚动的方法,实现不用拖滚动条就可以看到最新消息
三种控制DIV内容滚动的方法: 本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv ...
- JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
- vant中tab标签切换时会改变内容滚动高度
vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了. ...
随机推荐
- 【第十一章】 springboot + mongodb(简单查询)
1.mongodb在mac上的安装 下载mongodb,https://www.mongodb.org/ 解压缩到一个指定文件夹,如:/Users/enniu1/Desktop/zjg/mongodb ...
- Visio 画图去掉页边距(图形四周的空白区域)的解决办法
步骤如下: 1.打开Visio对象后在[文件]菜单[选项]菜单项上单击,然后单击[自定义功能区]. 2.在[自定义功能区]的主选项卡中找到[开发工具]复选框,打上勾,单击确定. 3.在Visio对象的 ...
- LOJ #10222. 「一本通 6.5 例 4」佳佳的 Fibonacci
题目链接 题目大意 $$F[i]=F[i-1]+F[i-2]\ (\ F[1]=1\ ,\ F[2]=1\ )$$ $$T[i]=F[1]+2F[2]+3F[3]+...+nF[n]$$ 求$T[n] ...
- Visual Studio 项目模板制作(四)
上一篇,介绍了VSIX安装模板的方法,那么,你是不是要问,为何有些项目模板却可以有向导,那是怎么做到的 今天这篇文章就是介绍如何为自己的模板添加向导,向导可以引导你完成项目中各种参数的设置,比如项目创 ...
- 【Android实验】 数据存储与访问sqlite
目录 实验目的 实验要求 实验过程 功能分析: 实验结果: 实验的代码 实验总结 实验目的 分别使用sqlite3工具和Android代码的方式建立SQLite数据库.在完成建立数据库的工作后 ...
- mysql 存储过程简单实例
一.什么是存储过程 存储过程(Stored Procedure)是在大型数据库系统中,一组为了完成特定功能的SQL 语句集,存储在数据库中,经过第一次编译后再次调用不需要再次编译,用户通过指定存储过程 ...
- .NET Core2.0应用IdentityServer4
IdentityServer4能解决什么问题 假设我们开发了一套[微博程序],主要拥有两个功能:[登陆验证].[数据获取] 随后我们又开发了[简书程序].[知乎程序],它们的主要功能也是:[登陆验证] ...
- 微信小程序之可滚动视图 scroll-view 的使用注意
微信小程序之可滚动视图 scroll-view 使用注意: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动: 2.scroll-view 中的包裹需要滑动的元素的大盒子用 d ...
- Linux——用户管理简单学习笔记(三)
用户组管理命令: groupadd -g 888 webadmin 创建用户组webadmin,其GID为888 删除用户组: groupdel 组名 修改用户组信息 groupmod groupmo ...
- Codeforces Beta Round #94 div 2 C Statues dfs或者bfs
C. Statues time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...