分类 css 下的文章

昨天公司任务中，有涉及到一个比较老的网站静态文件整理压缩过程，于是采用了grunt工具的压缩插件grunt-contrib-cssmin来进行js和css的压缩整理；发现引用压缩后的css之后，页面在ie7下出现错乱现象，其他高版本浏览器则正常显示，于是各种排查，对比文件，网上查找相关资料，终于找到了原因所在。

- 阅读剩余部分 -

今天遇到一个问题，在IE浏览器下，使用label FOR radio后，label中的图片无法选中。

例如，这样的代码

<input type="radio" name="radio" id="a" /><label for="a"><img src="/Labs/images/logo.gif" /></label>

这种情况下，点击label的图片将无法选中radio选项。解决这个问题，目前可以有三种方法，分别是通过JS、CSS或者HTML代码3个方面来解 决。

- 阅读剩余部分 -

placeholder占位符文字，也可以设置对应的颜色，透明度等样式，具体如下：

/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
    color:#ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#ccc;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#ccc;opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#ccc !important;
}

- 阅读剩余部分 -

由于最近工作中，经常会遇到一些动态百分比的仪表盘，一开始都是用图片样式方式实现；
但是随着越来越多的项目，决定用canvas绘制一个简易的仪表盘，便于以后项目中直接使用；
现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。



- 阅读剩余部分 -

当你需要在某个动画开始或者结束时，去触发某一个事件，那么这时候可以用到监听animation事件方法；具体如下：

1、-webkit-animation动画其实有三个事件：

开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration

2、css3的过渡属性transition，在动画结束时，也存在结束的事件：webkitTransitionEnd;

注意：transition,也仅仅有这一个事件。



- 阅读剩余部分 -

  • 时间:
  • 分类: css
  • 阅读：412
  • 评论

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

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

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

- 阅读剩余部分 -

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}

- 阅读剩余部分 -

  1. 1
  2. 2