怎么用纯css实现列表项目前面的三角符号?

急啊。帮帮忙。... 急啊。帮帮忙。 展开
 我来答
匿名用户
2013-06-06
展开全部
纯css应该是不行了 因为项目符号样式 list-style-type 没有提供三角符号的取值list-style-type 的取值如下:disc : CSS1 默认值。实心圆
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 ) 括号里填你的项目符号图片的地址 也很方便的
匿名用户
2013-06-06
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>代码如上所示,效果图:
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-06-06
展开全部
最简单的方法,连接一张三角符号的图片
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-06-06
展开全部
UL列表有提供几种风格符号,比如小圆点和方形,好像没有三角形哦。UL {
list-style-image:url(三角符号小图片);
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
搭飞白
2021-12-21
知道答主
回答量:3
采纳率:0%
帮助的人:2461
展开全部
.arrow {
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;
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式