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

发布时间：2018-09-03 02:43:28 所属栏目：专访来源：站长网

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

　　关于网页中的动态走势图，我们一般看到的都是使用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><P><v:line style="LEFT: 0px; POSITION: absolute" from = "164.5pt,-9pt" to ="244pt,5pt" strokecolor = "red"></v:line>7</P></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><P><v:line style="LEFT: 0px; POSITION: absolute" from = "195.5pt,5pt" to ="244pt,-9pt" strokecolor = "red"></v:line>4</P></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><P><v:line style="LEFT: 0px; POSITION: absolute" from = "195.5pt,4pt" to ="195pt,-9pt" strokecolor = "red"></v:line>4</P></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><P><v:line style="LEFT: 0px; POSITION: absolute" from = "195.5pt,-9pt" to ="262pt,5pt" strokecolor = "red"></v:line>8</P></TD> <TD id=k1>4</TD> </TR> </TBODY> </TABLE> </BODY> </HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：甘孜站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!