#book{
width:300pxheight:20pxborder-bottom:2px solid #000000
-webkit-transform: rotate(45deg)/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(45deg)/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45)
}
</style>
<div id="book">
</div>
当然方法还有很多种,比如用满边框,再在上面叠加一个小一点的满边框就出来斜线了。
<HTML>
<HEAD>
<TITLE>斜线表头</TITLE>
</HEAD>
<script Language="javascript">
function a(x,y,color)
{document.write("<img border='0' style='position: absolute left: "+(x)+" top: "+(y)+"background-color: "+color+"' src='px.gif' width=1 height=1>")}
</script>
<body leftmargin=0 topmargin=0> <br>
<TABLE border=0 bgcolor="000000" cellspacing="1" width=400 >
<TR bgcolor="FFFFFF">
<TD width="111" height="52" ><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td1"></td>
<td>成绩</td>
</tr>
<tr>
<td>姓名</td>
<td id="td2"></td>
</tr>
</table></TD>
<TD width="81">数学</TD>
<TD width="96">英语</TD>
<TD width="99">C语言</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>张三</TD>
<TD>55</TD>
<TD>66</TD>
<TD>77</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>李四</TD>
<TD>99</TD>
<TD>68</TD>
<TD>71</TD>
</TR>
<TR bgcolor="FFFFFF">
<TD>王五</TD>
<TD>33</TD>
<TD>44</TD>
<TD>55</TD>
</TR>
</TABLE>
<script>
function getTop(tdobj)
{
vParent = tdobj.offsetParent
t = tdobj.offsetTop
while (vParent.tagName.toUpperCase() != "BODY")
{
t += vParent.offsetTop
vParent = vParent.offsetParent
}
return t
}
function getLeft(tdobj)
{
vParent = tdobj.offsetParent
t = tdobj.offsetLeft
while (vParent.tagName.toUpperCase() != "BODY")
{
t += vParent.offsetLeft
vParent = vParent.offsetParent
}
return t
}
function line(x1,y1,x2,y2,color)
{
var tmp
if(x1>=x2)
{
tmp=x1
x1=x2
x2=tmp
tmp=y1
y1=y2
y2=tmp
}
for(var i=x1i<=x2i++)
{
x = i
y = (y2 - y1) / (x2 - x1) * (x - x1) + y1
a(x,y,color)
}
}
//line(1,1,100,100,"000000")
line(getLeft(td1),getTop(td1),getLeft(td1)+td1.offsetWidth,getTop(td1)+td1.offsetHeight,'#000000')
line(getLeft(td2),getTop(td2),getLeft(td2)+td2.offsetWidth,getTop(td2)+td2.offsetHeight,'#000000')
</script>
</BODY>
</HTML>
万维网上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。[1]
超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
能,一种是使用css样式:先画一条横线或竖线,然后将这条线旋转一定角度得到斜线。代码如下:<style>
#book{width:300pxheight:20pxborder-bottom:1px solid #000000-webkit-transform: rotate(45deg)/*Safari 4+,Google Chrome 1+ */-moz-transform: rotate(45deg)/*Firefox 3.5+*/filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45)}</style><div id="book"></div>
另外一种需要使用canvas标签,通过js实现:先画一块画板,再通过两点定位直接在画板上画线。代码如下:
<canvas id="myline" style="width:500pxheight:500px">
</canvas>
<script>
var c=document.getElementById("myline")
var ctx=c.getContext("2d")
ctx.beginPath()
ctx.moveTo(0,0)
ctx.lineTo(300,150)
ctx.stroke()
</script>