WEB开发 CSS3绘制箭头

英迈思前端开发面试题|web前端开发面试题2019|web前端开发需要ps

代码片段 1

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>无标题文档</title>
    <style type=”text/css”>
        body {
            line-height: 1.25em
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0
        }
        ul li {
            display: list-item;
            text-align: center;
            width: 300px;
            float: left;
            margin: 10px 1% 0;
            background: #fff;
            border: 1px solid #ddd
        }
        ul li a {
            display: block;
            padding: 8px 0;
            cursor: pointer
        }
        ul li span {
            vertical-align: middle;
            width: 130px;
            height: 18px;
            line-height: 18px;
            display: inline-block;
            overflow: hidden
        }
        ul li i {
            float: right;
            border: #666 solid;
            border-width: 2px 2px 0 0;
            width: 4px;
            height: 4px;
            margin: 8px 10px 0 0;
            top: -2px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg)
        }
        /*通过旋转形成箭头*/
    </style>
</head>
<body>
    <ul id=”list”>
        <li class=”item”><a><span>男装</span><i></i></a></li>
        <li class=”item”><a><span>女装</span><i></i></a></li>
        <li class=”item”><a><span>运动</span><i></i></a></li>
        <li class=”item”><a><span>内衣</span><i></i></a></li>
        <li class=”item”><a><span>男鞋</span><i></i></a></li>
        <li class=”item”><a><span>女鞋</span><i></i></a></li>
    </ul>
</body>
</html>

前端开发视频播放|前端开发需要网络吗 南京软件开发前端

» 本文来自:前端开发者 » 《WEB开发 CSS3绘制箭头》
» 本文链接地址:https://www.rokub.com/5312.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!