html和css代码的网页(html,css)

　　我给大家介绍如何使用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接下来会有文章介绍，敬请期待。