运用ul和li实现树形展示

最新推荐文章于 2021-06-17 00:54:26 发布

原创最新推荐文章于 2021-06-17 00:54:26 发布 · 7.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #ul #li #树

本文通过HTML和CSS展示了如何使用<ul>和<li>元素创建一个树形列表。CSS样式用于定义列表项的布局、边框和层级关系，使得列表呈现出树状结构。

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>树形列表</title>
<style>

.ulProd > ul{
margin-bottom: 0px;
}
.ulProd ul > li {
list-style-type:none;
margin:0;
padding:10px 0px 5px 5px;
position:relative;
left: 0px;
font-size: 18px;
cursor: pointer;
width: 440px;
}
.ulProd li ul >li{
list-style-type:none;
margin:0;
padding:10px 0px 0 5px;
position:relative;
left: 45px;
font-size: 18px;
width: 390px;
}
.ulProd li ul >li{
list-style-type:none;
margin:0;
padding:10px 0px 0 5px;
position:relative;
left: 25px;
font-size: 18px;
width: 410px;
}
.ulProd li::before, .ulProd li::after {
content:'';
left:-15px;
position:absolute;
right:auto
}
.ulProd li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px
}


.ulProd li::after {
border-top:1px solid #999;
height:20px;
top:25px;
width:20px
}
.ulProd li>span {
-moz-border-radius:5px;
-webkit-border-radius:5px;
/* border:1px solid #999; */
border-radius:5px;
display:inline-block;
padding:0px 0px;
text-decoration:none
}
.ulProd li.parent_li>span {
cursor:pointer
}
.ulProd>ul>li::before, .ulProd>ul>li::after {
border:1
}
.ulProd li:last-child::before {
height:25px;

}
</style>
</head>

<body>
<div class='ulProd'>
<ul >
<li >123</li>
<li >456</li>
<li >789</li>
</ul>
</div>
</body>

</html>