Html ul、li Css标签详解 使用图片自定义样式 隐藏小点样式齐全

您所在的位置:网站首页 css中的li Html ul、li Css标签详解 使用图片自定义样式 隐藏小点样式齐全

Html ul、li Css标签详解 使用图片自定义样式 隐藏小点样式齐全

2024-05-22 02:59| 来源: 网络整理| 查看: 265

前排丢一下本文大部分内容生成用的代码,使用array数组然后For循环下。有点文章生成器的 zuanmang.net意思哈哈。贴出来供大家参考

PHP

代码语言:javascript复制 body{ width: 1200px; margin: 0 auto; margin-top: 100px; } p{ border: 2px solid cadetblue ; padding: 10px 15px; margin-bottom: 60px; } h3{ color: darkblue; } .zmki_ul_li_01{ list-style-image:url(https://60yu.w4i.cn/2020/20200811-6d086a783ed8c.png); }

语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

11111111111

关于li标签的用法我在使用过程中也是经常需要临时去查询,为了以后可以更快找到。还是自己总结一下,方便日后查看。

本文涵盖了所有CSS自带的li标签样式效果,以及一个图片形式。(使用图片Url)

引用自定义图片、

语法:

list-style-image : none | url (url)eg. li {list-style-image : url (image/aa.gif);}演示代码语言:javascript复制 11111111111 11111111111引用系统图案

语法:

list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

参数:

disc: 实心圆circle: 空心圆square: 实心方块decimal: 阿拉伯数字lower-roman: 小写罗马数字upper-roman: 大写罗马数字lower-alpha: 小写英文字母upper-alpha: 大写英文字母none: 不使用项目符号armenian: 传统的亚美尼亚数字cjk-ideographic: 浅白的表意数字georgian: 传统的乔治数字lower-greek: 基本的希腊小写字母hebrew: 传统的希伯莱数字hiragana: 日文平假名字符hiragana-iroha: 日文平假名序号katakana: 日文片假名字符katakana-iroha: 日文片假名序号lower-latin: 小写拉丁字母upper-latin: 大写拉丁字母

系统图案演示大全

.post-content ul, .post-content ul li {list-style: inherit;}

list-style-type:disc代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:circle代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:square代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:decimal代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:lower-roman代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:upper-roman代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:lower-alpha代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:upper-alpha代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:none代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:armenian代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:cjk-ideographic代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:georgian代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:lower-greek代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:hebrew代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:hiragana代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:hiragana-iroha代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:katakana代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:katakana-iroha代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:lower-latin代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。list-style-type:upper-latin代码语言:javascript复制...人生得意须尽欢莫使金樽空对月。天生我材必有用千金散尽还复来。烹羊宰牛且为乐会须一饮三百杯。扩展资料(转载):

要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。

HTML代码具体示例:

注意:如果UL没有设置宽度,用margin:0 autl是没有用的,因为它默认了100%,给它一个宽度,实际宽度或者width:auto都可以。

在HTML中,有两种类型的列表:无序列表 – 列表项标记用特殊图形(如小黑点、小方框等);有序列表 – 列表项的标记有数字或字母。使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

用CSS设置UL标签的列表符号是不需要去设置的,因为ul默认就是标签符号的,如果使用了这个list-style:none;去掉了这个属性,然后又想有的话,就给这个ul一个id或者是class,然后在css中list-style-type:disc !important,这样就又有序号了。

百度已收录



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3