HTML-JS-CSS

第1页共20页HTML-JS-CSS技术手册HTML..............................................................................................................................................21、什么是填充属性和间距属性.............................................................................................22、使用锚记.............................................................................................................................43、滚动字幕.............................................................................................................................5CSS...................................................................................................................................................61、样式表的基本语法.............................................................................................................62、文本属性.............................................................................................................................73、背景属情.............................................................................................................................74、方框属性.............................................................................................................................75、实现行的背景色为yellow，线宽2px、虚线框样式dashed、颜色为red....................86、实现下图细边框的效果...................................................................................................107、特殊超链接样式...............................................................................................................117-1、CSS控制超链接样式(无下划线)和(鼠标悬浮时变为红色并加上下划线)......118、实现细边框的文本输入框,设置无下划线的超连接样式,鼠标在超链接上悬停时变为红色.........................................................................................................................................129、实再按钮背景图像...........................................................................................................1310、行内(嵌入)样式表..........................................................................................................1411、链接（LINK）外部样式表.........................................................................................1612、表格下方为虚线样式.....................................................................................................1613、单独的虚线样式.............................................................................................................1714、设置细边框样式，当鼠标移动到边框上方时，边框变为红色.................................1715、表格导角.........................................................................................................................18JavaScript......................................................................................................................................19第2页共20页HTML1、什么是填充属性和间距属性为什么要使用表格填充属性第3页共20页第4页共20页2、使用锚记htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title锚记/title/headbodyahref=#marker点击此处/abrp /pp /pp /pp /pp /pp /pp /pp /pp /p第5页共20页p /pp /pp /pp /pp /pp /pp /pp /pp /pp /pp /pp /pp /pp /pp /paname=marker要看到的内容/a/body/html3、滚动字幕htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title滚动字幕/title/headbodymarqueescrolldelay=100direction=lift从右向左水平滚动(默认)/marqueemarqueescrolldelay=100direction=right从左向右水平滚动/marqueemarqueescrolldelay=100direction=uponMouseOver=this.stop()onMouseOut=this.start()ahref=#测试1/abrahref=#测试2/abr/marquee/body/html第6页共20页CSS1、样式表的基本语法第7页共20页2、文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐3、背景属情背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x(只在水平方向上平铺)、repeat(铺满整个区域)、no-repeat(不平铺)、repeat-y(只在垂直方向上平铺)4、方框属性第8页共20页属性CSS名称说明边界属性margin-top设置对象的上边距margin-right设置对象的右边距margin-bottom设置对象的下边距margin-left设置对象的左边距边框属性border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色填充属性padding-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离5、实现行的背景色为yellow，线宽2px、虚线框样式dashed、颜色为red第9页共20页HTMLHEADMETAhttp-equiv=Content-Typecontent=text/html;charset=gb2312TITLE表格虚线框的样式/TITLESTYLEtype=text/css.tableBorder{border-right-width:3px;border-right-color:red;border-right-style:dashed;padding-top:20px;padding-left:10px;}TR{background:yellow;}/STYLE/HEADBODY第10页共20页TABLEborder=0TRTDclass=tableBorder手机冲值/TDTDclass=tableBorder电子彩票/TD/TRTRTDclass=tableBorder电脑硬件/TDTDclass=tableBorder数码相机/TD/TR/TABLE/BODY/HTML6、实现下图细边框的效果HTMLHEADTITLE细边框的文本框/TITLE/HEADSTYLEtype=text/css.textBorder{border-width:1px;border-style:solid;}/STYLEBODYFORMname=form1method=postaction=第11页共20页P名字：INPUTname=fnametype=textclass=textBorder/PP密码：INPUTname=passtype=passwordclass=textBordersize=21/P/FORM/BODY/HTML7、特殊超链接样式特殊样式（超连接）a:link{color:#FF0000}/*未被访问的链接红色*/a:visited{c