html实现带斜线的表头
在html、jsp中经常用到table,但在table中如何实现标题表格中画斜线的操作呢?从网上查了很多资料,可以实现的方法有好几种,现在提供一种简单的操作方法,而且不用考虑分辨率的问题,如图:
方法如下:
该方法,实现的不是纯粹的在table中画斜线,而是实现两种颜色的对比,实现出有斜线的感觉:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
/*对角钱矩形宽度为50,高度为100,分别对应border-top和border-left两个属性来设定*/
.d1{border-top:100px threedlightshadow solid;border-left:120px windowframe solid;width:0;height:0;position:relative;color:#FFF}
span{display:block;width:40px}
.s1{position:absolute;top:-70px;left:-44px;color:black;}
.s2{position:absolute;bottom:8px;right:55px}
</style>
</head>
<body>
<div class="d1">
<span class="s1">专业</span>
<span class="s2">项目</span>
</div>
</body>
</html>
参考:http://share.iteye.com/blog/1670054
html实现带斜线的表头的更多相关文章
- python web开发-flask中的url带斜线和不带斜线区别详解
通过flask进行路由配置的时候,有一个细节,就是同样的url,带上"/"和不带"/"有什么区别. 举例说明: 比如有个url,名字为"/url&qu ...
- flask路由末端带斜线和不带斜线的区别
路由末端带有“/” app.route('/test/') 在浏览器中输入http://127.0.0.1:5000/test/ 和http://127.0.0.1:5000/test都能访问 路由末 ...
- 5种做法实现table表格中的斜线表头效果
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...
- html table表格斜线表头的实现方法总汇
在html中给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢?总结了以下几种方法: 1.UI背景图实现 直接去找公司的UI,让她做一张图片,作为背景图片放到这里,然后撑满就可 ...
- poi导出Excel报表多表头双层表头、合并单元格
效果图: controller层方法: /** * * 导出Excel报表 * @param request * @return * */ @ ...
- 好用的自适应表格插件-bootstrap table (支持固定表头)
最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...
- Linux命令【第一篇】
1.创建一个目录/data 记忆方法:英文make directorys缩写后就是mkdir. 命令: mkdir /data 或 cd /;mkdir data #提示:使用分号可以在一行内分割两个 ...
- 基于NPOI导出和导入Excel
概述 NPOI,顾名思义,就是POI的.NET版本.NPOI就是用.NET语言编写的一套数据导出Excel的开源项目,支持XML.xls.xlsx.ppt等格式..NET不仅实现Excel导出还可以实 ...
- phpcms V9 整合 Discuz! X2 教程
整合原理: UCenter 作服务端:phpsso 与 Discuz! 分别作 UCenter 的客户端应用:phpsso 与 Discuz! 通过 UCenter 发生交互. phpcms 通过 p ...
随机推荐
- Keras中RNN不定长输入的处理--padding and masking
在使用RNN based model处理序列的应用中,如果使用并行运算batch sample,我们几乎一定会遇到变长序列的问题. 通常解决变长的方法主要是将过长的序列截断,将过短序列用0补齐到一个固 ...
- 【洛谷】P4643 【模板】动态dp
题解 在冬令营上听到冬眠的东西,现在都是板子了猫锟真的是好毒瘤啊(雾) (立个flag,我去thusc之前要把WC2018T1乱搞过去= =) 好的,我们可以参考猫锟的动态动态dp的课件,然后你发现你 ...
- 002 使用Appender扩展logger框架
这个地方,在看公司的源代码的时候,写的知识点: 现在再看,竟然不是太懂,重新写一份新的文档,外加示例说明. 一:说明 1.log4j 环境的三个主要组件: logger(日志记录器):控制要启用或禁用 ...
- thinkphp3.2链接数据库常用的配置选项
thinkphp3.2常用配置选项,app/Common/Conf/config.php 或者 app/Home/Conf/config.php 1 2 3 4 5 6 7 8 'SHOW_PAGE_ ...
- thinkphp3.2自动生成模块BIND_MODULE
thinphp3.2中提供了自定义生成模块与控制器的常量,分别是BIND_MODULE,BUILD_CONTROLLER_LIST 在 index.php 文件中定义 BIND_MODULE,BUIL ...
- PHP编程基础学习(一)——数据类型
PHP一共支持8种原始类型,其中: 4种标量类型: boolean(布尔型) integer(整型) float/double(浮点型) string(字符串型) 两种复合类型: array(数组) ...
- python opencv3 背景分割 mog2 knn
git:https://github.com/linyi0604/Computer-Vision 使用mog2算法进行背景分割 # coding:utf-8 import cv2 # 获取摄像头对象 ...
- redis修改密码
## 无需添加密码参数 redis-cli.exe -h 127.0.0.1 -p 6379 ## 获取当前密码 config get requirepass ## 设置当前密码,服务重新启动后又会置 ...
- 【单调队列】BZOJ1342-[Baltic2007]Sound静音问题
[题目大意] 给出一个n个数的序列,以哪位位置为开头的长度为m的区间满足该区间的最大值与最小值的差≤一个定值. [思路] 单调队列……说一下单调队列比较方便的操作. 把第一个先丢进去,开始条件为hea ...
- 【洛谷】2602: [ZJOI2010]数字计数【数位DP】
P2602 [ZJOI2010]数字计数 题目描述 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. 输入输出格式 输入格式: 输入文件中仅包含一行两个整数a ...