u010289111的专栏

一般的图层裁剪，可能存在firebox下的兼容性问题。我们可以通过创建内联svg的方式去解决如下：.specialoffers:after{    content: '17%\AOFF';font-size: 13.73px;font-weight: 600;padding: 12px 6px 0 14px;line-height: 1em;

直接切图制作这样的盒子的话可能不用花很长的时间，但是使用css3的话却是可以大大加快页面加载速度的所以尝试了一下，当然并不是出于加载速度的考虑，纯粹的因为shoujianTOThtml:                                                                                       

7.把控制流变得易读一.条件语句中参数的顺序二.if/else语句块的顺序1.首先处理正逻辑而不是负逻辑的情况。例如，用if(debug)而不是if(!debug)。2.先处理掉简单的情况。这种方式可能还会似的if和else在屏幕之内都可见，这很好。3.先处理有趣的或者是可疑的情况。并且小心那些会使得你的if/else顺序很别扭的情况。三.?:条

参考地址：http://cssicon.space/#/

参考地址：http://www.cnblogs.com/blosaa/p/3823695.html最近有做这种.thirdsTrangleUp:after, .thirdsTrangleDown:after {position: absolute;content: '';display: block;width: 0;height

垂直局中有时候实现起来是比较费力的一件事但是通过flex布局我们却可以轻松的实现参考地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool随着旧版浏览器的抛弃，flex布局很有可能成为未来布局的首选方案因为他得到了所有浏览器的支持，并且，可以边间、完整、响应式地实现各种页面布局。

原来有使用过clip-path制作类似勋章和flag图标。这次本来也想使用clip-path来实现的，但是却发现不实用的，主要是因为字体也旋转了45deg而且背景图也需要切了以后旋转的。不是很方便控制，最重要的是最后我发现这些文字后台都是要取的那个百分比没有办法只好用图片来实现，然后我居然把数字也切了出来，好吧只好切过了一遍，使用div实现背景，然后span元素旋转来实现文字的翻转

html:divclass="right fif-right">                        divclass="imgBox">                              imgclass="wow bounceIn" src="../../public/static/images/special/ftoulDown/down5-

当我从svn析出项目以后，打算直接在scss文件中添加样式的时候，发现居然不编译，可能是因为没有配置自动编译的环境。然后由于原来使用过sass,但是已经很久没有用了，虽然在深圳的时候那应该是两年前的时候就有使用。然后我就开始doubt是不是我以为的那样编译，我就问了同事，好吧，居然是这样编译的，不是应该自动编译吗，可能是我的编辑器的问题。居然不是的，由于好吧，告诉我用百

用百度搜索了很久，好吧，其实原来找的时候也看到了可以用的只是觉得有些些丑就没有用的。然后我又上了https://codepen.io/  找动效效果呀，他们一用其他的比如好吧，比如我没掌握那些的心语法的而且用到醒目里面还要配置一些些的我都不敢用。。。。、然后找了很久也没有找到怎么合适的烟花的动画还有去年的活动页国庆节的时候有烟花效果然后就直接拿过来了开始为了

animation-interation-count如果不设置这个值的话默认的就是执行一次了，可是最近做这个页面改版的时候，那种劵和钱可能需要一直闪动来提醒用户所以就用到了infinite;然后发现头部banner做动画的时候这个如果一直抖动的话也是很cuocuo的,.swing{      animation-iteration-cou

使用wow.js加animate.css之后我想实现按钮每隔几秒放大一下，提醒用户可以点击那里。开始以为anamation有自带的每次循环之间的时间延迟。然后发现并没有animation-delay是首次执行的延时。然后参考了这个地址：https://segmentfault.com/q/1010000000321090的回答改写了animation.css的pul

前两个面到时候又遇到一个问题问我:before和 ::befote的区别然后翻了一下回答的比较好的参考地址https://segmentfault.com/a/1190000000484493官方的描述：W3C关于CSS3选择器的规范中有一段描述：A pseudo-element is made of two colons (::) followed by the 

当我使用z-index这个属性的时候，为了实现首页的banner图，我还同是用到了一个bootstrap的carousels插件，然后我就郁闷了，开始没有发现，然后出现了在360浏览器上当banner滑动的时候我的头部居然闪烁的现象，开始一直找不到原因。最后仔细的观察居然是这个属性的问题就是z-index。所以建议以后尽量避免使用较大的z-index的值，而且注意z-index的嵌套的问题

最近，设计出了带浮雕效果的按钮，然后需要用到制作条纹背景。原来做的背景一般是渐变的，没有这种psd里面的浮雕效果。要做的是中间的这个绿色的带浮雕的按钮页面是响应式的，所以要求浮雕效果根据页面的尺寸的变化还是一样的。源代码：.home_turnslia.a_pop{   display:block;   font

关于一些设计图中常遇到的阴影语法E {box-shadow:   ??||}也就是：E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}换句说：对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}对于这种形式的阴影 .dom

最近好像做了很多弹出层但并不一定是嘴简单代码的.基本上是一样样式的,所以贴上来分享一下.html:divclass="take_money">              divclass="take_money_inner">                   divclass="img_box">                        img

html:                        略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略 略略 略 略 略                         略略 略 略 略 略略 略 略 略 略略 略 略 略                                               

只能说最近么特懒,很多笔记都没有做哈,但是昨天反思了一下自己,所以还是决定把这篇很重要的补上.翻下mozilla的参考文档.在关于display属性的叙述中我们可以看到这么一段.flex属性是Flexbox模型是属于css3的.所以终归而言,就需要我们熟悉使用css弹性盒子CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种布局方式，当页面需要

以前在使用box-shadow制作单边阴影效果的时候发现或多或少会影响其它边的展示效果.今天在阅读文章的时候,终于发现了一个解决的方法.就是利用box-shadow中的一个参数.spread来解决这个问题.首先我们先要区分box-shadow:0 10px 10px #ccc;box-shadow:0 10px 10px -10px #ccc;首先,我们应当认知到这两种书写

在div盒子的大小确定的情况下,我们可以通过css的calc方法来实现水平垂直居中.首先要先理解盒子模型例如:  .wrap .con {            /*利用CSS3的calc() ，它的用法类似于函数，能够给元素设置动态的值：*/            /*（父级的宽度 - 自身的宽度）的一半当做padding的值*/            paddi

原来对于ID唯一性的理解居然以为是在一个项目中ID号得是唯一的.然而,今天在学习的时候:id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的因而在不同的页面使用相同的ID号还是可以的.然后再比较jquery的类选择器与js原生

参考地址：http://www.cnblogs.com/CheeseZH/p/4580062.html我做的时候啊哈以为是checkbox没想到是radio组，不是复选是单选，哈哈不过我实现的时候是当成checkbox来做的，然后发现只能二选一就更改了需求。html: