CSS 列表模型之marker标记的使用_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

名称:marker-offset分类:列表简述:设置marker类容器的水平间距概述:marker-offset是设置marker类容器的水平间距的样式(Style)。marker-offset详细说明语法:marker-offset:auto|length取值:auto:?默认值。浏览器自动设置间距length:?由浮点数字和单位标识符组成的长度值。可为负值。说明:此样式尚未被广泛支持marker:标识,标志www.zgxue.com防采集请勿采集本网。

本文主要对::master伪元素、list-item下的list-style-imagelist-style-type样式属性进行介绍,并介绍了在实际中如何使用。list-item下还有其他不常用的样式属性这里不做介绍。感兴趣的可以自行移步CSS 标准文档

先仿真运动一下,再点一下仿真那个按钮退出,再点review下的create trace spline,左击那个marker点选中,然后空白地方右击就出来了

::marker 是什么

设置列表项目相关内容list-style-imageCSS1IE4+,NS6+有设置或检索作为对象的列表项标记的图像list-style-positionCSS1IE4+,NS6+有设置或检索作为对象的列表项标记如何根据文本排列list-style-typeCSS1/CSS

::marker是一个标记伪元素,能够定义内容填充在list-item上代表列表项的标志,先附上一个例子,就能很清楚地看出它的作用。

list-item:CSS1 将块对象指定为列表项目。并可以添加可选项目标志 run-in:CSS2 分配对象为块对象或基于内容之上的内联对象 table:CSS2 将对象作为块元素级的表格显示 table-caption:CSS2 将对象作为表格

<style>li::marker { content: "(" counter(list-item) ")"; }li { display: list-item; }</style><ul> <li>zhaodao88.com 找商机</li> <li>zhaodao88.com 找人脉</li> <li>zhaodao88.com 找采购</li></ul>

