2019年11月

一个下雨的星期六,闲来无事听听窗外雨声,抿一口清茶!

废话不多说,做前端的朋友们都一定碰到IE6对position:fixed定位不支持的问题,虽然IE6即将被淘汰,但是以目前国内网络用户而言,依然是一庞大的用户群体,所以咱们不得不对此做兼容处理。

解决方式:用position:absolute来替代fixed,IE的CSS表达式(expression)来完美的实现ie6下position:fixed效果

- 阅读剩余部分 -

一、大众机型常用meta标签name的设置

1、name之viewport

说明:屏幕的缩放

content的几个属性:
width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持;


- 阅读剩余部分 -

Pietimer是一个可以在页面上生成一个扇形变化的定时器插件,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色、宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适用于需要定时器的页面如在线考试、倒计时,限时抢购等场景。

- 阅读剩余部分 -

当我们在页面上需要选择数值范围时,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。

为大家介绍一款jquery插件jRange;

- 阅读剩余部分 -

css代码:

.draw-out{width:400px;height:400px;margin:30px auto;position:relative}
.draw-bottom{width:400px;height:400px;position:relative}
.draw-bottom section{width:400px;height:1px;background:#d6d6d6;position:absolute;top:200px;left:0}
.draw-bottom section.s2{
transform:rotateZ(60deg);
-webkit-transform:rotateZ(60deg);
-moz-transform:rotateZ(60deg);
-o-transform:rotateZ(60deg);
}
.draw-bottom section.s3{
transform:rotateZ(120deg);
-webkit-transform:rotateZ(120deg);
-moz-transform:rotateZ(120deg);
-o-transform:rotateZ(120deg);
}
.draw-bottom p{position:absolute;}
.draw-bottom p.p1{top:105px;left:300px}
.draw-bottom p.p2{top:240px;left:300px}
.draw-bottom p.p3{top:310px;left:170px}
.draw-bottom p.p4{top:240px;left:60px}
.draw-bottom p.p5{top:105px;left:60px}
.draw-bottom p.p6{top:30px;left:170px}

.draw{width:400px;height:400px;border:2px solid #E17F27;border-radius:200px;position:absolute;top:0}
.draw-in{width:80px;height:80px;padding:1px;margin:157px 157px}
.draw-in div{background:#E17F27;width:40px;height:40px;border-radius:33px;position:relative;margin:20px 20px}
.draw-in div .circle{display:block;width:0;height:0;border:10px solid transparent;border-bottom:40px solid #E17F27;position:absolute;left:10px;top:-44px}
.btn{display:block;margin:100px auto;width:100px;height:30px;border-radius:6px;background:#0ABF5D;color:#fff;text-align:center;line-height:30px;text-decoration:none}
.result p{color:#c00}

- 阅读剩余部分 -

上接:css3转盘抽奖示例-转指针

css代码:

.draw-out{width:400px;height:400px;margin:30px auto;position:relative}
.draw-bottom{width:400px;height:400px;position:relative;
transition:all 4s ease;
-webkit-transition:all 4s ease;
-moz-transition:all 4s ease;
-o-transition:all 4s ease;
}
.draw-bottom section{width:400px;height:1px;background:#d6d6d6;position:absolute;top:200px;left:0}
.draw-bottom section.s2{transform:rotateZ(60deg)}
.draw-bottom section.s3{transform:rotateZ(120deg)}
.draw-bottom p{position:absolute;}
.draw-bottom p.p1{top:105px;left:300px}
.draw-bottom p.p2{top:240px;left:300px}
.draw-bottom p.p3{top:310px;left:170px}
.draw-bottom p.p4{top:240px;left:60px}
.draw-bottom p.p5{top:105px;left:60px}
.draw-bottom p.p6{top:30px;left:170px}
 
.draw{width:400px;height:400px;border:2px solid #E17F27;border-radius:200px;position:absolute;top:0}
.draw-in{width:80px;height:80px;padding:1px;margin:157px 157px}
.draw-in div{background:#E17F27;width:40px;height:40px;border-radius:33px;position:relative;margin:20px 20px}
.draw-in div .circle{display:block;width:0;height:0;border:10px solid transparent;border-bottom:40px solid #E17F27;position:absolute;left:10px;top:-44px}
.btn{display:block;margin:30px auto;width:100px;height:30px;border-radius:6px;background:#0ABF5D;color:#fff;text-align:center;line-height:30px;text-decoration:none}
.result p{color:#c00}

- 阅读剩余部分 -