u010289111的专栏

使用Online JavaScript/CSS Compressorhttp://refresh-sf.com/相较使用clean-css不用先在压缩之前进行W3C CSS验证服务替换掉原来的css样式后，出现了在Google和firefox,ie8+上面背景图显示正常，但是ie8下背景图不显示的情况。发现压缩后background:url(../img/1.jpg) 20% bo

字蛛 @font-face 自定义字体，兼容ie6+

最近在做网页的时候遇到了度，开始显示是正常的，挂了久了以后度 °就显示为乱码了，整个人凌乱了。好吧，然后想到我没有使用转义字符哎最护换成了°比较常用的还有© ©最后，贴出一份对照表哈HTML特殊转义字符对照表字符十进制转义字符字符十进制转义字符字符十进制转义字符?¡&ie

后代选择器  格式 E F E为祖先元素，F为后代元素想表达的意思就是选择E元素的所有后代F元素，那么理所当然的包含子元素的子元素。F元素不管是E元素的子元素、孙元素或者更深层次的关系，都将被选中。那么，不管F在E中有多少层级关系，F元素都将被选中。子选择器 格式 E>F只能选择某元素的子元素，E为父元素，F为子元素，表示选择了E元素下所有子元素F，在E>F中，

html:        加载图片                                                                                                                                       