(紧凑)marker;(标记)table;inline-table;table-raw-group;table-header-group;table-footer-group;table-raw;table-column-group;table-column;table-cell;table-caption;(表格标题)/*display 属性的了解

效果图:

在这里,marker为元素定义的是每一项列表项前面的标记符,在伪元素内的content的内容就是要在列表项前面所填充的内容。

使用::marker填充标记内容

需要注意的是,普通元素要想使用marker,必须将元素定义成display: list-itemlist-items在创建的时候会自动生成markercounter

标记的样式可以使用list-style-typelist-style-image属性或者直接使用::marker伪元素进行样式编写。下面展示一个例子。

::marker伪元素对标记进行控制,伪元素内content的内容就是标记符的内容

<style> p { margin-left: 12 em; } p.note { display: list-item; counter-increment: note-counter; } p.note::marker { content: "Note " counter(note-counter) ":"; color: blue; font-weight: bold; }</style><p>zhaodao88.com 找商机</p><p class="note">zhaodao88.com 找采购</p><p>zhaodao88.com 找人脉</p>

效果如图:

当然也可以为标记设置字体样式、颜色等属性,类似上面效果li::marker { color: blue; font-weight:bold; }

值得注意的是:目前只有以下属性能够作用于marker伪元素上 所有的字体样式:font相关 white-space属性 color属性 text-combine-upright, unicode-bidi, direction属性 content属性 所有的animation和transition属性

issue提出,在标记使用white-space: pre可能不会有很好的效果,可以尝试text-space-collapse: preserve-spacestext-space-trim: discard-after一起使用,更能达到想要的效果,感兴趣的请移步 issue 4448issue 4891

使用list-style-image图像填充标记内容

指定标记图像,当列表项内容正常时,用指定图像填充列表项的标记。

list-style-image 正常取值 <image> | none,未定义情况下是 none,作用在列表项list-items下。其中<image>用于指定标记图像的url参考链接移步

下面是使用例子,将会为<li>标签的标记块填充上指定链接的ellipse.png图像

li { list-style-image: url("http://www.example.com/ellipse.png") }

使用list-style-type文本类型填充标记内容

指定标记字符串,当列表项内容正常时,用指定字符串填充列表项的标记。

list-style-type 正常取值 <counter-style> | <string> | none,未定义情况下是 disc(圆形标记符),作用在列表项list-items下。参考链接移步

<counter-style>是CSS 定义的计数器样式,允许开发者自定义counter的样式。比如:

@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " ";}ul { list-style-type: thumbs;}

具体<counter-style>定义规则参考

下面是关于list-style-type的使用例子(如果作用元素不是列表元素,则元素的display必须设置为list-item)

ul { list-style-type: "★"; } // 使用"★"作为标记符p.note { // 如果作用元素不是列表元素,则元素的display必须设置为list-item display: list-item; list-style-type: "Note: "; list-style-position: inside;}ol { list-style-type: upper-roman; } // 定义为罗马数字的大写形式ul { list-style-type: symbols(cyclic '○' '●'); } // 标记符在'○'和'●'之间切换ul { list-style-type: none; } // 不显示标记

注意

::marker伪元素标记不是所有浏览器都支持,包括chrome也只是在80以上版本通过启用experimental Web Platform才支持,如果你想要测试效果,请前往chrome://flags启用experimental Web Platform。并不推荐在实际项目去使用这条规则,更推荐使用常规的做法去设置标记块样式。

总结

列表在前端项目中很常见,应用场景也十分广泛。个人觉得,::marker伪元素是对list-style-imagelist-style-text的补充,三者都是定义标记块的填充内容,image注重图像,text注重字符串,::marker则可以定fontcolor等样式,各具特色。

参考

https://www.w3.org/TR/2020/WD-css-lists-3-20200709

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

到此这篇关于CSS 列表模型之marker标记的使用的文章就介绍到这了,更多相关CSS marker标记内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

var myIcon=new BMap.Icon("http://api.map.baidu.com/img/markers.png",new BMap.Size(23,25),{offset:new BMap.Size(10,25),imageOffset:new BMap.Size(0,0-index*25)});var marker=new BMap.Marker(point,{icon:myIcon});map.addOverlay(marker)这是引用百度自己的标注,看明白了没有,这个小标注的字不是加上去的,而本身就是一张图,连在一块的。想自定样式的话可以自己制作并切图,这样考验你的CSS了,总之很烦的。个人觉得直接引用百度的就可以了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css 有序或者无序列表的前面的标记 list-style-type 属性的实现
  • css渐变色彩 省略标记 嵌入字体 文本阴影全面了解
  • css实现带倒三角标记的web标准菜单效果代码
  • css 滤镜效果主要对html标记设置滤镜效果
  • css实现限制字数功能当对象内文本溢出时显示省略标记
  • css样式显示省略号自定义宽度超过隐藏显示省略标记
  • css网页设计 把html标记分类
  • css 语义化标记抛弃div标记
  • 浅谈html和body标记应用css
  • css制作网页的类以及ids的命名
  • 求大神指点,如何调用百度地图的marker的CSS结构呀,或者如何手动的旋转marker
  • 请问marker-offset,marker在CSS中是什么意思和用法?
  • css里面“display=block”是什么意思?是换行吗?
  • 哪里有卖死亡空间里神印,也就是月华(Black Marker)的实物模型!
  • adams中,仿真样机模型时,一个marker点的运动轨迹线是如何出来的
  • css表单列表框
  • js中的display
  • CSS语言大全
  • html,css怎么做一个可以区域划分的地图?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程css列表模型marker标记css 有序或者无序列表的前面的标记 list-style-type 属性的实现css渐变色彩 省略标记 嵌入字体 文本阴影全面了解css实现带倒三角标记的web标准菜单效果代码css 滤镜效果主要对html标记设置滤镜效果css实现限制字数功能当对象内文本溢出时显示省略标记css样式显示省略号自定义宽度超过隐藏显示省略标记css网页设计 把html标记分类css 语义化标记抛弃div标记浅谈html和body标记应用csscss制作网页的类以及ids的命名css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 列表模型之marker标记的使用让css flex布局最后一行列表左对齐的n种方法(小结)解决移动端1px边框最好的方法(推荐)css中的四种定位区别详解深入理解css background-blend-mode的作用机制css字体、文本、列表属性详细介绍css 控制动画播放与暂停的小技巧(非常实用)css 伪类修改input选中样式的示例代码使用css写带纹理渐变背景图的示例代码纯css实现div高度根据自适应宽度(百分比)调整
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved