<!--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>
