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

AlexTao

修改于 2023-05-16 13:12:08

5.1K0

修改于 2023-05-16 13:12:08

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

PHP

<style>
	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:?developer/article/1692603/url(https://60yu.w4i.cn/2020/20200811-6d086a783ed8c.png);
	}
</style>
<p>语法：
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
</p>
   <ul style="list-style-image:?developer/article/1692603/url(https://60yu.w4i.cn/2020/20200811-6d086a783ed8c.png)">
	     <li>11111111111</li> 
   </ul>
   

  
 <?php
 $arr = array('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');
 $num = count($arr);
 for($i=0;$i<$num;++$i){
 echo "<h3>list-style-type:$arr[$i]</h3>";
 echo  '<ur style="list-style-type:' ;
 echo  "$arr[$i]" ;
 echo  '">';
 echo ' <li>人生得意须尽欢</li>
		<li>莫使金樽空对月。</li>
		<li>天生我材必有用</li>
		<li>千金散尽还复来。</li>
		<li>烹羊宰牛且为乐</li>
		<li>会须一饮三百杯。</li>
		</ur>';
 }
 ?>

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

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

引用自定义图片、

语法：

list-style-image : none | ?developer/article/1692603/url (?developer/article/1692603/url)
eg. li {list-style-image : ?developer/article/1692603/url (?developer/article/1692603/image/aa.gif);}

演示

<ul style="list-style-image: ?developer/article/1692603/url(?developer/article/1692603/&);">
 	<li>11111111111</li>
</ul>

11111111111

引用系统图案

语法：

参数：

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

<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，这样就又有序号了。

百度已收录

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度