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>
View Code

例子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>

 

posted @ 2016-04-22 15:10  guodaxia  阅读(1556)  评论(0)  编辑  收藏  举报