关于CSS中list-style修改列表属性控制li标签样式的问题

这篇文章主要介绍了关于csslist-style修改列表属性控制li标签样式的问题,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

list_style属性用于修改列表的属性,list-style-type用于设置列表项类型,list-style-position用于设这列表项位置,list-style-image用于设置使用图像替换列表项标记

list_style属性用于修改列表的属性 

格式如下:
list_style:列表项标记类型 列表项标记的位置 列表项标记;
也可以单独设置列表项标记:
list-style-type用于设置列表项类型:
默认值为disc为实心圆,
常用值:none空
circle空心圆
square实心方块
decimal数字
lower-latin小写拉丁字母a,b,c…..
upper-latin大写字母A,B,C….
list-style-position用于设这列表项位置:
默认值outside表示在li标签外部,这是对li添加边框border:1px solid red;可以看到标记的位置。
inside表示标记在li标签里面,同样添加边框时可以清晰地看到。
list-style-image用于设置使用图像替换列表项标记:
默认值:none
可选值:URL ,格式为url(“url地址”);
举例:

    无标题文档  ul { border:1px solid red; } li{ border:1px solid red; list-style:disc outside url(news_list.gif); list-style-position:5px; }   
  • 你好
  • 我好

规定一个 “list-style-type” 属性以防图像不可用。

立即学习“前端免费学习笔记(深入)”;

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

Html的a标签中href和onclick用法区别以及优先级别

如何利用CSS3的线性渐变linear-gradient制作边框

以上就是关于CSS中list-style修改列表属性控制li标签样式的问题的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1609960.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 01:08:18
下一篇 2025年12月24日 01:08:30

