一、关于CSS hack(尽量不用或者少用,减少页面复杂度)1、条件注释法:(我的测试是IE9及其以下才有效)这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下只在IE下
2021-10-23 13:21:16
224
<ul class="ui-step list-unstyled"> <li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>填写账户名</li> <li class="step-item current"><b class="arrow-space"></b><b class="arrow-bg"></b>验证身份</li> <li class="step-item"><b class="arrow-space"></b><b class="arrow-bg"></b>设置新密码</li> <li class="step-item">完成</li> </ul>
less:
.ui-step(@num){ .ui-step{ position: relative; overflow: hidden; margin: 20px; .step-item{ // position: relative; float: left; zoom: 1; width: percentage(1/@num); *width: percentage(1/@num) - 0.0416666%; height: 30px; text-align: center; line-height: 30px; background-color: #e5e5e5; b{ float: right; position: relative; overflow: hidden; width: 0; height: 0; border-style: solid; _border-style: dotted dotted dotted solid; border-color: #ccc transparent transparent transparent; border-width: 15px; } .arrow-space{ border-width: 20px; margin: -5px -35px -5px 0; border-color: transparent transparent transparent #fff; } .arrow-bg{ right: -30px; margin-left: -30px; border-color: transparent transparent transparent #e5e5e5; } &:first-child{ border-radius: 3px 0 0 3px; } &:last-child{ border-radius: 0 3px 3px 0; } } .current{ z-index: 1; background-color: Orange; color: #fff; .arrow-space{ _border-style: solid; border-color: #e5e5e5 #e5e5e5 #e5e5e5 #fff; } .arrow-bg{ border-color: transparent transparent transparent Orange; } } } } .ui-step(4);
15
2022-09
15
2022-09
15
2022-09
15
2022-09
13
2022-09
13
2022-09