在无序列表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. Python3基础之内置模块

    模块和包 一.定义: 模块:用来从逻辑上组织Python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的Python文件包:用来从逻辑上组织模块,本质就是一个目录(必须带有一个__in ...

  2. Git详解之文件状态

    前言 其实文件状态根据不同场景有不同的描述,例如:已跟踪.未跟踪.已暂存.已修改.未修改等等,乱七八糟的,今天个人根据自己的使用经验对其进行分类,如有不同建议或者更好的想法也可以留言评论,万分感谢! ...

  3. informatica9.5.1后最一步出错(ICMD_10033,INFACMD_10053)

    错误信息: OutPut : [ICMD_10033] Command [ping] failed with error [[INFACMD_10053] [Domain [Domain_rotkan ...

  4. Ecplise中指定tomcat里Web项目发布文件

    有时候发布项目时,我们会看到Ecplise会自动把一些并不是我们想需要的文件也发布到服务器上,可以通过以下方式解决: Properties->Deployment Assembly

  5. JVM基础快速入门篇

    Java是一门可以跨平台的语言,但是Java本身是不可以实现跨平台的,需要JVM实现跨平台.javac编译好后的class文件,在Windows.Linux.Mac等系统上,只要该系统安装对应的Jav ...

  6. c和c++中读取数据的方式总结

    目录 c 输出 printf() 输入 scanf getchar(), putchar() gets(), puts() c++ 输入 cin() getline() get() 输出 cout 最 ...

  7. 办公环境下k8s网络互通方案

    在 kubernetes 的网络模型中,基于官方默认的 CNI 网络插件 Flannel,这种 Overlay Network(覆盖网络)可以轻松的实现 pod 间网络的互通.当我们把基于 sprin ...

  8. 五大常见算法策略之——动态规划策略（Dynamic Programming）

    Dynamic Programming   Dynamic Programming是五大常用算法策略之一,简称DP,译作中文是"动态规划",可就是这个听起来高大上的翻译坑苦了无数人 ...

  9. leetcode水题题解

    344. Reverse String Write a function that takes a string as input and returns the string reversed. E ...

  10. vb.net datagridview 使用方法

    目录:  1. 取得或者修改当前单元格的内容  2. 设定单元格只读  3. 不显示最下面的新行  4. 判断新增行  5. 行的用户删除操作的自定义  6. 行.列的隐藏和删除  7. 禁止列或者行 ...