HTML之UL标签

上面这个小三角是这么弄的... 上面这个小三角是这么弄的 展开
 我来答
jiaozhuangfei
2016-12-20 · TA获得超过698个赞
知道小有建树答主
回答量:316
采纳率:100%
帮助的人:268万
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrow</title>
    <style>
        html, body, ul{margin: 0; padding: 0; background-color: #000;}
   衡败    毁桥 ul, li{margin: 0; padding: 0; list-style: none;}
        #box{position: relative; width: 100px; height: 50px; background-color: red; text-align: center; margin: 100px auto;}
        h3{width: 100%; height: 100%; line-height: 50px; margin: 0;}
        ul{background-color: #fff; display: none;}
        li{font-size: 14px; line-height: 30px; cursor: pointer;}
        span{position: absolute; display: none; border: 6px solid transparent; border-bottom-color: #fff; left: 50%; margin-left: -6px; top: 38px;}
        #box:hover ul{display: block;}
        #box:hover span{display: inline-block;}
    </style>
</head>
<body>
<div id="box">
    <h3>安纤拦猛全保障</h3>
    <ul>
        <li>合作保障机构</li>
        <li>CFCA战略合作</li>
        <li>政策法规保障</li>
    </ul>
    <span></span>
</div>
</body>
</html>

可以通过图片,但是性能上稍微差一点,可以用一个标签的边框来表示,下边框有颜色其余的透明然后定位即可。代码是个小例子,你可以看看。

仝彭祖c
2016-12-20
知道答主
回答量:50
采纳率:0%
帮助的人:15.8万
展开全部
用图片来弄
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式