html中偶尔会使用到列表，记录一下。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8" />

         <style type="text/css">

             .level_1{list-style-type:decimal;}

             .level_2{list-style-type:upper-alpha;}

         </style>

     </head>

     <body>

         <span>列表使用test:</span>

         <ul class = "level_1">

             <li>

                 亚洲

                 <ul class = "level_2">

                     <li>中国</li>

                     <li>日本</li>

                 </ul>

             </li>

             <li>

                 欧洲

                 <ul class = "level_2">

                     <li>德国</li>

                     <li>意大利</li>

                 </ul>

             </li>

         </ul>

     </body>

 </html>

1. 序号可以是数字、字母、罗马数字等，可以通过list-style-type 属性设置。

默认值: disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数

| lower-roman 小写罗马文字| upper-roman 大写罗马文字|  armenian亚美尼亚数字 | georgian乔治亚数字

| lower-alpha小写拉丁文 | upper-alpha大写拉丁文 | none无

| inherit继承

初始值: disc

2. 序号也可以显示图片，可以通过list-style-image 属性设置

 list-style-image:none/url("1.png")

Html 列表 li ul使用的更多相关文章

  1. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  2. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  3. li ul 说明

    复制代码代码如下: <div id="menu">  <ul>  <li><a href="#">首页</ ...

  4. 关于css中列表（ul ol）存在默认间距的问题

    一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...

  5. 无序列表li横向排列

    一.横向两列方式排列: 在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中 ...

  6. CSS实现列表li边框重合问题

    CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:  可以看到每个格子的右边框和 ...

  7. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...

  8. Html中列表标签<ul>的使用

    借助Html中的列标标签<ul>在某列文字前面添加标注 <html> <head> <title>文字上方添加标记说明</title> &l ...

  9. 横排列表(li)的左右对齐

    效果如下: HTML代码如下: <div class="overdiv"> <ul> <li>1</li> <li>2& ...

随机推荐

  1. JAVA 画图板实现（基本画图功能+界面UI）一、界面实现

    /*文章中用到的代码只是一部分,需要源码的可通过邮箱联系我 1978702969@qq.com*/ 这段时间在学JAVA的swing界面开发,试着做了个画图板.实现了直线.曲线.喷枪.矩形.圆形.文字 ...

  2. 【Ray Tracing in One Weekend 超详解】 光线追踪1-9 景深

    今天我们来学最后一章 Chapter11:Defocus Blur Preface 散焦模糊 也称 景深 首先,我们来了解一下散焦模糊,我们在真实相机中散焦模糊的原因是因为它们需要一个大圈(而不仅仅是 ...

  3. Qt Quick自定义样式一套

    弄了几个月的Qt,基本上以写上位机程序和工厂用的一些工具为主.老大的要求是快速.稳定.不出问题,不过他嫌.net要安装.还有升级(刚开始的时候由于这个出了些小问题),MFC开发东西又实在费劲,就让我找 ...

  4. 工具使用-----Jmeter的基础用法

    //摘抄至http://www.cnblogs.com/TankXiao/p/4045439.html 以下是我自己录制的关于这篇文章的视频,有兴趣的可以下载哦 https://yunpan.cn/c ...

  5. [转]eclipse转idea, 快捷键设置

    原文地址: eclipse转idea, 快捷键设置   设置快捷键的途径: 打开idea的配置,找到Keymap,设置为eclipse 另外还要手动设置某些快捷键 上下移动 点击类打开 代码提示 查询 ...

  6. inline关键字的作用

    一.在C&C++中,inline关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义. 如下面一宏定义表达式: #define express(v1,v2) (v1 ...

  7. 基于Servlet+JSP+JavaBean开发模式的用户登录注册

    http://www.cnblogs.com/xdp-gacl/p/3902537.html 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...

  8. 使用 IntraWeb (18) - 基本控件之 TIWImage、TIWImageFile、TIWImageList

    TIWImage //用于显示资源中的图片, 设计时通过 Picture 载入图片到资源 TIWImageFile //用于显示给定路径或地址的图片 TIWImageList //它继承于 TImag ...

  9. RabbitMQ消息交换模式简介

    RabbitMQ是AMQP的一个典型实现,它消息发布者的消息发布到Exchange上,同时需要制定routingkey,可以通过指定交换机的不同模式实现不同的行为. RabbitMQ提供了四种Exch ...

  10. C#后台调用LPT1端口实现小票机打印方法。

    public class POSPrinter { const int OPEN_EXISTING = 3; string prnPort = "LPT1"; [DllImport ...