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. springmvc springJDBC 简单实训银行账户管理系统

    springmvc springJDBC 简单实训银行账户管理系统 1.简单介绍一下,在校时每周结束都会有一次学习总结,简称“实训”,这次实训内容是spring,因为是最近热门框架,我就先从基础方面开 ...

  2. c#浏览器 遇到的一些问题

    禁用弹窗是需要引用一个新的dll,引用方式http://www.itjsxx.com/csharp/IHTMLDocument2_namespace.html, 禁用新的弹窗的方式http://blo ...

  3. preg_replace正则表达式的使用

    <?php $str="as2223adfsf0s4df0sdfsdf"; echo preg_replace("/0/","",$s ...

  4. Linux学习笔记02—磁盘分区

    下面介绍四种最常见的分区方式: (1)    最简单的分区方案. SWAP分区:即交换分区,建议大小是物理内存的1-2倍. /分区:建议大小在6GB以上. 使用以上的分区方案,所有的数据都在/分区上, ...

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

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

  6. Windows访问Linux的Ext4格式分区

    Ext2Fsd是Windows下一套很实用的Driver,虽然名称是ext2fsd但ext3/ext4都可读取,安装完成后电脑便可直接认得ext格式扇区 虽然官方介绍只能支持到Windows 8,但实 ...

  7. CENTOS下搭建SVN服务器(转)

    1.安装svn yum install -y subversion 2.验证安装是否成功 svnserve --version 3.创建svn版本库 mkdir svn svnadmin create ...

  8. 关于MongoDB时区问题

    由于MongoDb存储时间按照UTC时间存储的,其官方驱动MongoDB.driver存储时间的时候将本地时间转换为了utc时间,但它有个蛋疼的bug,读取的时候非常蛋疼的是返回的是utc使时间.一个 ...

  9. STM32F2x Is it possible to request multiple DMA streams with single request

    I want to setup an application, where a single trigger-factor (compare-match of a timer) shall reque ...

  10. Win10正式版开机慢怎么办 开机黑屏时间长怎么办

    升级Win10正式版后开机速度慢.黑屏时间长怎么解决呢?其实我重要是由Win10正式版所提供的“快速启动”功能与电脑显卡驱动.电源管理驱动不兼容所造成的.下面就与大家分享一下针对Win10正式版开机速 ...