zoukankan      html  css  js  c++  java
  • Html Table 表格 画斜线

    效果图

     在Html Table 表格中 画斜线  分 文字和斜线 两部分实现

     文字部分

    <th class="row-0" style="150px;height:50px;" >
        <div class="biaotou">
             <div class="biaotoutxt1">转单办事处</div>
             <div class="biaotoutxt2">接单办事处</div>
        </div> 
    </th> 
    <style>
        .biaotou {  
            line-height: 5px;
            text-align: left;
           /*  用背景图片 方式 有斜线 也是可以的
            background: rgba(0, 0, 0, 0) url("${base}/images/tab_bg.jpg") no-repeat scroll 0 0;
            height: 51px;
             131px;*/
        }
        .biaotoutxt1 {
            color: #FFFFFF;  /* 文字颜色  */
            padding: 1px 0 0 65px; /* 文字位置  需要手调  */
        }
        .biaotoutxt2 {
            color: #FFFFFF;
            padding: 15px 0 0 5px;
        }
    </style>

    斜线部分

    此table可以放在 html 的最下方,仅用于 画斜线

    <table><td class="first"></td></table>
    <style>
         td[class=oblique_line]:before{
            content: "";
            position: absolute;
            width: 1px;
            height:164px;/* 需要手调 ,线的长度 */
            top:171; /* 需要手调 ,线的位置*/
            left:57;
            background-color: white; /* 线的颜色 black */
            display: block;
            transform: rotate(-74deg);/* 需要手调 ,斜线的角度*/
            transform-origin: top;
        }
    </style>
  • 相关阅读:
    代码间距的由来和解决方法
    径向渐变
    倒计时原理
    javascript原型模式理解
    倒计时原理和折叠收缩
    highcharts注意事项
    jsp注释前台不可见
    启动Tomcat任何程序都报错
    面试题
    eclipse不自动弹出提示(alt+/快捷键失效)
  • 原文地址:https://www.cnblogs.com/hailexuexi/p/13176425.html
Copyright © 2011-2022 走看看