网页列表设计代码(网页制作经验分享)

有序列表

经过之前关于表格、表单的学习后,再来学习列表,就显得非常的简单和容易理解了。

学习是构建知识体系的过程,没有形成体系的知识学习再多也是碎片,是很难形成技能或深刻理解的,因此,如果您是零基础的初学者,第一次看我的教程,如果时间允许的话,请务必从目录中找寻第一篇,循序渐进的学习。

列表分为有序列表、无序列表和定义列表,同时列表之中还能嵌套列表,和表格非常相似。

首先介绍有序列表

要用

    标签告诉浏览器这里是列表。

    然后在里面添加

  1. 标签,在这个标签中添加内容即可。

    示例代码如下

    我喜欢的水果



    1. 葡萄

    2. 西瓜

    3. 苹果

    4. 桃子

    大家可以把它放到一个新的html框架中看看效果。

    完整代码如下:




    列表


    有序列表

    我喜欢的水果



    1. 葡萄

    2. 西瓜

    3. 苹果

    4. 桃子



    页面效果如下:

    通过修改

      标签中的type属性我们可以改变序号显示的样式,默认的是数字,大家看一下不同的type值的不同效果吧!示例代码如下:


      1. 葡萄

      2. 西瓜

      3. 苹果

      4. 桃子



      1. 葡萄

      2. 西瓜

      3. 苹果

      4. 桃子

      1. 葡萄
      2. 西瓜
      3. 苹果
      4. 桃子

      页面效果如下:

      下面给大家介绍一下搜狗输入法中如何输入罗马数字。

      step1.点击”输入方式”

      step2.点击”特殊符号”后选择数字序号,找到罗马数字即可

      除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在

        标签中修改style属性可以直接调用这些css中的属性。写法是style=”list-style-type:属性值;”

        示例代码如下:(使用日语中的片假名表示序号)


        1. 葡萄

        2. 西瓜

        3. 苹果

        4. 桃子

        页面效果如图所示:

        是不是很有趣,这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明,大家自己课下去尝试,这个列表中既有有序列表的值也有无序列表的值。

        如图:

        资料来自w3school

        无序列表

        无序列表与有序列表的区别在于最外层的标签,它的写法是这样的:

          有一个记忆的小技巧,有序的英文是order,故有序列表为order list(列表),缩写为ol。

          无序为unorder,无序列表为unorder list,缩写为ul。

          无序列表

            标签的type属性用来控制列表前的标记显示演示。

            示例代码如下:

            无序列表

            我喜欢的水果



            • 葡萄

            • 西瓜

            • 苹果

            • 桃子



            • 葡萄

            • 西瓜

            • 苹果

            • 桃子



            • 葡萄

            • 西瓜

            • 苹果

            • 桃子



            • 葡萄

            • 西瓜

            • 苹果

            • 桃子

            页面效果如下:

            通过图片我们可知,无序列表默认的列表标识就是type=”disc”。

            style属性的话大家自己试试吧,这里就不啰嗦了。

            定义列表

            这个列表比较特殊,也比较不常见,主要就是显示名词定义的。

            首先要写入

            标签。这是告诉浏览器这里是个定义列表,和
                一样。

                定义的英文是definition,定义列表就是definition list,缩写是dl。

                下面在

                标签中间写入定义的名称
                ,即definition title(标题)。

                与定义名称标签并列的是定义描述

                ,即definition describe(描述)。

                示例代码如下:


                计算机

                用来计算的仪器 ... ...

                显示器

                以视觉方式显示信息的装置 ... ...

                页面效果如下:

                今天的内容结束了!

                列表嵌套列表的测试大家自己试试吧,学到现在,相信你们都可以完成了!

      © 版权声明
      评论 抢沙发
      加载中~
      每日一言
      不怕万人阻挡,只怕自己投降
      Not afraid of people blocking, I'm afraid their surrender