纯CSS打造标签列

最新推荐文章于 2024-08-18 08:09:12 发布

梁巴斯

最新推荐文章于 2024-08-18 08:09:12 发布

阅读量341

点赞数

分类专栏： Web前端文章标签： css html

本文链接：https://blog.csdn.net/renrenai35/article/details/25713181

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

此文参照另一个博客再自行编辑，原出处 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

收藏

觉得还不错? 一键收藏
0
评论
纯CSS打造标签列

Document *{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
复制链接

扫一扫