在无序列表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. 《ASP.NET Core 高性能系列》关于性能的闲聊

    一.通常的性能问题类型 让我们一起看看那些公共的性能问题,看看他们是或者不是.我们将了解到为什么我们常常在开发期间会错过这些问题.我们也会看看当我们考虑性能时语言的选择.延迟.带宽.计算等因素. 二. ...

  2. 美食家App开发日记1

    前期一直在看第一行代码Android,这本书感觉讲基础讲得特别细致. 百看不如一试. 因为刚刚接触Android,没办法做到想写什么功能就直接一下写好,只能从最开始基础的控件使用开始练习. 所以一直在 ...

  3. C++ lambda 分析

    lambda 表达式分析 构造闭包:能够捕获作用域中变量的匿名函数的对象,Lambda 表达式是纯右值表达式,其类型是独有的无名非联合非聚合类类型,被称为闭包类型(closure type),所以在声 ...

  4. django cms 5月第一弹

    官方文档: ##http://django-cms.readthedocs.io/en/latest/index.html #截图 #生存的项目结构

  5. Linux网络文件共享服务之NFS

    一.NFS服务简介 NFS全称network file system 网络文件系统,基于内核的文件系统,有sun公司开发,通过使用NFS,用户和程序可以像访问本地文件一样访问远端系统上的文件,它基于r ...

  6. pythonenv的安装及迁移

    一.安装 运行 pip install virtualenv 即可安装virtualenv,想用 最新开发版 就运行 二. virtualenv基本使用 $ python virtualenv.py ...

  7. C# 定时器导致的内存泄露问题

    C# 中有三种定时器,System.Windows.Forms 中的定时器和 System.Timers.Timer 的工作方式是完全一样的,所以,这里我们仅讨论 System.Timers.Time ...

  8. 如何把您现有的流程系统数据迁徙到驰骋BPM上？

    关键词:流程系统版本切换\ 驰骋BPM. 如何把您现有的流程系统数据迁徙到驰骋BPM上?这是一个大问题.在处理改问题之前,首先要了解驰骋bpm的数据库结构,驰骋bpm的特性在做计划. 驰骋BPM的流程 ...

  9. C#中? 和 ??的区别

    背景 最近在调试C#项目的时候,发现一个比较关于??的特殊用法,当时把我给惊到了,所以特意用这篇短短的笔记来记录一下我的解惑过程: 示例代码: showsomething(isNameNull ?? ...

  10. Codeforces_734_E

    http://codeforces.com/problemset/problem/734/E 每次操作可以把连通的同颜色的点全部换颜色,缩点,找直径,第一遍dfs找起点,第二遍dfs求直径. #inc ...