用DIV+CSS布局,怎么做滚动的公告栏?

html-css021

用DIV+CSS布局,怎么做滚动的公告栏?,第1张

1、先给一个例子,下面再做详细讲解

<marquee scrollAmount=2 width=300>我钟意网页树树</marquee>

--这个例子是从左向左滚动

2、各参数详解:

a) scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。

b) width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

c) direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。

d) scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

e) behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

3、根据需要设置对应的参数,就可以实现滚动啦,把想要滚动的div标签包含在marquee标签里面。

body{background-color:#000000no-repeatbackground-position: center 50%background-attachment: fixedCURSOR: url(http://webme.bokee.com/inc/mouse028.cur)} a{CURSOR: url(http://webme.bokee.com/inc/mouse031.ani)} a:hover {position:relativeleft:1pxtop:1pxclip:rect()}/*页面大背景图片固定,鼠标变身(两种样式)*/ A:link {color: #90F790text-decoration: underline}/*超链接未选中前*/ A:visited {color: #90F790text-decoration: underline}/*超链接已选中后*/ A:hover {display: inlinebackground:#11EE11color: #000000}/*超链接鼠标停止时*/ A:active {display: inlinebackground:#11EE11color: #000000}/*超链接点击时*/ /*空间名称和简介区域--------------------------------------------------------*/ #header/*主体部分(空间头部)*/{height:230pxbackground:repeat-x} #header div.lc/*左背景图*/{background:url('

') top left} #header div.rc/*右背景图*/{background:url('

') no-repeat top right}/*改变右背景图片平铺*/ #header div.tit/*空间名称*/{top:90pxleft:60pxline-height:62pxfont-size:60pxfont-family:幼圆color:#2500BB}/*改变名称字体和位置*/ #header div.tit a.titlink/*空间名称链接*/{color:#2500BBtext-decoration:none} #header div.tit a.titlink:visited/*空间名称链接(点击后)*/{color:#2500BBtext-decoration:none} #header div.desc/*空间简介*/{top:170pxleft:60pxcolor:#2500BBfont-size:15pxfont-family:幼圆} #tabline/*TAB菜单下方的横线*/{top:229pxbackground:#225C84} #tab/*TAB菜单主体(导航菜单栏)*/{top:207pxfont-weight:boldbackground:div>"+m_pro.innerHTML url('jav%20ascript:document.body.onload%20=%20function(')}}")} .move{color:#2500BBfont-size:12px} #tab a.on,#tab a.on:link,#tab a.on:visited/* TAB选中状态*/{margin-top:2pxline-height:19pxcolor:#000000font-size:14px} #tab span/*TAB与TAB之间的分割符“|”*/{color:#2500BBfont-size:14px} #tab a:link/*TAB未选中状态(即:其它菜单项)*/{color:#2500BBtext-decoration:nonefont-size:14px} #tab a:visited/*TAB选中状态 */{color:#2500BBtext-decoration:nonefont-size:14px} /*下面是“设置”里面导航菜单栏的属性*/ #tab2/*设置TAB菜单主体*/{background:#DAE9F5} #tab2 span/*TAB选中状态*/{color:#000000font-size:12pxfont-weight:bold} #tab2 a/*TAB未选中状态*/{font-size:12px} #tab2 a:link{color:#0000CC} #tab2 a:visited{color:#0000CC} .stage/*内容区域(TAB菜单与版权信息之间的区域、页面正文所有部分)*/{background:url(

)no-repeatbackground-attachment: fixed} /*竖栏表格边框-------------------------------------------------------------*/ #layout{margin-top:-10px} #layout td.c1t1,#layout td.c2t1,#layout td.c2t3,#layout td.c3t1,#layout td.c3t3,#layout td.c3t5{padding-top:10px} #layout td.c2t3,#layout td.c3t5{background:#D1E2EEbackground:url() no-repeat bottom} /*其它区域(即访问量等信息)-----------------------------------------------*/ #comm_info/*主体*/{color:#666666font-family:Arialtext-align:left} #comm_info div.line/*分界线*/{margin-top:5pxline-height:8pxborder-top:1px solid #BBC1C6background:url(http://www.ip.cn/s.php) no-repeat bottompadding-bottom: 40pxmargin-bottom: 10px}/*显示IP地址*/ #comm_info a/*链接*/{font-size:14pxcolor:#2500BB} /*页码区域-----------------------------------------------------------------*/ #page/*主体*/{height:30pxfont-size:14pxfont-family:Arialtext-align:center} #page span/*当前页码(不可点击)*/{padding:3pxcolor:#000000font-size:14pxfont-weight:bold} #page a.pc/*上一页和下一页*/{color:#225C84font-size:14pxfont-weight:bold} #page a.pc:visited{color:#225C84} #page a.pi/*页码(可点击)*/{padding:3pxcolor:#225C84font-size:14px} #page a.pi:visited{color:#225C84} /*模块---------------------------------------------------------------------*/ .mod{margin-bottom:14px} .modhandle{cursor:move} .modth/*模块标题栏主体*/{height:24pxtext-align:center} .modhead/*模块标题栏*/{padding:4px 4px 0 4px} .modopt/*模块操作区(如写新文章)*/{padding:4px 4px 0 0} .modtit/*模块标题区(如文章列表)*/{color:#2500BBfont-size:13pxfont-weight:bold}a.modtit{color:#225C84}a.modtit:visited{color:#225C84} .modtitlink{color:#225C84font-size:12pxfont-weight:bold}a.modtitlink{color:#225C84text-decoration:none}a.modtitlink:visited{color:#225C84text-decoration:none}a.modtitlink:hover{color:#FF5100text-decoration:underline} .modact/*操作文字链接(如文章列表)*/{color:#225C84font-size:12px}a.modact:link{color:#226C84}a.modact:visited{color:#225C84} .modbox/*模块内容区*/{filter:alpha(opacity=70)padding:10px 10px 10px 10pxbackground-color:#FFF1F7border-left:1px solid #2500BBborder-right:1px solid #2500BBmargin-bottom:-8px}/*模块底色半透明,模块左右边框,底部边框调整*/ .modtl/*模块左上角背景*/{background:url(http://img.baidu.com/hi/temp16/ptitl.gif) no-repeat top leftline-height:1px} .modtc/*模块中上背景*/{background:url(http://img.baidu.com/hi/temp16/ptitc.gif) repeat-x} .modtr/*模块右上角背景*/{background:url(http://img.baidu.com/hi/temp16/ptitr.gif) no-repeat top rightline-height:1px} .modbl/*模块左下角背景*/{background:transparentborder-left:1px solid #2500BBborder-bottom:1px solid #2500BBline-height:1px} .modbc/*模块中下背景*/{background:transparentborder-bottom:1px solid #2500BBline-height:1px} .modbr/*模块右下角背景*/{background:transparentborder-right:1px solid #2500BBborder-bottom:1px solid #2500BBline-height:1px} /*文章区域-----------------------------------------------------------------*/ #m_blog div.tit/*文章标题*/ {line-height:75pxtext-indent:0.5cmbackground:url(http://bbsimg.qq.com/2005/11/19/006/523.gif) no-repeat 0% 30%font-size:14pxfont-weight:boldcolor:#2aff00font-family: "Courier New", Verdana, monospace} /*标题背景图片*/ #m_blog div.tit a/*文章标题链接*/{color:#000000font-size:17pxfont-weight:bold} #m_blog div.tit a:visited/*文章标题链接(访问过后)*/{color:#000000} #m_blog div.date/*文章发表日期*/{margin:5px 0 8px 0color:#666666} #m_blog div.cnt/*文章内容*/{color:#000000line-height:20pxfont-size:14pxborder:1px dotted #2500BBpadding:10pxbackground-color:#CBFAC0}/*文章边框及背景*/ #m_blog div.more{margin:14px 0 16px 0text-align:right}/*阅读全文居右*/ #m_blog div.more a/*阅读全文链接*/{color:#225C84font-size:14px} #m_blog div.more a:visited{color:#225C84} #m_blog div.opt/*文章操作区(如编辑、评论等)*/{color:#666666font-size:12px} #m_blog div.opt a/*文章操作链接*/{color:#225C84font-size:12px} #m_blog div.opt a:visited{color:#225C84} #m_blog div.line/*分界线*/{margin-top:17pxline-height:17pxborder-top:1px solid #F4D2DE} #m_blog div.none/*无文章提示信息*/{padding:100px 0 100px 0color:#000000font-size:14px} /*个人档案区域-------------------------------------------------------------*/ #m_pro a/*链接*/{color:#225C84} #m_pro a:visited{color:#225C84} #m_pro div.image/*个人头像*/{text-align:center} #m_pro div.act/*操作区(如加为好友、发送消息)*/{margin-top:10px} #m_pro div.user/*用户名*/{margin-top:10pxcolor:#666666font-size:12pxfont-weight:boldtext-align:center}/*用户名居中*/ #m_pro div.desc/*用户简介*/{color:#666666font-size:12px} #m_pro div.line/*分界线*/{margin-top:17pxline-height:17pxborder-top:1px solid #DBC7DB} #m_pro td{color:#666666line-height:24pxfont-size:14px} /*相册区域-----------------------------------------------------------------*/ #m_album div.image/*照片*/{text-align:center} #m_album div.page{color:#666666font-size:12pxtext-align:center} #m_album div.page a{color:#0000CCfont-size:12px} #m_album div.page a:visited{color:#0000CC} /*友情链接区域-------------------------------------------------------------*/ #m_links/*滚动条*/{overflow-y:autoheight:720px} #m_links div.item/*子项*/{height:60pxcolor:#225C84font-size:13pxline-height:60pxtext-indent:50pxbackground:url(

) no-repeat left top} /*添加链接标题图片*/ #m_links div.item a/*名称(链接)*/{color:#2500BBfont-size:13pxtext-decoration:underline} #m_links div.item a:visited{color:#225C84} #m_links div.line/*分界线*/{margin-top:5pxline-height:2pxborder-top:1px solid #2500BB} /*文章分类区域-------------------------------------------------------------*/ #m_artclg div.item/*子项*/{color:#666666font-size:13px} #m_artclg div.item a/*分类名称(链接)*/{color:#2500BBfont-size:13px} #m_artclg div.item a:visited{color:#225C84} #m_artclg div.line/*分界线*/{margin-top:5pxline-height:8pxborder-top:1px solid #2500BB} /*文章存档区域-------------------------------------------------------------*/ #m_filed div.item{color:#C66500font-size:12px} #m_filed div.item a{color:#2500BBfont-size:13px} #m_filed div.item a:visited{color:#006AFF} #m_filed div.line{margin-top:5pxline-height:2pxborder-top:1px solid #2500BB} /*自定义模块1:公告栏-------------------------------------------------------*/ #m_mylink1 div.item{color:#225C84font-size:12px} #m_mylink1 div.item a{color:#2500BBfont-size:13pxtext-decoration:none} #m_mylink1 div.item a:visited{color:#3399CC} #m_mylink1 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #2500BB} /*自定义模块2:特别推荐-----------------------------------------------------*/ #m_mylink2 div.item{color:#225C84font-size:12px} #m_mylink2 div.item a{color:#2500BBfont-size:13pxtext-decoration:none} #m_mylink2 div.item a:visited{color:#3399CC} #m_mylink2 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #2500BB} /*自定义模块3:我的链接------------------------------------------------------*/ #m_mylink3 div.item{color:#225C84font-size:12px} #m_mylink3 div.item a{color:#2500BBfont-size:13pxtext-decoration:none} #m_mylink3 div.item a:visited{color:#3399CC} #m_mylink3 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #2500BB} /*自定义模块4--------------------------------------------------------------*/ #m_mylink4 div.item{color:#225C84font-size:12px} #m_mylink4 div.item a{color:#2500BBfont-size:13pxtext-decoration:none} #m_mylink4 div.item a:visited{color:#3399CC} #m_mylink4 div.line{margin-top:5pxline-height:8pxborder-top:1px solid #2500BB} /*最新评论区域-------------------------------------------------------------*/ #m_comment div.item/*子项*/{color:#666666font-size:12pxline-height:30pxtext-indent:60pxbackground:url(

) no-repeat}/*添加评论标题图片*/ #m_comment div.item a/*发表人(链接)*/{color:#2500BBfont-size:13px} #m_comment div.item a:visited{color:#225C84} #m_comment div.item a.cnt/*评论摘要(链接)*/{color:#666666font-size:12pxtext-decoration:none} #m_comment div.item a.cnt:visited{color:#666666text-decoration:none} #m_comment div.item a.cnt:hover{color:#666666text-decoration:underline} #m_comment div.line/*分界线*/{margin-top:5pxline-height:8pxborder-top:1px solid #2500BB} /*相册列表区域-------------------------------------------------------------*/ #m_albumlist div.note{color:#666666font-size:14px} #m_albumlist div.desc/*简介*/{margin-bottom:12pxpadding:3px 10px 3px 10pxline-height:22pxbackground-color:#F2F2F2font-size:14px} #m_albumlist div.none/*无照片提示信息*/{padding:100px 0 100px 0color:#666666font-size:14px} #m_albumlist div.line/*分界线*/{margin-top:10pxline-height:16pxborder-top:1px solid #DBC7DB} #m_albumlist div.tit/*照片标题*/{margin:6px 0 7px 0color:#666666font-size:14px} #m_albumlist div.tit a/*照片标题链接*/{color:#225C84font-size:14px} #m_albumlist div.tit a:visited{color:#225C84} #m_albumlist span.count/*照片数量*/{color:#666666font-size:12pxfont-weight:bold} #m_albumlist span.size/*照片尺寸*/{color:#999999font-size:12pxfont-family:Arial} #m_albumlist a.act/*操作区链接(如编辑、删除)*/{color:#225C84font-size:12px} #m_albumlist a.act:visited{color:#225C84} #m_albumlist a.page/*页码链接*/{color:#0000CCfont-size:14px} #m_albumlist a.page:visited{color:#0000CC} #m_albumlist td.image{padding:5pxborder:1px solid #999999background:#FFFFFF} /*好友列表区域-------------------------------------------------------------*/ #m_friend div.filter{margin-bottom:10pxpadding-left:10pxpadding-top:10pxheight:27pxline-height:27px} #m_friend div.catalog{margin-bottom:10pxpadding-left:10pxheight:27pxline-height:27pxbackground-color:#F2F2F2font-size:14px} #m_friend div.user{margin-top:4pxcolor:#666666font-size:12px} #m_friend div.user a/*好友名称(链接)*/{color:#225C84font-size:12px} #m_friend div.user a:visited{color:#225C84} #m_friend div.line/*分界线*/{margin-top:10pxline-height:16pxborder-top:1px solid #DBC7DB} /*设置访问统计、模板设置---------------------------------------------------*/ #m_setting a/*链接*/{color:#225C84} #m_setting a:visited{color:#225C84} #m_setting/*主体*/{line-height:22pxcolor:#666666font-size:14px} #m_setting img.sel/*模板预览图(选中状态)*/{border:4px solid #FFDB7B} #m_setting img.unsel/*模板预览图(未选中状态)*/{border:1px solid #D2D2D2} #m_setting span.tit/*模板标题名称*/{font-size:14px} #m_setting span.usr/*作者名*/{color:#666666} #m_setting div.sel/*“当前模板”文字*/{padding-top:6pxfont-size:14pxfont-weight:bold} #m_setting div.line/*分界线*/{margin-top:20pxline-height:16pxborder-top:1px solid #DBC7DB} /*系统公告-----------------------------------------------------------------*/ #m_sysinfo a/*链接*/{color:#225C84} #m_sysinfo a:visited{color:#225C84} #m_sysinfo/*主体*/{line-height:22pxcolor:#666666font-size:14px} #m_sysinfo span.new/*最新*/{color:#FF0000font-size:10pxfont-family:Arial} #m_sysinfo span.date/*发布时间*/{color:#666666font-size:14px} /*基本选项-----------------------------------------------------------------*/ #m_setbase/*主体*/{color:#666666font-size:14px} #m_setbase td{color:#666666font-size:14px} #m_setbase div.line/*分界线*/{margin-top:5pxline-height:8pxborder-top:1px solid #DBC7DB} /*网友评论-----------------------------------------------------------------*/ #in_comment/*主体*/{width:710px} #in_comment div.tit/*标题*/{margin-bottom:12pxcolor:#666666font-size:14pxfont-weight:bold} #in_comment div.user/*发表人名*/{margin-bottom:6pxcolor:#666666font-size:12px} #in_comment div.user a/*发表人名(链接)*/{color:#225C84font-size:12px} #in_comment div.user a:visited{color:#225C84} #in_comment div.user span.date/*发表时间*/{color:#666666font-size:12px} #in_comment div.desc/*评论内容*/{color:#666666font-size:12px} #in_comment div.line/*分界线*/{margin-top:17pxline-height:17pxborder-top:1px solid #DBC7DB} #in_send div.tit/*发表评论(标题)*/{margin:10px 0 10px 0color:#666666font-size:14pxfont-weight:bold} #spBlogCmtText{border: 2px solid #1AE61A background:url(

) no-repeat top centerbackground-attachment: fixedCURSOR: url('http://webme.bokee.com/inc/mouse051.ani')}/*添加评论框背景,改变鼠标样式*/