html实现右箭头
html实现右箭头
荆轲刺秦王
在制作⽹页的时候，我们可能会有这样的需求:⽐如
我们需要做⼀个⼩箭头，最简单的办法就是直接⽤数学符号:">"，但是这样做的缺点就是没有办法调节符
号的⼤⼩，颜⾊......这就⾮常不理想.我在⽹上到了⼀篇博客，专门解决了这个问题:
原⽂链接:
原⽂是在做⼿机端⽹页时候右箭头的解决⽅案，如果想要换成PC端的⽹页效果，需要做⼀点⼩⼩的改动:
1.我⾸先在每个li⾥⾯都有⼀个a标签:
<li><a href="">园区新闻<span class="right-arrow"></span></a></li>
可以看到，我直接加了⼀个<span>
2.重点看我css样式:
/*右箭头*/
.right-arrow {
display :inline-block;
position: relative;
width: 28px;
height: 28px;
margin-right: 20px;
}
.right-arrow::after {
display: inline-block;
content: " ";
height: 13px;
width: 13px;
border-width: 3px 3px 0 0;
如何做网页border-color: #0177ff;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
left: 150px;
}
我把颜⾊,⼤⼩，位置做了⼀点改变，具体实现可以根据项⽬需求来改进.博主还做了上下箭头和三⾓箭头，我这⾥没有⽤到，所以就不再多加累述.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。