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. spring-boot集成Springfox-Swagger2

    import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Co ...

  2. .NET工作准备--01前言

    01应聘须知(已过时) -1.了解软件开发大环境.-2.准备简历:不宜超过一页,永远准备中文,模板. -3.渠道:3大网站,中华英才,前程无忧(51job最给力),智联招聘.现在还有猎聘网和100程序 ...

  3. StringBuffer StringBuilder append

    StringBuilder is not thread safe. So, it performs better in situations where thread safety is not re ...

  4. RelativeLayout 高度宽度

    RelativeLayout ss = (RelativeLayout) findViewById(R.id.myRelativeLayout); ss.setLayoutParams(new Rel ...

  5. 网络与多线程---OC中多线程方法GCD(二)

    小编在前一篇中介绍了多线程实现的五种常用方法.在接下来所介绍的这种方法是最具有魅力的,最具有诱惑的实现多线程的方案---GCD 一.什么是GCD GCD是Grand Central Dispatch的 ...

  6. 马士兵hadoop第三课：java开发hdfs

    马士兵hadoop第一课:虚拟机搭建和安装hadoop及启动 马士兵hadoop第二课:hdfs集群集中管理和hadoop文件操作 马士兵hadoop第三课:java开发hdfs 马士兵hadoop第 ...

  7. Android的学习之路（三）项目的启动过程和安装过程具体解释

    应用的安装和启动过程: 安装:第一步:java的编译器会把这个.java文件编译成.class文件           第二部:Android的SDK提供了一个dx工具,这个工具把.class文件转义 ...

  8. Visual Studio 2012使用NUnit单元测试实践01，安装NUnit并使用

    在Visual Studio 2012中,默认使用Microsoft自带的MS-Test测试框架.但,Visual Studio同样允许使用第三方测试框架,比如NUnit,xUnit,MbUnit,等 ...

  9. mqtt介绍

    MQTT是轻量级基于代理的发布/订阅的消息传输协议,它可以通过很少的代码和带宽和远程设备连接.例如通过卫星和代理连接,通过拨号和医疗保健提供者连接,以及在一些自动化或小型设备上,而且由于小巧,省电,协 ...

  10. 解决xib布局方式支持ios6，ios7

    xcode5 中的界面布局 根据sdk 分成ios7.0 and Later 和 ios6.1 and Earlier 两种,那如何xib同时支持 ios6 和ios7 的界面呢 方法如下: 在xco ...