XML+Css实现简单的网页走势图效果

　　关于网页中的动态走势图，我们一般看到的都是使用flash实现的，与本文中介绍的例子不太相同，本文中的效果是基于XML+Html技术实现的，在网页上显示简易的走势图（静态）。另外，边线对齐还有点小问题，本例仅供参考。

　　效果演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML xmlns="http://www.w3.org/TR/REC-html40" xmlns:v ="urn:schemas-microsoft-com:vml" xmlns:o ="urn:schemas-microsoft-com:office:office" xmlns:w ="urn:schemas-microsoft-com:office:word"> <HEAD> <title>走势图 - Liehuo学院.烈火Net</title> <STYLE> BODY { FONT-SIZE: 12px; COLOR: #000000 } TD { FONT-SIZE: 12px; COLOR: #000000 } p { FONT-SIZE: 13px; COLOR: #ffffff; BACKGROUND-COLOR: #006666 } #k1 { FONT-SIZE: 12px; COLOR: #000000; BACKGROUND-COLOR: #CC9900 } #1 { FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; BACKGROUND-COLOR: #009933 } v\:* { BEHAVIOR: url(#default#VML) } </STYLE> </HEAD> <BODY> <TABLE borderColor=#ffffff cellSpacing=0 width=350 bgColor=#ffffff borderColorLight=#808080 border=1> <TBODY> <TR align=middle> <TD noWrap rowSpan=2> 期号 </TD> <TD noWrap rowSpan=2> 开奖号码 </TD> <TD colSpan=10>第一位</TD> </TR> <TR align=middle> <TD> 0 </TD> <TD> 1 </TD> <TD> 2 </TD> <TD> 3 </TD> <TD> 4 </TD> <TD> 5 </TD> <TD> 6 </TD> <TD> 7 </TD> <TD> 8 </TD> <TD> 9 </TD> </TR> <TR align=middle> <TD>2008-001</TD> <TD>7 8 3 2 9 0 3</TD> <TD id=k1>15</TD> <TD id=k1>3</TD> <TD id=k1>1</TD> <TD id=k1>13</TD> <TD id=k1>21</TD> <TD id=k1>8</TD> <TD id=k1>10</TD> <TD id=1><v:line style="LEFT: 0px; POSITION: absolute" from = "164.5pt,-9pt" to ="244pt,5pt" strokecolor = "red"></v:line>7</TD> <TD id=k1>5</TD> <TD id=k1>4</TD> </TR> <TR align=middle> <TD>2008-002</TD> <TD>7 8 3 2 9 0 4</TD> <TD id=k1>1</TD> <TD id=k1>3</TD> <TD id=k1>6</TD> <TD id=k1>9</TD> <TD id=1><v:line style="LEFT: 0px; POSITION: absolute" from = "195.5pt,5pt" to ="244pt,-9pt" strokecolor = "red"></v:line>4</TD> <TD id=k1>15</TD> <TD id=k1>4</TD> <TD id=k1>1</TD> <TD id=k1>8</TD> <TD id=k1>9</TD> </TR> <TR align=middle> <TD>2008-003</TD> <TD>7 8 3 2 9 0 5</TD> <TD id=k1>3</TD> <TD id=k1>5</TD> <TD id=k1>7</TD> <TD id=k1>3</TD> <TD id=1><v:line style="LEFT: 0px; POSITION: absolute" from = "195.5pt,4pt" to ="195pt,-9pt" strokecolor = "red"></v:line>4</TD> <TD id=k1>9</TD> <TD id=k1>16</TD> <TD id=k1>8</TD> <TD id=k1>6</TD> <TD id=k1>12</TD> </TR> <TR align=middle> <TD>2008-004</TD> <TD>7 8 3 2 9 0 6</TD> <TD id=k1>11</TD> <TD id=k1>17</TD> <TD id=k1>2</TD> <TD id=k1>3</TD> <TD id=k1>11</TD> <TD id=k1>9</TD> <TD id=k1>6</TD> <TD id=k1>5</TD> <TD id=1><v:line style="LEFT: 0px; POSITION: absolute" from = "195.5pt,-9pt" to ="262pt,5pt" strokecolor = "red"></v:line>8</TD> <TD id=k1>4</TD> </TR> </TBODY> </TABLE> </BODY> </HTML> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

XML+Css实现简单的网页走势图效果

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

XML+Css实现简单的网页走势图效果

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