Use CSS to deploy a list similar to a tree, similar to the numbered list in word, instead of a general list. This example is used to introduce the usage of Li in CSS, this kind of tree list is rare at ordinary times, hoping to help you learn CSS.
Instance code:Copy to Clipboard reference content: [www.bkjia.com] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> css tree-like list layout instance </title>
<Style>
Ul
{
Background: #999999;
Font-size: 24px;
}
</Style>
</Head>
<Body>
<Ul>
<Li> This is the first list.
<Ul>
<Li> This is the second list.
<Ul>
<Li> This is the third list. </Li>
<Li> This is the third list. </Li> </ul> </li>
<Li> This is the second list. </Li> </ul> </li>
<Li> This is the first list. </Li> </ul>
<Ol>
<Li> This is the first list.
<Ol>
<Li> This is an example of the display effect of two list elements.
<Ol>
<Li> This is the third list. </Li>
<Li> This is the third list. </Li> </ol> </li>
<Li> This is the second list. </Li> </ol> </li>
<Li> This is the first list. </Li> </ol>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
