<!--Quirks Mode--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>无间断滚动的新闻文章列表</title> <link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css" /> <!--[if IE]><style> @import url("/tutorials/demo/css/ie.css"); </style><![endif]--> <style type="text/css"> <!-- a{background:#FFF; color:#333;} a:hover{background:#FFF;color: #C00;} #demo ul{text-align: left; } #demo li a{line-height:2em; padding-left:1.5em;background: #F7F7F7 url(/img/arrow_l2_over.gif) no-repeat 0 50%;display: block;margin-bottom: 1px;} #FGWrapper{width: 400px; margin:2em auto; background:#EEE;} #demo{overflow:hidden; width: 390px;height: 150px; background:#FFF;margin: 5px;float: left;display: inline;} #desc{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:left;} #copyright{float: right;} --> </style> <noscript> <style type="text/css"> #demo{overflow:auto; } } </style> </noscript> </head> <body> <div id="ForestganWrap"> <div id="forestganHeader"> <h1>CSS 布局演示 </h1> <h2 id="demo_date">2010-10-05 发表</h2> </div> <div id="forestganMiddle"> <div id="FGWrapper"> <div id="demo"> <div id="demo1"> <ul> <li> <a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="/tcys/1061.htm"> 超级漂亮的几款清新的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="/tcys/1060.htm"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="/tcys/1059.htm"> Js实现的层展开、折叠效果，默认层是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="/tcys/1058.htm"> DIV始终固定在网页右下角的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="/tcys/1057.htm"> JavaScript未知高度元素的垂直居中</a></li> <li> <a title="渐变彩色的文字" target="_blank" href="/ljwb/1056.htm"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="/ljwb/1055.htm"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="/qtdm/1054.htm"> 滚动的标题栏</a></li> <li> <a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="/txtx/1036.htm"> JS 4屏平滑滚动幻灯片特效</a></li> <li> <a title="图片的无缝滚动（纵向、横向）" target="_blank" href="/txtx/1035.htm"> 图片的无缝滚动（纵向、横向）</a></li> <li> <a title="鼠标触及带边框的菜单" target="_blank" href="/cddh/1034.htm"> 鼠标触及带边框的菜单</a></li> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="/ljwb/1032.htm"> 比较实用的CSS控制链接颜色效果</a></li> <li> <a title="鼠标接触或离开图片时，图片大小相应变化" target="_blank" href="/txtx/1031.htm"> 鼠标接触或离开图片时，图片大小相应变化</a></li> <li> <a title="特殊的鼠标悬停提示" target="_blank" href="/sbtx/1028.htm"> 特殊的鼠标悬停提示</a></li> <li> <a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="/cddh/1027.htm"> CSS Sprite制作的鼠标感应网站导航条</a></li> <li> <a title="鼠标激活显示背景色的CSS特效代码" target="_blank" href="/tcys/1025.htm"> 鼠标激活显示背景色的CSS特效代码</a></li> <li> <a title="[酷] 又一款FLASH图片切换效果代码" target="_blank" href="/txtx/1023.htm"> [酷] 又一款FLASH图片切换效果代码</a></li> <li> <a title="精致的翻动图片新闻代码" target="_blank" href="/txtx/1022.htm"> 精致的翻动图片新闻代码</a></li> <li> <a title="跟随鼠标顶部奇妙的海底生花" target="_blank" href="/sbtx/1021.htm"> 跟随鼠标顶部奇妙的海底生花</a></li> <li> <a title="强制点击广告代码的特效" target="_blank" href="/ljwb/1020.htm"> 强制点击广告代码的特效</a></li> <li> <a title="鼠标经过列表显示小图的列表特效代码" target="_blank" href="/tcys/1019.htm"> 鼠标经过列表显示小图的列表特效代码</a></li> <li> <a title="不用圆角图片制作的圆角效果" target="_blank" href="/tcys/1018.htm"> 不用圆角图片制作的圆角效果</a></li> <li> <a title="超级漂亮的几款清新的网页CSS布局配色" target="_blank" href="/tcys/1061.htm"> 超级漂亮的几款清新的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="/tcys/1060.htm"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、折叠效果，默认层是折叠的" target="_blank" href="/tcys/1059.htm"> Js实现的层展开、折叠效果，默认是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="/tcys/1058.htm"> DIV始终固定在网页右下角的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="/tcys/1057.htm"> JavaScript未知高度元素的垂直居中</a></li> <li> <a title="渐变彩色的文字" target="_blank" href="/ljwb/1056.htm"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="/ljwb/1055.htm"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="/qtdm/1054.htm"> 滚动的标题栏</a></li> <li> <a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="/txtx/1036.htm"> JS 4屏平滑滚动幻灯片特效</a></li> <li> <a title="图片的无缝滚动（纵向、横向）" target="_blank" href="/txtx/1035.htm"> 图片的无缝滚动（纵向、横向）</a></li> <li> <a title="鼠标触及带边框的菜单" target="_blank" href="/cddh/1034.htm"> 鼠标触及带边框的菜单</a></li> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="/ljwb/1032.htm"> 比较实用的CSS控制链接颜色效果</a></li> <li> <a title="鼠标接触或者离开图片时，图片大小会相应变化" target="_blank" href="/txtx/1031.htm"> 鼠标接触或离开图片时，图片大小相应变化</a></li> <li> <a title="特殊的鼠标悬停提示" target="_blank" href="/sbtx/1028.htm"> 特殊的鼠标悬停提示</a></li> <li> <a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="/cddh/1027.htm"> CSS Sprite制作的鼠标感应网站导航条</a></li> <li> <a title="鼠标激活显示背景色的CSS特效代码" target="_blank" href="/tcys/1025.htm"> 鼠标激活显示背景色的CSS特效代码</a></li> <li> <a title="[酷] 又一款FLASH图片切换效果代码" target="_blank" href="/txtx/1023.htm"> [酷] 又一款FLASH图片切换效果代码</a></li> <li> <a title="精致的翻动图片新闻代码" target="_blank" href="/txtx/1022.htm"> 精致的翻动图片新闻代码</a></li> <li> <a title="跟随鼠标顶部奇妙的海底生花" target="_blank" href="/sbtx/1021.htm"> 跟随鼠标顶部奇妙的海底生花</a></li> </ul> </div> <div id="demo2"> </div> <script type="text/javascript"> //图片无间断滚动代码，兼容IE、Firefox、Opera var speed=40; var FGDemo=document.getElementById('demo'); var FGDemo1=document.getElementById('demo1'); var FGDemo2=document.getElementById('demo2'); FGDemo2.innerHTML=FGDemo1.innerHTML function Marquee1(){ if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0) FGDemo.scrollTop-=FGDemo1.offsetHeight else{ FGDemo.scrollTop++ } } var MyMar1=setInterval(Marquee1,speed) FGDemo.onmouseover=function() {clearInterval(MyMar1)} FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)} </script> </div> <div id="desc"><a href="http://www..com"><span id="copyright"></span></a>文章列表无间断滚动演示</div> </div> </div> </div> </body> </html> <p align="center"></p>