在无序列表ul>li中，无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中，前面默认带有数字，如何修改列表前面的项目符号，只需要通过list-style调整就好，常见的符号有（/*内容注释部分*/）list-style-type:circle;/*空心圆*/list-style:none;/*去除标志*/list-style:square;/*方块*/list-style:upper-roman;/*罗马数字*/list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/list-style-type: decimal;/*序号数字展示*/等！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>css如何玩转有序无序列表项list样式</title>

     <style type="text/css">

     ul.box1{

         list-style-type:circle;/*空心圆*/

     }

     .box1 li{

         list-style:none;/*去除标志*/

         background-image: url("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*图文结合，列表前面添加图片*/

         height: 50px;

         background-repeat: no-repeat;

         background-size: 20px;

         /*设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。*/

         padding: 0px 25px 10px;/*调整内边距 上 左右 下*/

     }

     ul.box2{

         list-style:square;/*方块*/

     }

     ul.box3{

         list-style:upper-roman;/*罗马数字*/

     }

     ul.box4{

         list-style:lower-alpha;/*list-style-type:upper-alpha;大写字母*/

     }

     ol.box5{

         list-style: none;

         list-style:upper-alpha;

         color: indianred;

     }

     </style>

 </head>

 <body>

     <!-- 无线列表 -->

     <ul class="box1">

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

     </ul>

     <ul class="box2">

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

     </ul>

     <ul class="box3">

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

     </ul>

     <ul class="box4">

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

     </ul>

     <!-- 无序列表把ul>li换成ol>li有序列表，前面默认带有数字-->

     <ol class="box5">

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

         <li>abc</li>

     </ol>

 </body>

 </html>

css如何玩转有序无序列表项list样式的更多相关文章

  1. CSS中列表项list样式

    CSS列表属性 属性 描述 list-style-属性 用于把所有用于列表的属性设置于一个声明中. list-style-image 将图象设置为列表项标志. list-style-position ...

  2. (2017.9.27) 自定义列表项 list-style 使用心得

    今天给某公司做招聘专页.早上完成设计图,下午开始排版.页面套用了我之前做的某人才局的招聘页面,导航栏.banner 很快就出来了.这次内容里我有些地方用了列表,当然要用 <ul> < ...

  3. CSS：列表样式（设置列表项的标志图案/位置）

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  4. CSS 去除列表项li前面的小圆点

    前言 在默认的情况下,浏览器会在<li>标签前面加上小圆点形成列表项,如下所示使用<ul> 项1 项2 项3 或者使用<ol> 项1 项2 项3 这在有时候确实给我 ...

  5. CSS笔记（七）列表

    CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志. 参考:http://www.w3school.com.cn/css/css_list.asp 实例: <html> ...

  6. SharePoint 2013 自定义翻页显示列表项

    项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等. 效果如下: 技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响 ...

  7. css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版

    1.html: <!DOCTYPE html><html><head lang="en">    <meta charset=" ...

  8. ztree插件的使用及列表项拖拽的实现（jQuery）+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  9. IE问题——列表项图像

    等我们实现列表时,经常会遇到一种情况:需要为列表的每一项的前面添加一个列表项图像. 我们在查阅W3C时会发现,在CSS中已经为我们提供了实现方法——“list-style-type”,我们来看看它的实 ...

随机推荐

  1. [bzoj4011] [洛谷P3244] [HNOI2015] 落忆枫音

    Description 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出 这样一个问题. 「相信吧.不然我们是什么,一团肉吗?要不是有灵魂--我们也 ...

  2. 神器| 这款软件让win系统像Mac系统一样的好用!

    每天进步一丢丢,连接梦与想 输不起的人,往往就是赢不了的人 使用过 Mac OS X 系统的朋友可能都会使用过自带的 Quick Look 快速预览功能,用鼠标选中一个文件后,再按下键盘空格键就会弹出 ...

  3. set(待整理)

    set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...

  4. xhsell关闭jupyter仍然运行的命令

    nohup jupyter notebook & nohup 和 &都是linux的命令 1.& 当在前台运行某个作业时,终端被该作业占据:可以在命令后面加上& 实现后 ...

  5. SpringMVC进阶(二)

    一.高级参数绑定 1.1. 绑定数组 Controller方法中可以用String[]接收,或者pojo的String[]属性接收.两种方式任选其一即可. /** * 包装类型 绑定数组类型,可以使用 ...

  6. 从App.config中读取数据库连接字符串

    1.首先在App.config文件中添加如下代码注意<connectionStrings>插入位置. <connectionStrings> <add name=&quo ...

  7. 关于Windows Server 服务器 安装tomcat部署Java Web 项母

    抄至 http://blog.csdn.net/cx0330/article/details/68957914 我遇到的问题是:不知道怎么配置,感觉在服务器上部署一个web项目,应该是很高大上,步骤应 ...

  8. 含源码解析，深入Java 线程池原理

    从池化技术到底层实现,一篇文章带你贯通线程池技术. 1.池化技术简介 在系统开发过程中,我们经常会用到池化技术来减少系统消耗,提升系统性能. 在编程领域,比较典型的池化技术有: 线程池.连接池.内存池 ...

  9. 技术派-常用的一些VS相关的宏名

    用户宏 ConfigurationName 配置名字,通常是Debug或者Release IntDir 编译器使用的中间目录,产出obj文件 OutDir 链接器使用的输出目录 ProjectDir ...

  10. 本地开发环境伪装成SSL连接的实现

    本地ssl开发测试实现1,在外网服务器上使用测试域名和t.test.cn,用let's encrypt申请 证书并正常运行2,修改本地服务器host文件,将t.kennylee.vip指向127.0. ...