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>
  • 相关阅读:
    Plotagraph软件五分钟光速速成傻瓜教程
    QT插件+ROS 2 新建项目
    QT插件+ROS 1 安装配置
    GitHub 优秀的 Android 开源项目 (精品)
    ROS的launch文件
    编写第一个 Shell 脚本
    CMake 入门实战
    ROS 创建服务和请求
    ROS 小乌龟测试
    【转】C++中的虚函数的实现
  • 原文地址:https://www.cnblogs.com/hailexuexi/p/13176425.html
Copyright © 2011-2022 走看看