Html+Css实现梯形选项卡
1,先看一下效果图
2,梯形通过定位和设置Border来实现的,平行四边形通过旋转来实现的。
3,代码如下
(1)HTML代码
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="Style/tab.css" type="text/css" />
<script type="text/javascript">
function JumpTab(url)
{
window.location.href = url;
}
</script>
</head>
<body>
<div class="topNavigation"> <div class="outDv firstOutDv currentlevel">
<div class="innerDv currentlevel">
</div>
<div class="container currstart">
合同会签申请
</div> </div>
<div class="outDv level4" onclick="JumpTab('second.html')">
<div class="innerDv">
</div>
<div class="container next">
合同盖章记录
</div>
</div>
<div class="outDv level3" onclick="JumpTab('three.html')">
<div class="innerDv">
</div>
<div class="container next">
合同生效申请
</div>
</div>
<div class="outDv level2" onclick="JumpTab('four.html')">
<div class="innerDv">
</div>
<div class="container next">
付款50%
</div>
</div>
<div class="outDv level1" onclick="JumpTab('five.html')">
<div class="innerDv">
</div>
<div class="container end">
合同归档记录
</div>
</div>
<div class="endDv" onclick="JumpTab('six.html')">
<div class="innerEndDv">相似合同</div>
</div>
<div class="endDv" onclick="JumpTab('seven.html')">
<div class="innerEndDv">
相关合同
</div>
</div> </div> </body>
</html>
(2)CSS代码
* {
padding: 0px;
margin: 0px;
} .topNavigation { border-bottom: 5px solid #51A3C9;
padding-right:10px;
width:90%;
margin:auto;
padding-top:20px;
} .firstOutDv {
margin-left: 0px !important;
} .outDv {
border-bottom: 30px solid #b5b5b5;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 125px;
position: relative;
margin-left: -25px;
display: inline-block;
margin-bottom: -4px;
cursor: pointer;
} .innerDv {
border-bottom: 28px solid #f2f2f2;
border-left: 19px solid transparent;
border-right: 19px solid transparent;
width: 123px;
position: absolute;
left: -18px;
top: 1px; } .container {
z-index: 10;
position: absolute;
padding-left: 22px;
background-position-x: 2px;
background-position-y: center;
background-repeat: no-repeat;
height: 30px;
line-height: 30px;
} .start {
background-image: url('/Images/start.png');
} .next {
background-image: url('/Images/next.png');
} .end {
background-image: url('/Images/end.png');
} .currstart {
background-image: url('/Images/currentstart.png');
color: #fff;
} .currnext {
background-image: url('/Images/currentnext.png');
color: #fff;
} .currend {
background-image: url('/Images/currentend.png');
color: #fff;
} .level5 {
z-index: 5;
} .level4 {
z-index: 4;
} .level3 {
z-index: 3;
} .level2 {
z-index: 2;
} .level1 {
z-index: 1;
} .currentlevel {
z-index: 6;
border-bottom: 30px solid #51a3c9;
top: 0px !important;
} .endDv {
width: 100px;
height: 30px;
transform: skew(35deg);
-webkit-transform: skew(35deg);
-moz-transform: skew(35deg);
-o-transform: skew(35deg);
-ms-transform: skew(35deg);
background-color: #E7E7E7;
/* margin: 50px auto; */
display: inline-block;
margin-bottom: -4px;
float: right;
text-align:center;
margin-left:15px;
cursor:pointer;
} .innerEndDv{
transform: skew(-35deg);
-webkit-transform: skew(-35deg);
-moz-transform: skew(-35deg);
-o-transform: skew(-35deg);
-ms-transform: skew(-35deg);
height:30px;
line-height:30px;
cursor:pointer;
}
.currentEnd{
color:#fff;
background-color:#51A3C9;
}
Html+Css实现梯形选项卡的更多相关文章
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
- [前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
- 各种demo:css实现三角形,css大小梯形,svg使用
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
- css实现梯形标签页
html <nav>click me</nav> css nav{ position: relative; display: inline-block; padding: 15 ...
- 前端(各种demo)一:css实现三角形,css实现梯形,pop弹层,css伪类before,after使用,svg使用(持续更新中)
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
- Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。
1.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- css 简单梯形
通过css2D变形我们可以轻松得到平行四边形,那么通过此技巧可以得到梯形吗? no! 不过我们可以通过3D旋转得到类似这样的效果: transform:perspective(0.5em) rota ...
- 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...
随机推荐
- 怎么配置eclipse的联想功能
第一步:打开Eclipse,windows下,打开“window”→“Preferences” :mac下,打开“偏好设置”. 第二步:选择“Java”,展开,“Editor”,选择“Content ...
- Java 接口和多态
接口 1.1 接口的概述 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”. 接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成.这样 ...
- 使用MaxCompute访问TableStore(OTS) 简明手册
摘要: 大数据计算服务 MaxCompute 能够提供强大的分析能力,而分布式 NoSQL 数据库表格存储在行级别上的实时更新和可覆盖性写入等特性,相对于 MaxCompute 内置表 append- ...
- 一步一步pwn路由器之radare2使用实战
前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 前文讲了一些 radare2 的特性相关的操作方法.本文以一个 c ...
- 解决PJA错误
现场有WAS5.6,均安装在AIX下,且都已经设置PJA,在WAS5上报表正常,但是在WAS6下报表会报错,两个应用下的配置均相同. 反馈的报错日志: [11-4-25 14:20:42:758 ...
- maven 依赖和坐标
1.maven 坐标由groupId.artifactId.packaging.version.classifier定义.2.classifier 用来帮助定义构建输出的一些附属构件.如,*javad ...
- Django 多表查询 聚合查询 分组查询 F查询 Q查询
# -------------------------------------------------------------------------------------------------- ...
- 8 tensorflow修改tensor张量矩阵的某一列
1.tensorflow的数据流图限制了它的tensor是只读属性,因此对于一个Tensor(张量)形式的矩阵,想修改特定位置的元素,比较困难. 2.我要做的是将所有的操作定义为符号形式的操作.也就是 ...
- Chrome 插件推荐
我在这里就是抛砖引玉,各位开发者,有更好的插件请不要吝啬,分享出来. 希望世界和平! 翻译类 沙拉查词 目前使用,感觉挺好的,各种词典,还有统计.划词划句都可以翻译出来. JSON 格式转换 JSON ...
- error MSB3552: Resource file "**/*.resx" cannot be found. [/ConsoleApp1.csproj]
问题场景: 练习在docker下操作netcore,镜像为centos7,安装完netcore sdk 2.2后,执行操作: dotnet new consoledotnet run 出现报错: /u ...