我给大家介绍如何使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构。树状结构我们在很多项目中要应用,如公司组织架构图、无限级分类等等。
HTML
我们以某个公司的部门组织结构为例,其实就是一个无限级分类,我们首先定义好HTML结构,它有ul li组成,代码应该像这样:
<ulclass= "tree">
<li>研发中心
<ul>
<li>北京研发部 </li>
<li>深圳研发部
<ul>
<li>产品1组 </li>
<li>产品2组 </li>
</ul>
</li>
</ul>
</li>
<li>销售部
<ul>
<li>售前 </li>
<li>售后 </li>
<li>代理分区
<ul>
<li>东北区 </li>
<li>华北区 </li>
<li>华南区 </li>
<li>华中区 </li>
</ul>
</li>
</ul>
</li>
<li>财务部 </li>
<li>人事部 </li>
</ul>
我们要把这样一个无序列表转换成树状外观,需要使用3张小图片来连接各个节点,使得很容易看出各个节点间的层级关系,父子关系还是兄弟关系。
准备好三张小图片。
CSS
首先,我们给每个<ul>元素设置竖线图片,这样每个ul就有一条长长的竖线。然后给每个<li>元素设置T型图片,最后一步,就是给最后一个li节点设置L型闭合树结构,整个CSS代码如下:
ul.tree, ul.treeul{
list-style-type:none;
background:url(images/vline.png )repeat-y;
margin:0;
padding:0;
}
ul.treeul{
margin-left:10px;
}
ul.treeli{
margin:0;
padding:012px;
line-height:20px;
background:url(images/node.png )no-repeat;
color:#369;
font-weight:bold;
}
ul.treeli:last- child{
background:#fffurl(images/lastnode.png )no-repeat;
}
怎么样,很简洁的代码就实现了树状结构的展示。当然,实际项目中,我们可能还会给树状结构加上动态效果,比如折叠与展开树分支,读取与渲染无限级树状结构等等,helloweba接下来会有html" class="superseo">文章介绍,敬请期待。
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » html和css代码的网页(css,html)
1 评论