摘要：
css3 的transition：允许css属性值在一定的时间区内平滑的过渡。transition-property：变换延续的时间transition-duration：在延续时间段transition-timing-function：变换速度变化transition-delay：变化延迟时间a：{all 0.5s ease-in 1s；}这里的四个值分别对应上面的四个属性。* {margin:0;padding:0;}ul{width:300px;}ul:after {clear:both;display:block;content:".";height:0;visib 阅读全文
摘要：
无边框用border:none还是border:0一直都是一个热议的问题，两者除了在渲染性能上面的差别以为，在标准浏览器中页面表现是没有任何差别的。下面一起认识一下它们本质的区别：一、border:noneborder-style的简写在chrome审查元素看到以下结果element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: ini 阅读全文
摘要：
一个宽度为400px的列表项里面，要求最后一个列里面没有右边距，效果预览为：我们一般喜欢给最后一个li写一个单独的样式，注明no-mr：margin-right：0；但是如果是在大量动态随机的显示时，我们会发现需要用到js去控制了，计算出最后一个是4的倍数，再动态添加no-mr这个样式。有没有简单的css，可是实现，不用程序控制就能实现最后一个的margin-right：0呢；答案是肯定的。这里我们来说一下纯css方法和js方法。第一种：css实现给外层加一个div，并给它加overflow：hidden；通过这个外层的div来使它隐藏掉最后一个的右边距，记住是隐藏，而不是去掉。如果你亲手做一 阅读全文
摘要：
这里介绍两种方法，都是css实现的，其他的js，jq代码，可以去网上搜索很多。第一种：margin负值定位法<div class="text_overflow" ><div class="text_con" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div><div class="text_dotted" >…</div>.text_overflow{width:300px; height:25px; overflow:hidden;line-heig 阅读全文
摘要：
兼容各浏览器且效果一致，有两种方法：一、使用opacity+Alpha Filter其实见到这个的时候，我们的第一想法当然是 background + opacity，在不支持 opacity 的 IE 再使用 filter 的 alpha 滤镜来实现。但是如果仅仅只是如此，这个最外层，最内层和文字，都被设置了 opacity（alpha 也是使用 opacity ）导致文字模糊 。当然，我们可以给各层设置 opacity 变回来，但这是很麻烦的事，所以我这里将文字放在外层的p标签内，再给一个相对定位，（也可给绝对定位）让其显示在半透明的div里面。代码如下：<!DOCTYPE html 阅读全文
摘要：
这是ie6的一个经典bug。下面看问题分析： 1 2 3 4 5 无标题文档 6 7 8 9 10 左11 12 中13 14 右：这就是多出来的那只猪15 16 17 预览的效果是这样的：-----------------------------------------------------------------------------------------------------------------------我们会发现多出了“那只猪”三个字，这是为什么呢？1、经过多个浏览器测试，发现只有ie6有这种情况。说明：这是ie6的bug，其他浏览器正常。2、去掉左中右当中... 阅读全文
摘要：
现在：解决完手上的工作，利用零散时间整理和解决css兼容的各个问题。3个月后：搜集和整理各个问题，建一个丰富的博客，思考整站的设计、开发、维护、性能、优化方面的问题。6个月后：前端问题都能快速、准确的解决，兼容没有问题。一年后：精通css，能够掌握基本的js。一年半后： 精通js二年后：css和js都精通， 开始涉足 html5、css3，并开始关注移动开发和php。二年半后：对php和移动开发有一定的了解，并且了解程序中的各个运用。三年后：前端技术无所不能，开始了解管理经验。四年后：有带领团队开发一个项目的经验。 阅读全文
摘要：
【背景】如果你是刚进入WEB前端研发领域，想试试这潭水有多深，看这篇文章吧;如果你是做了两三年WEB产品前端研发，迷茫找不着提高之路，看这篇文章吧;如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧;WEB前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不过三四年的时间。这个领域没有学校的正规教育，没有行内成体系的理论指引，几乎所有从事这个职业的人都是靠自己自学成才。自学成才，一条艰辛的坎坷路，我也是这样一路走来。从2002年开始接触WEB前端研发至今已然有了9个年头，如今再回首，期间的走了很多弯路。推已及人，如果能让那些后来者少走些弯路，辛甚 阅读全文
摘要：
1、尽量不要定高度，除非是特别需要，想要撑开，可以用line-height。2、开发时，一定要注意溢出隐藏的书写，防止内容增多时候，将页面变形。3、文字一定要闭合在一个单独的容器里，不要出现：<h2>巡回演出<span>了解更多</span></h2>这样的情况。4、如果出现了某一部分代码，你确实设定了间距，预览却没有间距，鼠标放上去或过一会会自己撑开，这样的情况一般是因为浮动的原因，清除浮动即可。5、在ie6和ie7下面出现标签的一部分背景无法显示，首先检查图片的路径是否正确，其次看背景的书写是否正确，ie6和ie7不识别background: 阅读全文
摘要：
在一个固定大小的180*130的容器里面让图片显示，并做到垂直水平都居中，且图片大小随机。下面是代码：<div class="group_pic_list_block"><div class="img"><a href="#"><img src="example1.png" /></a></div><p>sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客</p> 阅读全文