@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>进度条</title>
<style>
#nav ul li {
float: left;
list-style: none;
width: 290px;
height: 60px;
}
li div i.r {
border-left: 50px solid #61a5cc;
right: -50px;
}
li div i.l {
border-left: 50px solid #fff;
right: 154px;
}
li div i {
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0px;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
}
li div {
line-height: 36px;
text-align: center;
color: #008abc;
font-size: 14px;
width: 200px;
/*border:2px solid #fff;*/
background: #61a5cc;
position: absolute;
}
</style>
</head>
<body>
<div id="nav" style="margin-left:10%;">
<ul>
<li class="first ">
<div>
<i class="l">
</i>航班查询<i class="r"></i>
</div>
</li>
<li>
<div class="two">
<i class="l"></i>航班选择<i class="r"></i>
</div>
</li>
<li>
<div>
<i class="l"></i>旅客信息<i class="r"></i>
</div>
</li>
<li>
<div>
<i class="l"></i>支付订单<i class="r"></i>
</div>
</li>
<li>
<div>
<i class="l"></i>完成支付<i class="r"></i>
</div>
</li>
</ul>
</div>
</body>
</html>
效果图：
主要是通过拼接实现的。
扫一扫
2181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
