前排丢一下本文大部分内容机器生成用的代码,贴一下供参考
PHP
本文涵盖了所有CSS自带的li标签样式效果,以及一个图片形式。(使用图片Url)
引用自定义图片、
语法:
- list-style-image : none | url (url)
- eg. li {list-style-image : url (image/aa.gif);}
演示
<ul style="list-style-image: url('https://60yu.w4i.cn/2020/20200811-6d086a783ed8c.png');">
<li>11111111111</li>
</ul>
- 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: 大写拉丁字母
list-style-type:disc
<ul style="list-style-type:disc;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:circle
<ul style="list-style-type:circle;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:square
<ul style="list-style-type:square;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:decimal
<ul style="list-style-type:decimal;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-roman
<ul style="list-style-type:lower-roman;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:upper-roman
<ul style="list-style-type:upper-roman;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-alpha
<ul style="list-style-type:lower-alpha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:upper-alpha
<ul style="list-style-type:upper-alpha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:none
<ul style="list-style-type:none;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:armenian
<ul style="list-style-type:armenian;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:cjk-ideographic
<ul style="list-style-type:cjk-ideographic;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:georgian
<ul style="list-style-type:georgian;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-greek
<ul style="list-style-type:lower-greek;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:hebrew
<ul style="list-style-type:hebrew;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:hiragana
<ul style="list-style-type:hiragana;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:hiragana-iroha
<ul style="list-style-type:hiragana-iroha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:katakana
<ul style="list-style-type:katakana;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:katakana-iroha
<ul style="list-style-type:katakana-iroha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-latin
<ul style="list-style-type:lower-latin;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:upper-latin
<ul style="list-style-type:upper-latin;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
扩展资料(转载):
要实现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,这样就又有序号了。