<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
left: 112px;
top: 51px;
background-color: #CCCCCC;
display:flex;
flex-direction:column;
}
.vitems{
height:30px;
width:80px;
background:#475460;
border:1px solid #475460;
display:flex;
flex-direction:row;
}
.vitems span{
width:77px;
height:100%;
line-height:30px;
text-align:center;
color:white;
font-size:12px;
cursor:pointer;
}
.vline{
background:lime;
width:3px;
height:20px;
margin-top:5px;
margin-left:2px;
}
.hitems{
height:30px;
width:80px;
background:#475460;
border:1px solid #475460;
display:flex;
flex-direction:column;
}
.hitems span{
width:100%;
height:26px;
line-height:26px;
text-align:center;
color:white;
font-size:12px;
cursor:pointer;
}
.hline{
background:lime;
width:70px;
height:3px;
margin-left:5px;
margin-bottom:2px;
}
.zitems{
height:30px;
width:80px;
background:#475460;
border:1px solid #475460;
display:flex;
flex-direction:row;
}
.zitems span{
width:30px;
height:100%;
line-height:30px;
text-align:center;
color:white;
font-size:12px;
cursor:pointer;
}
.zline{
background:lime;
width:20px;
height:2px;
margin-right:3px;
margin-left:3px;
margin-top:14px;
}
-->
</style>
</head>
<body>
<div id="Layer1">
<div class="vitems">
<div class="vline"></div>
<span>竖 线</span>
</div>
</br>
<div class="hitems">
<span>横 线</span>
<div class="hline"></div>
</div>
</br>
<div class="zitems">
<div class="zline"></div>
<span>中 线</span>
<div class="zline"></div>
</div>
</div>
</body>
</html>