在电商网站按钮的过渡的炫富于点击效果不能过于生硬，然后过渡效果本来也不是用的很好，每次就干脆直接写了transtion:all .3s;transition可以有多个属性，逗号隔开,发现不是很写的出来，贴上参考网址。参考格式，真的好长。transition ： ['transition-property'> || 'transition-duration'> || 'trans

上个星期帮视频做了一个网站二维码。时间发现这个网站是很好用的，而且免费。哈哈现选中网址再在网址下的文本框中输入网址名称。步骤如下：我选择的是旧版的美化器因为新版的不支持ico格式的，另外嵌入的logo也是可以在图片上选中了再拉伸的，但是我的原图不够清楚，所以就没再拉伸了。新版的美化器是更好用的最后付上我做的一张，换音扫一扫访问哈

collapse.js在bootstrap上面直接下载源码发现用的不是很顺畅，图片在滑动的时候会先高，然后再变矮。换了这种用了以后很顺畅了，内含广告。                                                                                           

今天在codepen上找练习的时候，有一句这样的。body{     background:nonerepeatscroll00#2eb5c7;}许是很久没用了，很多都忘了scroll是background-attachment属性的值。该属性一共有5个可取的值background-attachment: scroll|fixed|local

然后又遇到了类似这样的animation:3sease-in-out0snormalnoneinfinitesuperman;虽然经常看到类似  ease-in-out这样的定义，但是，用到的比较有限也没有深入理解，但是专门做动效的还是需要理解。可以参照着个描述来取所需的值he animation-timing-function property c

SVG有一些预定义的形状元素，可被开发者使用和操作：矩形 圆形 椭圆 线 折线 多边形 路径 矩形          style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>     rect 元素的 width 和 height 属性可定义矩形的高度和宽度style 属性用来定义 CS

其他网站的视频应该也适用，前提是适用了bootstrap的框架。具有响应式内容的嵌入根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定视频或 slideshow 的尺寸，能够在各种设备上缩放。这些规则被直接应用在 、、 和 元素上。如果你希望让最终样式与其他属性相匹配，还可以明确地使用一个派生出来的 .embed-responsive-item 类。

效果图，代码/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  .a_hangpcBox::-webkit-scrollbar{     width: 7px;     height: 1px;     background-color: #fff}/*定义滚动条轨道 内阴影+圆角*/  .a_hangpcBox::-webkit-scrollbar-

hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高)，要么由其containing block来组织和尺寸计算。而IFC（即没有拥有布局）而言，则是元素无法对自身内容进行组织和尺寸计算，而是由自身内容来决定其尺寸（即仅能通过line-h

可以简化部分js,比如回到顶部事件

一般placeholder的字体颜色要比输入的value值色值要淡一些的，所以我们用到了:-webkit-input-placeholder,:-moz-placeholder,:-ms-input-placeholder,这几个伪类元素。在safiri上发现input上的value用的是浏览器定义的字体样式，而不是我原来设置的Arial字体，心塞。   注意关于plaho

在css中返回顶部按钮的方法。原来在响应式中写返回顶部按钮用的是套的方法。在非响应式布局当中并要相对简单一些Top        .totop {            display: none;            background: url(http://www.xx.xx/backto_top.png) no-repeat;            posi

可以参看如下的代码                                                                                                                                    DI

在ie9及以上我们使用-moz-background-size:70%;-webkit-background-size:70%;-o-background-size:70%;-ms-background-size:70%;background-size:70%;图片展示是正确的，能随着窗口的变化而改变大小，如果我们采用的是在html中引用类似于    

图片压缩实用的图片压缩工具Online Image Optimizer- GIF, JPG, and PNG网址http://tools.dynamicdrive.com/imageoptimizer/特点，可以转换为gif/png/jpg等多种格式，画质可选性多比较好的可以生成webP格式图片的软件，腾讯的智图http://zhitu.isux.us/，仅Google

网站变灰的效果/*----------------网站变灰--------------------*//*需要用到desaturate.svg,勿删,参数100%与1请按需改*//*#page,#header{        filter: grayscale(100%);        -webkit-filter: grayscale(100%);        -mo

手机端横屏媒体查询@media (max-width: 767px) and (orientation: landscape ){}设备查询兼容手持设备横屏：@media only screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation : landscape) {}，

在一些 页面效果中我们可能对数量达到n以及未达到n的列表做特殊的处理。这就要求我们使用到css的数量查询。在制作相应式页面时，在不同分辨率下可能column会有不同的排列方式。css中的计数1.数一个的情况:only-child和:only-of-type2.数N个前面通过:only-child或:only-of-type数到只有一个元素的列表，配合:not(onl

学习sass第一步，配置ruby环境对于windows客户端，打开http://rubyinstaller.org/downloads/选择合适的版本下载，都选第二项，配置ruby环境安装成功后，打开cmd命令窗口输入 ruby -v显示版本如ruby  2.1.7p400即为安装成功，打开ruby bin目录下的irb.bat输入 puts "hello world"

当需要做页面输出时我们需要做页面的切图，但是一张张切又是很麻烦的这个时候我们需要用到基于参考线的切片。然后在在切片里面划分切片，即可。这样就可避免与打开小的切片重新切图了。

对于一些要 用到表格布局的页面，若执行缩放，则在Firefox下与ie下显示是正常的，但是在Chrome下的90%点缩放下，td 与插入元素之间产生了1px左右的间隙，且无法消去。当然有探索过解决方案，但是没有什么效果，

开始是在bootstrap上看到的好吧。上面一个范例都没有怎么用，而且冒死版本是很老的，然后直接进入了http://unslider.com/在里面发现了也是够用的第二款 Demos&Usage下找到的Automatic slider没有加入css样式的效果真的巨丑而且好吧，很无语，就那么一下快，然后打开调试器，copy了它的html和CSS.代码结构很简单的

最近一直加班，加班，不开心。做了一个页面是1920px的，有两种方式可以使屏幕居中显示。第一种body{  text-align:center;   overflow:hidden;   margin:0 auto;}我做的网页不是直接一个下来的。里面用到了posittion的absolute和relative，然后打开一看什么鬼，错位了啊。找到了一种比

现在很多浏览器都标配了placeholder。可是为什么在safiri上是点击提示信息就直接消失，而在诸如Firefox和Google这类浏览器上就是开始输入才消失的，好吧，从用户体验度上来说，有些认识以为开始输入在消失是比较好的。做的是点击输入框输入提示信息就消失的。Google上可以通过input:focus::-webkit-input-placeholder{     

h5中的canvas有非常强大的绘图功能1.渲染上下文canvas起初是空白的。为了展示，首先脚本要找到渲染上下文，然后在它的上面绘制。元素有一个叫做getcontext()的方法，这个方法是用来渲染上下文和它的绘画功能，getContext只有一个参数，上下文的格式。对于2D图像而言，你可以使用CanvasRenderingContext2D.绘制矩形canvas提供了三

对于jQuery自身不同版本的冲突问题，和jQuery和其他引入库的问题，我们可以参看   http://api.jquery.com/jQuery.noConflict/    来解决，在我使用的过程中遇到了jQuery库和prototype库的冲突的问题。然后比较抵触使用其他符号替代jQuery当中的$符号，因而This technique is especially effectiv

试了很多个都不太理想，开始以为是placeholder的问题，然后找错了方向。后来发现是Change document.activeElement programmatically in JavaScript后来发现是由于它变成了activeElement的问题，虽然采用类似这种方法 onLoad="if(document.getElementById('food').

Twitter Bootstrap 3 dropdown menu disappears when used with prototype.jshttp://stackoverflow.com/questions/19139063/twitter-bootstrap-3-dropdown-menu-disappears-when-used-with-prototype-js用了很笨笨的方法

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