底部滚动层代码 文档
滚动条代码大全
滚动条代码⼤全1、控制横向和纵向滚动条的显隐去掉滚动条 x 轴<body style="overflow-y:hidden">去掉滚动条 y 轴<body style="overflow-x:hidden">滚动条 x/y 轴全部去掉<body scroll="no">2、滚动条颜⾊<style>BODY{SCROLLBAR-FACE-COLOR: #ffffff;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;SCROLLBAR-SHADOW-COLOR: #ffffff;SCROLLBAR-3DLIGHT-COLOR: #ffffff;SCROLLBAR-ARROW-COLOR: #ffffff;SCROLLBAR-TRACK-COLOR: #eeeeee;SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;}</style>代码说明：SCROLLBAR-FACE-COLOR 滚动条凸出部分的颜⾊SCROLLBAR-HIGHLIGHT-COLOR 滚动条空⽩部分的颜⾊SCROLLBAR-SHADOW-COLOR ⽴体滚动条阴影的颜⾊SCROLLBAR-3DLIGHT-COLOR 滚动条亮边的颜⾊SCROLLBAR-ARROW-COLOR 上下按钮上三⾓箭头的颜⾊SCROLLBAR-TRACK-COLOR 滚动条的背景颜⾊SCROLLBAR-DARKSHADOW-COLOR 滚动条强阴影的颜⾊SCROLLBAR-BASE-COLOR 滚动条的基本颜⾊3、箭⾏符号滚动条代码<style type="text/css"><!--BODY {scrollbar-face-color: white;scrollbar-highlight-color: white;scrollbar-shadow-color: white;scrollbar-3dlight-color: white;scrollbar-arrow-color: hotpink;scrollbar-track-color: white;scrollbar-darkshadow-color: white}--></style>4、⼀侧滚动条代码<style type="text/css"><!--BODY {scrollbar-face-color: white;scrollbar-highlight-color: white;scrollbar-shadow-color: hotpink;scrollbar-3dlight-color: white;scrollbar-arrow-color: hotpink;scrollbar-track-color: white;scrollbar-darkshadow-color: white}--></style>5、朴素型滚动条代码<style type="text/css"><!--BODY {scrollbar-face-color: white;scrollbar-highlight-color: hotpink;scrollbar-shadow-color: hotpink;scrollbar-3dlight-color: white;scrollbar-arrow-color: hotpink;scrollbar-track-color: white;scrollbar-darkshadow-color: white}--></style>6、⼀侧滚动条代码<style type="text/css"><!--BODY {scrollbar-face-color: white; scrollbar-highlight-color: white; scrollbar-shadow-color: hotpink; scrollbar-3dlight-color: white; scrollbar-arrow-color: hotpink; scrollbar-track-color: white; scrollbar-darkshadow-color: white}--></style>7、⽴体型滚动条代码<style type="text/css"><!--BODY {scrollbar-face-color: pink; scrollbar-highlight-color: deeppink; scrollbar-shadow-color: lavenderblush; scrollbar-3dlight-color: lavenderblush; scrollbar-arrow-color: white; scrollbar-track-color: lavenderblush; scrollbar-darkshadow-color: deeppink} --></style>。
HTML滚动代码大全
HTML滚动代码大全HTML滚动代码大全[HTML代码]会移动的文字(Marquee)Marquee标记用于在可用浏览区域中滚动文本。
这个标记只适用于IE3以后的版的浏览器。
格式：<MARQUEE ALIGN="…"BEHAVIOR="…"BGCOLOR="…"DIRECTION="…"HEIGHT="…"WIDTH="…"HSPACE="…"VSPACE="…"LOOP="…"SCROLLAMOUNT="…"SCROLLDELAY="…"ONMOUSEOUT=this.start()ONMOUSEOVER=this.stop()>…</MARQUEE>属性：ALIGN：用于按设定的值对齐滚动的文本。
ALIGN可以设定的值有：LEFT，CENTER，RIGHT，TOP，BOTTOM。
此属性不是必须使用的。
例：<MARQUEE ALIGN="TOP">这段滚动文字设定为上对齐</MARQUEE>BEHAVIOR：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。
如果设定的方法是SLIDE，那么文本就移动到文档上，并停留在页边距上。
如果设定为ALTERNATE，则文本从一边移动到另一边。
如果设定为SCROLL，文本将在页面上反复滚动。
本属性不是必须使用的。
可以设定的值有：SILIDE，ALTERNATE，SCROLL。
例：<MARQUEE BEHAVIOR="ALTERNATE">文字从一边移动到另一边</MARQUEE>BGCOLOR：用于设定字幕的背景颜色。
背景颜色可用RGB、16进制值的格式或颜色名称来设定。
文字的滚动特效代码
文字的滚动特效代码文字的滚动特效代码文章来源：倾颜戏羽文本编辑：倾颜戏羽日志标签：博客教程 <MARQUEE>普通卷动<MARQUEE>向右滚动特效代码：<MARQUEEdirection=right>向右滚动</MARQUEE><MARQUEE behavior=alternate>来回卷动</MARQUEE>向上滚动特效代码：<MARQUEE direction=up>向上卷动</MARQUEE>向下滚动特效代码：<MARQUEE direction=down>向下卷动</MARQUEE>预设滚动次数特效代码：（loop=2 表示设定滚动两次就停，参数可以随意设定）<MARQUEE loop=2>预设滚动次数</MARQUEE>设定滚动宽度特效代码：（width=200表示设定滚动宽度参数为200，宽度参数可以自己设定）<MARQUEE width=200>设定滚动宽度</MARQUEE>设定滚动高度特效代码：（height=30 表示设定滚动高度参数为30，高度参数可以自己设定）<MARQUEE height=30>设定滚动高度</MARQUEE>设定滚动背景颜色特效代码：（bgColor=#003366表示设定滚动背景颜色颜色码：003366）<MARQUEE bgColor=#003366>设定滚动背景颜色</MARQUEE>设定滚动速度特效代码：（scrollAmount=38参数越大滚动速度越快）<MARQUEE scrollAmount=38>设定滚动速度</MARQUEE>设定滚动延迟时间特效代码：（scrollDelay=300 参数越大延迟时间越久）<MARQUEE scrollDelay=300>设定滚动延迟时间</MARQUEE>滚动链接特效代码：（“链接地址”表示此处粘贴要链接的网站地址、“链接名称”表示此处填写链接的对象名称）<MARQUEE scrollAmount=2 width=200 height=30><A href="链接地址" target=_blank>链接名称</A></MARQUEE>各参数详解：看右边=》1).scrollAmount。
滚动文字代码(全)【汇编】
1. 文字来回滚动：代码：<MARQUEE scrollAmount=3 behavior=alternate>文字来回滚动</MARQUEE>2. 向右移动的竖排文字：代码：<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=3scrollDelay=0 direction=up width=200 height=150><P align=left>向右移动的竖排文字</SPAN><BR>向右移动的竖排文字<BR> 向右移动的竖排文字<BR>向右移动的竖排文字</P></MARQUEE>3. 向上移动的文字：代码：<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=3 direction=up>向上移动的文字<BR>向上移动的文字</MARQUEE>4. 向下移动的文字：代码：<MARQUEE style="WIDTH: 250px; HEIGHT: 100px" scrollAmount=3 dir ection=down>向下移动的文字<BR>向下移动的文字</MARQUEE>5. 从右向左滚动：代码：<MARQUEE scrollAmount=2>从右向左滚动</MARQUEE>6. 从左向右滚动：代码：<MARQUEE scrollAmount=2 direction=right>从左向右滚动</MARQUEE>7. 上下反弹：代码：<MARQUEE style="WIDTH: 708px; HEIGHT: 150px" scrollAmount=2 direction=upbehavior=alternate>上下反弹</MARQUEE>8. 从左向右文字波浪式移动：代码：<MARQUEE style="WIDTH: 80%; HEIGHT: 100px" scrollAmount=2 direction=upbehavior=alternate width="80%"><MARQUEE direction=right>从左向右文字波浪式移动</MARQUEE></MARQUEE>9. 文字来回波浪式移动：代码：<MARQUEE style="WIDTH: 80%; HEIGHT: 100px" scrollAmount=2 direction=upbehavior=alternate width="80%"><MARQUEE direction=right behavior=alternate>文字来回波浪式移动</MARQUEE></MARQUEE>10. 躲躲字，跑给你追：代码：<MARQUEE behavior=alternate><MARQUEE scrollAmount=5 width=150>躲躲字，跑给你追</MARQUEE></MARQUEE>11. 原地跳动的文字：代码：<MARQUEE direction=up behavior=alternate width=60 height=120>祝</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=80>大</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=120>家</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=80>永</MARQUEE><MARQUEE direction=up behavior=alternate width=60 height=120>远</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=80>幸</MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=120>福</MARQUEE>12. 波浪字：代码：<MARQUEE style="FILTER: wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"scrollAmount=2 scrollDelay=65 direction=up behavior=alternate height=80><CENTER>波浪字<BR>波浪字</CENTER></MARQUEE>13. 由中间向两边移动的文字：代码：<P align=center><MARQUEE width=200 height=50><FONT face=华文彩云color=#ee110e size=5>闲人SGM欢迎您</FONT></MARQUEE><MARQUEE direction=right width=200 height=50><FONT face=华文彩云color=#ee110esize=5>闲人SGM欢迎您</FONT></MARQUEE></P>14. 由上下向中间移动的字体：代码：<CENTER><MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=2 direction=downheight=60><FONT face=隶书color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE></CENTER><CENTER><MARQUEE style="WIDTH: 300px; HEIGHT: 60px" scrollAmount=2 direction=upheight=60><FONT face=隶书color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE></CENTER>15. 左右运动的文字：代码：<CENTER><MARQUEE direction=right width=250 height=50><FONT color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE><BR><MARQUEE width=250 height=50><FONT face=隶书color=#ff0000 size=5>闲人SGM欢迎您</FONT></MARQUEE></CENTER>注: 各参数详解a)scrollAmount。
eCharts_数据过多底部滚动条实现数据展示
eCharts_数据过多底部滚动条实现数据展⽰效果图：实现原理：1.添加dataZoom属性效果实现代码：1 <!DOCTYPE html>2 <html>34 <head>5 <meta charset="UTF-8">6 <script src="https:///echarts/4.1.0.rc2/echarts.min.js"></script>7 <title></title>8 <style type="text/css">9 #echats01 {10 height: 300px;11 width: 300px;12 }13 </style>14 </head>1516 <body>17 <div id="echats01"></div>18 <script type="text/javascript">19var dom01 = document.getElementById("echats01");20var myChart01 = echarts.init(dom01);21var app = {};22 option = null;23var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 50, 100, 30, 130];24 chart1();2526function chart1() {27//图表⼀28 option = {29//添加横线滚动条30 dataZoom: {31 start: 0, //默认为032 end: 100 - 1500 / 31, //默认为10033 type: 'slider',34 show: true,35 xAxisIndex: [0],36 handleSize: 0, //滑动条的左右2个滑动条的⼤⼩37 height: 8, //组件⾼度38 left: 20, //左边的距离39 right: 20, //右边的距离40 bottom: 30, //右边的距离41 handleColor: '#CBBCDB', //h滑动图标的颜⾊42 handleStyle: {43 borderColor: "#CBBCDB",44 borderWidth: "1",45 shadowBlur: 2,46 background: "#CBBCDB",47 shadowColor: "#CBBCDB",48 },49 fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{50//给颜⾊设置渐变⾊前⾯4个参数，给第⼀个设置1，第四个设置0 ，就是⽔平渐变51//给第⼀个设置0，第四个设置1，就是垂直渐变52 offset: 0,53 color: '#CBBCDB'54 }, {55 offset: 1,56 color: '#CBBCDB'57 }]),58 backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜⾊59 showDataShadow: false, //是否显⽰数据阴影默认auto60 showDetail: false, //即拖拽时候是否显⽰详细数值信息默认true61 handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.462 filterMode: 'filter',63 },64//图表的位置设置65 grid: {66 x: 30,67 y: 10,68 x2: 30,69 y2: 70,70 top: 20,71 borderWidth: 172 },73 tooltip: {74 trigger: 'axis',75 textStyle: {76 color: '#999'77 }78 },79//全局字体颜⾊80 textStyle: {81 color: '#B3B3B3'82 },83 itemStyle: {84 color: '#666'85 },86//X轴参数设置87 xAxis: {88 type: 'category',89 boundaryGap: false,90 data: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],91 axisLine: {92 lineStyle: {93 color: "#414B71",94 width: 1.5,95 },96 },97 axisLabel: {98 interval: 099 },100 axisTick: {101 show: false,102 },103 },104//Y轴参数设置105 yAxis: [{106 type: 'value',107//data: [0, 30, 60, 90, 120, 150],108 axisLine: {109 lineStyle: {110 color: "#414B71",111 width: 1.5,112 },113 },114 axisLabel: {115 interval: 0116 },117 axisTick: {118 show: false,119 },120 splitLine: {121 show: false,122 }123 }],124//服务数据125 series: [{126 name: '⽬标占⽐',127 type: 'line',128 smooth: true,129 stack: '总量',130 data: data1,131 itemStyle: {132 normal: {133 color: '#6FA9D9',134 lineStyle: {135 color: '#6FA9D9'136 }137 }138 },139 },140141 ]142 };143//实例化图表144if(option && typeof option === "object") {145 myChart01.setOption(option, true);146 };147//end148 }149 </script>150 </body>151152 </html>2018年11⽉19⽇，新增"axisLine":{ //y轴"show":false},"axisTick":{ //y轴刻度线"show":false},"splitLine": { //⽹格线"show": false}。
HTML页面缩小后显示滚动条的示例代码
HTML页⾯缩⼩后显⽰滚动条的⽰例代码这⾥记录⼀下如何使得HTML页⾯缩⼩之后，底部出现滚动条，使得可以通过滚动滚动条来浏览由于界⾯缩⼩⽽被掩盖的地⽅。
说⼀下这样做的好处。
⾸先，⼀般界⾯缩⼩之后不出现滚动条，⽤户就不能访问被隐藏的地⽅，必须使得界⾯变⼤才可以。
其次，有些界⾯由于相对或者绝对的布局，随着界⾯的变⼩，会出现右边的界⾯变到下⾯的现象，很可能会使得界⾯排布变得不美观，最省⼼的⽅法便是缩⼩后显⽰滚动条。
实现很简单，⼏⾏代码body{min-width: 1200px;overflow: scroll;/*max-width:100%;*/}知识点扩展：html页⾯缩⼩后⾃动出现滚动条导⼊这个style就⾏了，主要按需求设置⼀下body⾥⾯的属性。
<style>body{margin:0px;width:100%;min-width:1500px;max-width:100%;height:100%;background-color:#F0F0F0;}#head{background-color:#FFFF00;width:100%;height:100px;}#center{background-color:#00FFFF;width:100%;min-height:100%;}#foot{background-color:#FF00FF;width:100%;height:100px;}</style>到此这篇关于HTML页⾯缩⼩后显⽰滚动条的⽰例代码的⽂章就介绍到这了,更多相关html页⾯缩⼩显⽰滚动条内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。
显示日期时间及滚动代码
<td width="205"><script><!--var today=new Date();var d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");document.write("", today.getY ear(),"年",today.getMonth()+1,"月",today.getDate(),"日 ",d[today.getDay()],"");--></script></td>*************************************************************<BODY leftMargin=0topMargin=2marginheight="0"marginwidth="0"><center><TABLE style="BORDER-RIGHT: #6666661px solid; BORDER-TOP: #6666661px solid; BORDER-LEFT: #6666661px solid; BORDER-BOTTOM: #6666661px solid"cellSpacing=0cellPadding=0width=940align=center border=0><TBODY><TR><TD><DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff"><TABLE cellSpacing=0cellPadding=0align=left border=0cellspace="0"><TBODY><TR><TD id=demo1vAlign=top><table width="940"height="202"border="0"cellpadding="0"cellspacing="0"><tr><td width="188"background="../flash/05/1.jpg"><div align="center"></div></td><td width="188"background="../flash/05/2.jpg"><div align="center"><p></p></div></td><td width="188"background="../flash/05/3.jpg"><div align="center"></div></td><td width="188"background="../flash/05/4.jpg"><div align="center"></div></td><td width="188"background="../flash/05/5.jpg"><div align="center"></div></td></tr></table></TD><TD id=demo2vAlign=top> </TD></TR></TBODY></TABLE></DIV> <SCRIPT>var speed3=25//速度数值越大速度越慢demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed3)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}</SCRIPT></TD></TR></TBODY></TABLE></TD></TR></TABLE></center>=======================================<div style="width:200px; float:left; text-align:center;"><script language="JavaScript">var bsY ear;var bsDate;var bsWeek;var arrLen=8; //数组长度var sV alue=0; //当年的秒数var dayiy=0; //当年第几天var miy=0; //月份的下标var iyear=0; //年份标记var dayim=0; //当月第几天var spd=86400; //每天的秒数var year1999="30;29;29;30;29;29;30;29;30;30;30;29"; //354var year2000="30;30;29;29;30;29;29;30;29;30;30;29"; //354var year2001="30;30;29;30;29;30;29;29;30;29;30;29;30"; //384var year2002="30;30;29;30;29;30;29;29;30;29;30;29"; //354var year2003="30;30;29;30;30;29;30;29;29;30;29;30"; //355var year2004="29;30;29;30;30;29;30;29;30;29;30;29;30"; //384var year2005="29;30;29;30;29;30;30;29;30;29;30;29"; //354var year2006="30;29;30;29;30;30;29;29;30;30;29;29;30";var month1999="正月;二月;三月;四月;五月;六月;七月;八月;九月;十月;十一月;十二月"var month2001="正月;二月;三月;四月;闰四月;五月;六月;七月;八月;九月;十月;十一月;十二月"var month2004="正月;二月;闰二月;三月;四月;五月;六月;七月;八月;九月;十月;十一月;十二月"var month2006="正月;二月;三月;四月;五月;六月;七月;闰七月;八月;九月;十月;十一月;十二月"var Dn="初一;初二;初三;初四;初五;初六;初七;初八;初九;初十;十一;十二;十三;十四;十五;十六;十七;十八;十九;二十;廿一;廿二;廿三;廿四;廿五;廿六;廿七;廿八;廿九;三十";var Ys=new Array(arrLen);Ys[0]=919094400;Ys[1]=949680000;Ys[2]=980265600;Ys[3]=1013443200;Ys[4]=1044028800;Ys[5]=1074700800; Ys[6]=1107878400;Ys[7]=1138464000;var Yn=new Array(arrLen); //农历年的名称Yn[0]="己卯年";Yn[1]="庚辰年";Yn[2]="辛巳年";Yn[3]="壬午年";Yn[4]="癸未年";Yn[5]="甲申年";Yn[6]="乙酉年";Yn[7]="丙戌年";var D=new Date();var yy=D.getY ear();var mm=D.getMonth()+1;var dd=D.getDate();var ww=D.getDay();if (ww==0) ww="<font color=RED>星期日";if (ww==1) ww="星期一";if (ww==2) ww="星期二";if (ww==3) ww="星期三";if (ww==4) ww="星期四";if (ww==5) ww="星期五";if (ww==6) ww="<font color=RED>星期六";ww=ww;var ss=parseInt(D.getTime() / 1000);if (yy<100) yy="19"+yy;for (i=0;i<arrLen;i++)if (ss>=Ys[i]){iyear=i;sV alue=ss-Ys[i]; //当年的秒数}dayiy=parseInt(sV alue/spd)+1; //当年的天数var dpm=year1999;if (iyear==1) dpm=year2000;if (iyear==2) dpm=year2001;if (iyear==3) dpm=year2002;if (iyear==4) dpm=year2003;if (iyear==5) dpm=year2004;if (iyear==6) dpm=year2005;if (iyear==7) dpm=year2006;dpm=dpm.split(";");var Mn=month1999;if (iyear==2) Mn=month2001;if (iyear==5) Mn=month2004;if (iyear==7) Mn=month2006;Mn=Mn.split(";");var Dn="初一;初二;初三;初四;初五;初六;初七;初八;初九;初十;十一;十二;十三;十四;十五;十六;十七;十八;十九;二十;廿一;廿二;廿三;廿四;廿五;廿六;廿七;廿八;廿九;三十";Dn=Dn.split(";");dayim=dayiy;var total=new Array(13);total[0]=parseInt(dpm[0]);for (i=1;i<dpm.length-1;i++) total[i]=parseInt(dpm[i])+total[i-1];for (i=dpm.length-1;i>0;i--)if (dayim>total[i-1]){dayim=dayim-total[i-1];miy=i;}bsWeek=ww;bsDate=yy+"年"+mm+"月";bsDate2=dd;bsY ear="农历"+Yn[iyear];bsY ear2=Mn[miy]+Dn[dayim-1];if (ss>=Ys[7]||ss<Ys[0]) bsY ear=Yn[7];function CAL(){document.write("<table border='1' cellspacing='3' width='105' bordercolor='#000000' bgcolor='#FFFFFF' height='110' cellpadding='2'");document.write("<tr><td align='center'><b><font color=#008040>"+bsDate+"</font><br><font face='Arial' size='6' color=#FF8040>"+bsDate2+"</font><br><font color=#008040><span style='FONT-SIZE: 10.5pt'>"); document.write(bsWeek+"</span><br>"+"<br></b><font color=#9B4E00>");document.write(bsY ear+"<br>"+bsY ear2+"</td></tr></table>");} </script><script language="javascript">CAL();</script></div>。
几款漂亮的滚动条【附代码】
代码：
<DIV align=center>
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 277px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 200px; BACKGROUND-COLOR: #000000" align=center>
width: 355px; height: 200px; 分别表示滚动文本框的宽和高。
overflow: auto;auto表示"自动"，即框内内容不需要占据height: 200px这么高的高度时，就不会出现滚动条，一旦超过了，滚动条就会出现，多出的部分通过下拉滚动条来显示，overflow也设置的值还有scroll，即强制出现滚动条，因为这样也会强制出现横向的滚动条，很难看。