当前位置： 移动技术网 > IT编程>网页制作>CSS > 【代码笔记】HTML-列表

【代码笔记】HTML-列表

2018年10月16日  | 移动技术网IT编程  | 我要评论

水库钓鲫鱼,康斯坦丁马卡里奇,邯郸信息港招聘

一，效果图。

 

 

 

 

 

二，代码。

 

复制代码
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>html 列表</title>
</head>

<body>
    <!--无序列表-->
    <h4>an unordered list</h4>
    <ul>
        <li>cofferr</li>
        <li>tea</li>
        <li>mide</li>
    </ul>
    <!--有序列表-->
    <ol start="50">
        <li>cooffee</li>
        <li>tea</li>
        <li>mike</li>
    </ol>
    <!--自定义列表-->
    <dl>
        <dt>coffer</dt>
        <dd>--black hot drink</dd>
        <dt>mike</dt>
        <dd>--white cold drink</dd>
    </dl>
    <!--不同类型的有序列表-->
    <h4>numbered list:</h4>
    <ol>
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>letters list:</h4>
    <ol type="a">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>lowercase  letters list:</h4>
    <ol type="a">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>roman numbers list:</h4>
    <ol type="i">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>lowercase roman numbers list:</h4>
    <ol type="i">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <!--不同类型的无序列表-->
    <p><b>note:</b> the type attribute of the ul tag is deprecated in html 4, and is not supported in html5. therefore we have used the style attribute and the css list-style-type property, to define different types of unordered lists below:</p>
    <h4>disc bullets list:</h4>
    <ul style="list-style-type:disc">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <h4>circle bullets list:</h4>
    <ul style="list-style-type:circle">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <h4>square bullets list:</h4>
    <ul style="list-style-type:square">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <!--嵌套列表-->
    <h4>a list inside a list:</h4>
    <ul>
        <li>coffee</li>
        <li>tea</li>
        <ul>
            <li>black tea</li>
            <li>green tea</li>
        </ul>
        <li>mike</li>
    </ul>
    <!--嵌套列表2-->
    <h4>lists inside a list</h4>
    <ul>
        <li>coffee</li>
        <li>tea
            <ul>
                <li>black tea</li>
                <li>green tea
                    <ul>
                        <li>china</li>
                        <li>africa</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>mick</li>
    </ul>
    <!--自定义列表-->
    <h4>a definition list</h4>
    <dl>
        <dt>coffee</dt>
        <dd>-black hot drink</dd>
        <dt>mike</dt>
        <dd>-white cold drink</dd>
</body>

</html>
复制代码

 

参考资料：《菜鸟教程》

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网