文字走马灯 置顶显示

html-css015

文字走马灯 置顶显示,第1张

应用css实现走马灯置顶显示

超出显示

用到命令 text-overflow : clip | ellipsis 文本超出:截断|省略

但这一条命令是看不到效果的,需要另外两条命令配合使用,让文本能够溢出,第一个是强制一行内显示,white-space:nowrap;第二个是溢出内容隐藏,overflow:hidden

超出跑马等效果

老的前端开发人员对于marquee标签肯定不陌生,一个被淘汰的标签,被刚入门的新手所喜爱,因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时,使这个标签退出历史舞台,大家纷纷改用js来实现无间断滚动等效果。

新的CSS3 marquee设置,可以说功能强大了很多,更加易操作,用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。

对于这个属性的定义,W3C标准用法和webkit内核浏览器的支持用法并不相同,由于我们立足实战实用,所以这里只介绍好用的。可用的。

我们需要四句常用命令

overflow:-webkit-marquee//指定溢出时滚动。

-webkit-marquee-style:scroll | slide | alternate//跑马灯样式,分三种。

scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始。slide,从一端滚到另一端,内容接触到另一端后,立马重新开始。alternate,内容不跑到显示区域外,在里面来回碰壁反弹。这里主要用第一种。

-webkit-marquee-repetition:infinite | number// 跑马灯跑的次数,infinite 为无限多次,不结束。或者可以用正整数设置滚动的次数。

-webkit-marquee-direction:up | down | left | right//跑动的方向,这个要注意结合实际情况,即实际你操作的标签文本流溢出在哪个方向溢出。

-webkit-marquee-speed:slow | normal | fast//跑动的速度设置。

1、新建一个html文件,命名为test.html

2、在test.html文件内,使用css设置页面所有的div宽度为300px,高度为300px,div的位置为绝对定位。

3、在test.html文件内,创建三个div,并用文字标识,分别为底层div、中层div、最顶层div。

4、在test.html文件内,分别给三个div设置class属性为one、two、three,用于下面对类名进行样式设置。

5、在css标签内,设置类名为one的div样式,设置其背景颜色为红色,距离页面左边缘为0,距离页面上边缘为0,同时使用z-index设置其层级为1。

6、在css标签内,设置类名为two的div样式,设置其背景颜色为黄色,距离页面左边缘为50px,距离页面上边缘为50px,同时使用z-index设置其层级为2,即在类名为one的div的上面。

7、在css标签内,设置类名为three的div样式,设置其背景颜色为粉红色,距离页面左边缘为100px,距离页面上边缘为100px,同时使用z-index设置其层级为3,即在页面三个div中的最顶层。

8、在浏览器打开test.html文件,查看实现的层级效果。

margin-top:0px

并非置顶

#top body {

margin-top:0px

}

这个写法有点毛病 body本身为全局 , 再在前面加个#top 没什么效果

而且 <div id=top><body></body></div> 这个嵌套毛病太大了....

body是html文件主体中最大的一级 , 不可能在body外面在放一个div .这样浏览器根本放弃解析<div>的内容

body {margin: 0}

#top {margin-top:0px}

<html>

<head>

</head>

<body>

<div id=top>

<table border=1 width=400>

<tr>

<td>123</td>

</tr>

</table>

</div>

</body>

</html>