相关推荐

  • padding制作图片自适应布局(CSS百分比)

    css知识点:当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的! 一、CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相…

    2025年12月24日
    000
  • 如何使用源生css3实现圆环加载进度条

    这次给大家带来如何使用源生css3实现圆环加载进度条,使用源生css3实现圆环加载进度条的注意事项有哪些,下面就是实战案例,一起来看一下。 效果图: 当时的要求是让进度条以扇形渐变的效果加载。我想了半天,好像只有用border-img来做渐变图了,还有一个超笨的方法就是写50个长方形分布在进度条上。…

    2025年12月24日
    000
  • CSS 文本字体颜色设置方法(CSS color)

    这篇文章主要介绍了css 文本字体颜色设置方法(css color),需要的朋友可以参考下 一、认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。 1、常用颜色地方包含:字体颜色、超链接颜色、网页背景颜色、边框颜色2、颜色规范与颜色规定:网页使用RGB模…

    2025年12月24日
    000
  • 用纯CSS实现禁止鼠标点击事件示例代码

    这篇文章介绍的是通过纯css实现禁止鼠标点击事件,比起javascript来更加灵活,有需要的可以参考学习。 JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。 复制代码 代码如下: event.preventDefaul…

    好文分享 2025年12月24日
    000
  • CSS实现带倒三角标记的WEB标准菜单效果代码

    这篇文章主要为大家介绍了css实现带倒三角标记的web标准菜单效果代码,通过纯css实现鼠标滑过呈现倒三角标记的显示效果,非常简单实用,需要的朋友可以参考下 本文实例讲述了CSS实现带倒三角标记的WEB标准菜单效果代码。分享给大家供大家参考。具体如下: 这里演示css实现的带倒三角标记的WEB标准菜…

    好文分享 2025年12月24日
    000
  • CSS实现带有小图片的LI图标列表菜单

    这篇文章主要为大家介绍了css实现带有小图片的li图标列表菜单,可实现css图标的正常显示及滑过、点击呈现不同颜色的功能,涉及css针对visited、hover及active等使用技巧,需要的朋友可以参考下 本文实例讲述了CSS实现带有小图片的LI图标列表菜单。分享给大家供大家参考。具体如下: 这…

    2025年12月24日
    000
  • CSS实现页面九宫格布局的简单示范

    九宫格布局在制作一些web app时还是经常可以用到的,这里我们以一个大概的结构示例来作css实现页面九宫格布局的简单示范,不过需要注意ie6下的兼容性问题. 一、效果图: 三、布局二(各浏览器兼容性良好) 立即学习“前端免费学习笔记(深入)”; CSS Code复制内容到剪贴板 九宫格布局 bod…

    2025年12月24日
    000
  • css实现图片切换效果

    本篇文章主要介绍css实现图片切换效果非常不错,不用css,代码比较精简,推荐使用,注意一下多浏览器的兼容性。 代码如下: 纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:…

    好文分享 2025年12月24日
    000
  • 如何使用css固定位置

    本篇文章主要介绍如何使用css固定位置,非常不错,可以方便提示用户等信息,有感兴趣的小伙伴了解一下。 代码如下: 层固定位置练习–by 阿会楠 html,body{ overflow:hidden; padding:0; margin:0; width:100%; height:100%; } #…

    2025年12月24日
    000
  • css中font的缩写

    本篇文章将详细介绍css中font的缩写,有感兴趣的小伙伴参考一下。 实例代码如下: .login_top{height:26px;font:bold 14px/26px “宋体”; border:1px solid #000} .login_top2{height:26px; line-heigh…

    好文分享 2025年12月24日
    000
  • css中Sprites的应用

    本篇文章主要介绍css中sprites的应用,这是一个很简单的应用,不过在设计中,这样做可以减轻服务器的压力,是请求次数减少,是一个不错的方法。 实例代码如下: body { font-family: “Lucida Sans”, “Lucida Sans Unicode”; font-size: …

    好文分享 2025年12月24日
    000
  • 用CSS实现的一张图完成的按钮实例

    本篇文章主要介绍如何用css实现的一张图完成的按钮实例,很好用很奥妙,值得收藏和分享 通过css来读取图片坐标系实现局部背景图,感兴趣的小伙伴参考一下。 网易126登录按钮代码如下: .inp_L1,.inp_L2,{background:url(/upload/20080515201218970.…

    好文分享 2025年12月24日
    000
  • css动画教程

    本篇文章主要向大家介绍如何使用css制作简单的动画,感兴趣的小伙伴参考下. 案例一: 创想鸟 div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox …

    好文分享 2025年12月24日
    000
  • css登录界面美化

    本篇文章主要介绍如何用css美化网站登录界面,需要的小伙伴参考下。 代码如下: 美化登录 *{margin:0;padding:0;}/*去掉页面样式*/ body{color:white;} .content{ background-color:pink; position:absolute;/*…

    好文分享 2025年12月24日
    000
  • css如何实现鼠标滑过缩略图时放大图片

    本篇文章主要介绍css如何实现鼠标滑过缩略图时放大图片,日常购物网站中非常方便实用,有兴趣的小伙伴参考下。 代码如下: www.php.cn 创想鸟 鼠标滑过缩略图时放大图片 本例旨在展示鼠标滑到缩略图上时,放大图片。 @@##@@ 相关推荐: 如何使用HTML+CSS做出鼠标划过就可以显示二级菜单…

    好文分享 2025年12月24日
    000
  • css实现鼠标触发效果

    本片文章主要介绍使用css实现鼠标触发效果,感兴趣的朋友参考下。 代码如下: css打造鼠标触发效果 <!– startList = function() { if (document.all&&document.getElementById) { navRoot = doc…

    好文分享 2025年12月24日
    000
  • 详细介绍有关CSS页面布局技巧

    下面是我给大家整理的详细介绍有关CSS页面布局技巧,有兴趣的同学可以去看看。 设置文本样式 1、字体类型 绝大多数用户系统默认支持的中文字体有宋体、黑体、幼圆、楷体;默认支持的英文字体有arial、arial black、arial narrow、 century gothic 、comic san…

    好文分享 2025年12月24日
    000
  • 简单易懂,DIV+CSS架构网站的7种版面布局形式,一语道破

    下面是我给大家整理的div+css架构网站的7种版面布局形式,有兴趣的同学可以去看看。 1.“T”结构布局形式。所谓“T”结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,整体效果类似英文字母“T”,所以称之为“T,形布局。这是网页设计中用得最广泛的一种布局方式。这种…

    好文分享 2025年12月24日
    000
  • 详细为你讲解,DIV+CSS布局和TABLE布局的优缺点(经典)

    table布局是web早期css不存在的时候兴起的,是对table标签的不正规使用,table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。现在绝大多数的网站都是用div+css布局。这两种布局各有各的优点。 一、div+css布局的好处: 1.符合W3C标准,代…

    好文分享 2025年12月24日
    000
  • css属性相对定位,绝对定位,固定定位

    这篇文章主要介绍了关于css属性相对定位,绝对定位,固定定位,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 定位 1. 相对定位(position:relative) 即相对于自己原先的位置定位,当盒子移动之后,原先的位置依然在存在2. 绝对定位(position:absolute)…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信