樹形文本是一種常見的文本排版方式,它可以清晰地展示出文本之間的層次結構,方便用戶查看。而使用CSS可以更好地控制樹形文本的樣式。
創建樹形文本可以使用HTML中的無序列表(ul)和有序列表(ol),利用CSS設置嵌套列表的樣式即可實現樹形文本。
ul{ list-style:none; margin:0; padding:0; } li{ margin-bottom:10px; } li:before{ content:''; display:inline-block; border-left:1px solid gray; height:100%; vertical-align:top; margin-left:-10px; } li:last-child:before{ height:10px; } li:only-child:before{ display:none; } li.expandable:before{ content:'+'; cursor:pointer; } li.collapsible:before{ content:'-'; cursor:pointer; } li a{ text-decoration:none; color:black; font-weight:bold; } li a:hover{ color:blue; }
上述CSS代碼中,首先對ul進行了一些樣式設置,去掉了默認的列表樣式和內間距外間距。然后對li應用了一些樣式,使它們具有向左的邊框,并且每個li之間有一定的間距。接著,通過:before偽類設置了li的前導符,用來展示上下級關系,同時也設置了可展開和可折疊的樣式。
最后,對li內的鏈接進行了樣式設置,使之在鼠標懸停時樣式會有所改變。
上一篇樣式css文件沒調用
下一篇樣式css三種類型