文章分类 - CSS
摘要：此文章转载自白树：http://peunzhang.cnblogs.com/ 回想2年前刚开始接触手机项目，接到PSD稿后，发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计，于是我写页面的时候也定义 font-family 为微软雅黑，后来发到线上后，细心的产品经理发现页面的字体不是微软雅黑，要求
阅读全文
摘要：设计师喜欢拿我们做出来的效果页面跟设计稿在PS里面对比，找出各种间距、高度等的问题。通常返回来的结果是，这里应该下降多少px,那里应该上升多少px。手动测量，特别是文字行距间距问题，很难精准。虽然调回来比较容易，但是大量重复调，实在是太浪费时间。 为了解决这种问题，想出了一个解决办法。在开发的时候直
阅读全文
摘要：网上一搜，多文本省略有好多方案，可是都没有我想要的效果。把其他有名网站都看了一遍，还是没有... 多文本截断，然后换行显示更多 想要的效果应该是这样的： 你们或许会说，用JS就搞定了，但是我的宗旨是能用CSS就尽量不要用JS。。。。最后，我还是想到了CSS黑魔法： 代码实现如下： github传送门
阅读全文
摘要：通常，使用单行溢出省略显示，我们都会这样写： 但是当需要在table表格中使用时，有没有发现根本不生效？ 文字内容就是要把表格继续撑开，而不是省略显示。 因为单元格的流动性，使得文字根本就不存在溢出这种说法。 解决方法也很简单，给最外面的table标签添加一个声明就可以了。 table-layout
阅读全文
摘要：背景：我们都知道，如果一个元素使用了雪碧图背景，那么我们就必须限制这个元素的宽高尺寸。那么问题来了，一旦我们限制了元素的宽高，元素就没法自适应屏幕了，尤其是手机端，自适应场景非常多。这个时候很多人都会使用JS或者直接使用图片来达到自适应的目的。的确，我也遇到过这样的问题，于是我百度了很久，也问过了很...
阅读全文
摘要：1.网页的写法导致渲染时产生的平台相关的layer过多。浏览器在网页排版的时候会产生一棵rendertree用于渲染。由于z-index和一些特殊元素如overflow，fixed元素等的存在，浏览器为了保证渲染的正确，真正渲染的时候不直接使用rendertree，而是根据rendertree的信息...
阅读全文
摘要：今天做了个demo。使用CSS3-animation来制作逐帧动画，非常简单！动画的关键是使用了animation的steps属性。至于怎么用，什么原理，读者可以自己去查阅相关资料~~~demo1如下：demo1代码： css3逐帧动画 demo2：demo2代码： ...
阅读全文
摘要：使用雪碧图的优点：减少加载网页图片时对服务器的请求次数可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。提高页面的加载速度sprite 技术的其中一个好处是图片的加载时间(在...
阅读全文
摘要：实现一个loading效果，需要分平台来考虑。1.在PC端，因为IE9及其以下的版本实现不了CSS3动画效果，所以用CSS3是实现不了的，在这里比较建议使用gif的动态图片来实现，能兼容各主流浏览器。在这里介绍一个很好用的在线loading生成工具，方便、快捷！http://preloaders.n...
阅读全文
摘要：垂直居中问题，我们通常会用到vertical-align:middle这个属性，但是我们都知道这个属性对于行内元素还有table是生效的，但是不支持块级元素。想要在块级元素中实现垂直居中问题，或许会使用position来定位，但是这样会显得很丑陋，而且拓展性不强。在CSS3中，有两个属性 -webkit-box-align: center; -webkit-box-pack: center;在父级元素中使用以上两句，能够使元素达到垂直居中的效果。兼容性问题Firefox 支持替代的 -moz-box-align 属性。Safari、Opera 以及 Chrome 支持替代的 -web...
阅读全文
摘要：如标题所述，遇到这个兼容性问题。情景如下：左边箭头 html： css：.orange-left span{ width:0px; height:0px; border:7px solid; border-color:transparent #e27c03 transparent transparent; font-size:0px; line-height:0px;}右边箭头 html: css:.orange-right:after{ content:""; display: block; position:absolute; ...
阅读全文
摘要：url：http://blog.sina.com.cn/s/blog_4a2defca0101bzmf.html
阅读全文
摘要：今天在做项目的时候，发现了一个问题。在手机端上的页面上，input输入框聚焦输入时，如果input中有设置color属性时，在QQ浏览器中，focus时字体的颜色是color属性的值；但是在UC浏览器中，focus时的字体颜色一律都是浏览器设定的黑色，至于能不能通过属性改变这个浏览器设置，还没尝试过。
阅读全文
摘要：虽然做移动端页面的时间不长，才开始不久。但是也需要把自己遇到的问题记录总结一下。下面是关于UC浏览器ios版本的css默认设置（我遇到过的）：1.-webkit-appearance:none; 在这个版本上面，当input的type="submit"z或者是type="button"的时候，页面...
阅读全文
摘要：因为在IE6中实现不了position:fixed。所以必须另外寻找方法代替。我经常用的解决方法是使用表达式计算。_position:absolute;_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));这个方法是可以实现效果，但是
阅读全文
摘要：在页面中经常需要用到png图片，但是在IE6下不兼容。（另外说明一下，gif和png8的图片会产生锯齿，所以我都会保存为png24的格式）为了兼容IE6，我通常都会使用一个插件DD_belatedPNG_0.0.8a-min.js，当然还有其他插件可以选择。这个插件的用法如下： 插入上述代码，在函数中改成需要作处理的选择器即可。觉得这个很好用，页面上经常用到透明效果，所以这个插件能够让我们很方便地兼容恶心的IE6啦
阅读全文
摘要：其实经常都能遇到这个问题，解决办法恨简单：在对应元素中添加属性 hidefocus="true" ，即可解决这个问题。
阅读全文
摘要：今天在做一个lightbox效果的时候出现了一个问题。当往下滚动再点击按钮出现lightbox的时候，lightbox的遮罩层不能铺满（即滚动高度处不能铺上），如下图所示。原因是提交按钮使用的是a标签，当给a标签写上href属性的时候，在每次点击都会自动跳到页面的最顶端，但是每次的点击行为发生的顺序是先在当前屏幕铺满灰色遮罩层然后再跳到页面顶端。故出现如下图的现象。解决方法是：不要给a标签写上href属性或者这样写：href="javascript:void(0)"另外需要注意的是，在IE中如果a标签不作为跳转按钮，则应加上属性防止跳转：target="_self
阅读全文
摘要：IE6下不支持position:fixed。所以实现这个效果的方法是： _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
阅读全文
摘要：在CSS的className中使用连字符“-”还是使用下划线“_”作为分隔符更适合？这是关于CSS命名规范的一个问题，同时也涉及了语义化。以前一直都用"_"来命名比较长的类名。看了有关的文章后，才知道自己的CSS命名很不规范。读了下面给出的这篇文章后，我深深地发现我们在学习的时候看标准的文案其实是很重要的，这让我们从一开始就树立一种规范的意识。如果一开始就看别人编写的教程，其实也没错，这是人家的宝贵经验，大部分还是值得我们借鉴的，但是无形中我们就会跟着编写者的习惯来学习。如果作者的编写是规范的，那当然没话说，但是难免会有不规范的时候。下面给出这篇文章的地址，这篇文章对于CS
阅读全文
浙公网安备 33010602011771号