css怎么做斜线

html-css0319

css怎么做斜线,第1张

<style>

#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>

当然方法还有很多种,比如用满边框,再在上面叠加一个小一点的满边框就出来斜线了。

1、打开WORD软件,新建一份文档。

2、在文档中插入或绘制所需要的表格。

3、在所要做出如上图的表格单击一下,随便那一格都可以,然后单击命令栏上的表格,单击绘制斜线表头,在表头样式里选样式2,字体根据需要选,在行标题,数据标题,列标题分别输入要制表所要项。最后单击确定。

4、调整美化。

以上我是用word 2003所说,其他版本,你注意查找。因为版本不一样,工具,格式有细微区分。同时还可以操作其他样式表头制作。

<!doctype html>

<html>   

<head>

    <title>斜线表头</title>

    <meta charset="utf-8">

</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 = x1 i <= x2 i++) {

          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>

table本身没有这个样式 1,作图,2css,js