怎么用纯css实现列表项目前面的三角符号?
发布网友
发布时间：2022-04-06 10:22
共5个回答
热心网友
时间：2022-04-06 11:51
circle : CSS1 空心圆
square : CSS1 实心方块
decimal : CSS1 阿拉伯数字
lower-roman : CSS1 小写罗马数字
upper-roman : CSS1 大写罗马数字
lower-alpha : CSS1 小写英文字母
upper-alpha : CSS1 大写英文字母
none : CSS1 不使用项目符号
armenianl : CSS2 未支持。传统的亚美尼亚数字
cjk-ideographic : CSS2 未支持。浅白的表意数字
georgian : CSS2 未支持。传统的乔治数字
lower-greek : CSS2 未支持。基本的希腊小写字母
hebrew : CSS2 未支持。传统的希伯莱数字
hiragana : CSS2 未支持。日文平假名字符
hiragana-iroha : CSS2 未支持。日文平假名序号
katakana : CSS2 未支持。日文片假名字符
katakana-iroha : CSS2 未支持。日文片假名序号
lower-latin : CSS2 未支持。小写拉丁字母
upper-latin : CSS2 未支持。大写拉丁字母。 你可以用调用你的三家符号的图片作为项目符号呀list-style-image : url ( url ) 括号里填你的项目符号图片的地址 也很方便的
热心网友
时间：2022-04-06 13:09
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="qq:751510550" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0; font:12px/20px Georgia, "Times New Roman", Times, serif; list-style:none; border:none;}
ul { width:240px; margin:20px auto; border:1px solid #ccc; height:77px; overflow:hidden; padding:0 10px;}
ul li { border-bottom:1px dashed #ddd; height:26px; line-height:26px; vertical-align:middle;}
li span{ border:5px solid #fff; border-left:5px solid #ccc; float:left; overflow:hidden; height:0; width:0; margin:8px 10px 0 5px;}
</style>
</head><body>
<ul>
<li><span></span>产品列表项目</li>
<li><span></span>产品列表项目</li>
<li><span></span>产品列表项目</li>
</ul>
</body>
</html>代码如上所示，效果图：
热心网友
时间：2022-04-06 14:44
热心网友
时间：2022-04-06 16:35
list-style-image:url(三角符号小图片);
}
热心网友
时间：2022-04-06 18:43
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
