在无序列表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. 在eclipse中用java调用python报错 Exception in thread "main" ImportError: Cannot import site module and its dependencies

    最近做项目需要用java调用python,配置了jython后,运行了例子代码: 获得一个元组里面的元素: import org.python.util.PythonInterpreter; publ ...

  2. OpenCV2.4.13+Qt5.6.2配置方法

    [1.环境变量] D:\Soft\OpenCV2\MinGW_build\bin; C:\Qt\Qt5.6.2\Tools\mingw492_32\bin; D:\Soft\Programming\C ...

  3. Python中的 if __name__ == '__main__' 是什么意思？

    最近在看Python代码的时候,因为是Python初学者,看到这个if __name__ == '__main__' 的判断,并且下面还有代码语句,看了其他地方的说明,还是没搞明白是什么意思, 在看到 ...

  4. Centos 7中安装svn服务器，史上最详细

    最近上头安排了帮客户安装svn服务器,用了两种方式安装,yum命令安装,快速简洁容易上手,但是源码安装就比较繁琐,两种方式都试了一下,yum命令基本一个多小时就安装完了,但是源码安装弄了我两天的时间, ...

  5. Linux中inode详解

    转自:https://www.cnblogs.com/itech/archive/2012/05/15/2502284.html 一.inode是什么? 理解inode,要从文件储存说起. 文件储存在 ...

  6. HDU-6185-Covering（推递推式+矩阵快速幂）

    Covering Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  7. Selenium(一)：元素定位

    一.Selenium 8种定位方式 baidu.html <form id="form" name="f" action="/s" c ...

  8. 微信小程序没有找到可以构建的npm包

    如果是云开发小程序 ,cmd窗口进入到小程序根目录下的miniprogram目录, 输入npm init 输入包的相关属性,随便输入即可. 完成后会出现一个package.json文件. 如果是其他类 ...

  9. TS 原理详细解读(5)语法2-语法解析

    在上一节介绍了语法树的结构,本节则介绍如何解析标记组成语法树. 对应的源码位于 src/compiler/parser.ts. 入口函数 要解析一份源码,输入当然是源码内容(字符串),同时还提供路径( ...

  10. Java：线程的六种状态及转化

    目录 Java:线程的六种状态及转化 一.新建状态(NEW) 二.运行状态(RUNNABLE) 就绪状态(READY) 运行状态(RUNNING) 三.阻塞状态(BLOCKED) 四.等待状态(WAI ...