0

0

关于html中列表样式的实例详解

黄舟

黄舟

发布时间:2017-07-26 09:26:46

|

3491人浏览过

|

来源于php中文网

原创

HTML中的列表

HTML中列表中共有三种:有序列表、无序列表和定义列表。

1、有序列表是一列使用数字进行标记的项目,它使用

  • 包含于
      标签(ordered lists)内;

      <ol>
      <li>开始部分li>
      <li>次要部分li>
      <li>结尾部分li>
      ol>

      2、无序列表是一组使用黑点状进行标记的项目,它使用

    1. 包含在
        标签(unordered lists)内;

        <ul>
        <li>关于主题li>
        <li>关于形式li>
        <li>关于内容li>
        ul>

        3、定义列表语义上表示项目及其注释的组合,它以

        标签(definition lists)开始,自定义列表项以
        (definition title)开始,自定义列表项的定义以
        (definition description)开始。 

        <dl>
        <dt>CSSdt>
        <dd>CSS概念dd>
        <dd>CSS应用dd>
        <dd>CSS hacksdd>
        dl>

        从语义上来讲,三组标签分别对应不同具有含义的列表:无序列表适合成员之间无级别顺序关系的情形;有序列表适合各项目之间存在顺序关系的情形;定义列表用于一个术语名对应多重定义或者多个术语名同一个给出的定义,也可以只有术语名称或只有定义,也就是说

        在其中数量不限、对应关系不限。

        列表的CSS


        列表最重要的css属性便是list-style属性,它的语法如下:

        list-style:list-style-image||list-style-position||list-style-type

        list-style-image可定义列表前所使用图片,list-style-position属性取值含outside、inside;outside为默认值,列表项目标记此时被放置在文本以外,它将环绕文本在文本之外,inside列表项目旋转在文本以内,环绕文本对齐。

        列表最重要的css属性便是list-style属性,它的语法如下:

        list-style:list-style-image||list-style-position||list-style-type

        list-style-image可定义列表前所使用图片,list-style-position属性取值含outside、inside;outside为默认值,列表项目标记此时被放置在文本以外,它将环绕文本在文本之外,inside列表项目旋转在文本以内,环绕文本对齐。

        list-style-position为outside


        <ul class="out">
        <li>关于主题li>
        <li>关于形式li>
        <li>关于内容li>
        ul>
        <h4>list-style-position为insideh4>
        <ul class="in">
        <li>关于主题li>
        <li>关于形式li>
        <li>关于内容li>
        ul>


        若列表外标签

            的padding-left设置为0,且list-style-position为outside时,列表符号将不会显示,如上例中ul添加padding-left:0;将显示如下:




            list-style-type为列表显示类型 ,它共有9种常见属性值:


          • disc:默认值。实心圆

          • circle:空心圆

          • square:实心方块

          • decimal:阿拉伯数字

            立即学习前端免费学习笔记(深入)”;

          • lower-roman:小写罗马数字

            PHP 网络编程技术与实例(曹衍龙)
            PHP 网络编程技术与实例(曹衍龙)

            PHP网络编程技术详解由浅入深,全面、系统地介绍了PHP开发技术,并提供了大量实例,供读者实战演练。另外,笔者专门为本书录制了相应的配套教学视频,以帮助读者更好地学习本书内容。这些视频和书中的实例源代码一起收录于配书光盘中。本书共分4篇。第1篇是PHP准备篇,介绍了PHP的优势、开发环境及安装;第2篇是PHP基础篇,介绍了PHP中的常量与变量、运算符与表达式、流程控制以及函数;第3篇是进阶篇,介绍

            下载
          • upper-roman:大写罗马数字

          • lower-alpha:小写英文字母

          • upper-alpha:大写英文字母

          • none:不使用项目符号

          我们可以看到,三种不同列表实际上只是list-style-type默认值不一样而已,通过设置list-style-type即可实现不同显示效果。





          列表之间的嵌套


          列表嵌套的html书写是不少人容易犯的错误,经常写错格式是这样的:

          <ul>
          <li>男性li>
          <li>
          <ol>女性
          <li>女孩子li>
          <li>姑娘li>
          <li>大妈li>
          ol>
          li>
          ul>

          这里包括两处错误:一是

            后不允许直接跟文字,二是这里的文字“女性”应当在第二个
          • 后。正确格式如下:


            <ul>
            <li>男性li>
            <li>女性
            <ol>
            <li>女孩子li>
            <li>姑娘li>
            <li>大妈li>
            ol>
            li>
            ul>

            使用适合的标签进行合理的嵌套可以实现很多复杂的布局,比如常见的tab标签、滑动门等完全不需要使用js操作DOM即可完成,而且实现简单,语义性强。例如还有这篇文章定义列表dl打造图文并茂的CSS列表元素。

            下例以文章列表为例,html如下:


            <h4>www.51obj.cn站点文章列表摘要h4>
            <dl>
            <dt><a href="http://www.51obj.cn/" title="51obj.cn">文章一:javascript程序的优化a>dt>
            <dd>文章发布时间:2010-4-17dd>
            <dt><a href="http://www.51obj.cn/" title="51obj.cn">文章二:深入解析javascript中evala>dt>
            <dd>文章发布时间:2010-4-17dd>
            <dt><a href="http://www.51obj.cn/" title="51obj.cn">文章三:实现SQLite高并发的问题a>dt>
            <dd>文章发布时间:2010-4-17dd>
            dl>


            CSS样式如下:


            效果图:

  • 相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    2026赚钱平台入口大全
    2026赚钱平台入口大全

    2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

    28

    2026.01.31

    高干文在线阅读网站大全
    高干文在线阅读网站大全

    汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

    7

    2026.01.31

    无需付费的漫画app大全
    无需付费的漫画app大全

    想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

    19

    2026.01.31

    漫画免费在线观看地址大全
    漫画免费在线观看地址大全

    想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

    2

    2026.01.31

    漫画防走失登陆入口大全
    漫画防走失登陆入口大全

    2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

    8

    2026.01.31

    php多线程怎么实现
    php多线程怎么实现

    PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

    1

    2026.01.31

    php如何运行环境
    php如何运行环境

    本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

    0

    2026.01.31

    php环境变量如何设置
    php环境变量如何设置

    本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

    0

    2026.01.31

    php图片如何上传
    php图片如何上传

    本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

    2

    2026.01.31

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.1万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 3.2万人学习

    CSS教程
    CSS教程

    共754课时 | 25.6万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号