在无序列表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. 手把手写一个基于Spring Boot框架下的参数校验组件（JSR-303）

    前言 之前参与的新开放平台研发的过程中,由于不同的接口需要对不同的入参进行校验,这就涉及到通用参数的校验封装,如果不进行封装,那么写出来的校验代码将会风格不统一.校验工具类不一致.维护风险高等其它因素 ...

  2. .net core之编辑json配置文件

    .net core之编辑json配置文件 引言 最近在具体项目开发应用中,项目采用的json格式配置文件,配置文件的加载采用的IConfiguration接口对象进行的管理,这是.net standa ...

  3. 解决docker容器无网络、无法连接互联网----长期更新

    众所周知,docker有三种默认的网络模式,分别是: bridge host none 然后需要注意的就是内核转发这个,一定不要忘了!配置方法如下 echo -e "net.ipv4.ip_ ...

  4. 实验12: OSPF

    实验9-1:单区域点到点链路的OSPF 实验目的通过本实验可以掌握:(1)在路由器上启动OSPF 路由进程(2)启用参与路由协议的接口,并且通告网络及所在的区域(3)度量值cost 的计算(4)点到点 ...

  5. 代理IP批量验证程序

    #include <afxinet.h> #include <afxwin.h> #include <iostream> #include <fstream& ...

  6. ncbi-blast 本地安装

    详见:http://blog.shenwei.me/local-blast-installation/ Linux系统中NCBI BLAST+本地化教程 本文面向初学者(最好还是懂得基本的linux使 ...

  7. CCF_ 201409-2_画图

    将一个数组比作画板,有颜色的位置标1,统计即可. #include<cstdio> #include<iostream> #define NUM 100 using names ...

  8. Codeforces_711_B

    http://codeforces.com/problemset/problem/711/B 比较简单,过程有点繁琐,先找一行包含那个0的行,得到和,以此填出0位置的值,然后判断这个矩阵是否符合条件. ...

  9. eclipse 连接sql sever

    https://www.cnblogs.com/newen/p/4428541.html 和eclipse连接mysql相似,只是 String url="jdbc:sqlserver:// ...

  10. 脚本、脚本语言、shell脚本

    脚本是批处理文件的延伸,是一种纯文本保存的程序,一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合,在其中可以实现一定的逻辑分支等.脚本程序相对一般程序开发来说比较接近自然语言,可 ...