纯CSS打造标签列

来源：互联网发布：不孕公告走红网络编辑：程序博客网时间：2024/06/06 02:53

此文参照另一个博客再自行编辑，原出处 http://www.iinterest.net/2010/11/13/css-flow-steps/ 以下为自己练习，因此标为原创。
<!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>
</head>

<style>
*{
margin:0;
padding:0;
}
div{
width:1000px;
margin:100px auto;
}
ul{
list-style-type:none;
}
ul li{
float:left;
//border:1px solid #000;
height:53px;
text-align:center;

}
ul li a{
float:left;
height:45px;
color:#0c212b;
margin-left:-23px;
padding-top:5px;
padding-bottom:3px;
text-decoration:none;
font-size:40px;
background:#afb4db;
}
b{
width:0px;
height:0px;
float:left;
margin-top:0px;
margin-left:0px;
margin-left:-40px;
border:26.5px solid #afb4db;
border-left-color:#fff;
}
s{
position:relative;
float:left;
width:0px;
height:0px;
border:26.5px solid transparent;
border-left-color:#afb4db;
font-size:0;
line-height:0;
z-index:99;
}
</style>
<body>
<div>
   <ul>
       <li><b></b><a href="">Hello</a><s></s></li>
       <li><b></b><a href="">World</a><s></s></li>
       <li><b></b><a href="">!!!!!!!!</a><s></s></li>

   </ul>
</div>
</body>
</html>

0 0