IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题，而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好，如何解决这个问题呢？ 一种比较传统的方案是放弃CSS3，使用背景图，但是这种方式也会有诸多问题，对页面结构改动较大，需要对自适应大小进行控制等，成本较高。 另外一种是百度了一下，发现有个开源的插件可以解决此问题：http://css3pie.com/ 使用方法很简单，下载了之后直接引用...
《Web 前端开发精华文章推荐》2014年第9期（总第30期）和大家见面了。梦想天空博客关注 前端开发 技术，分享各类能够提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，推荐优秀的 网页设计 案例，共享精美的设计素材和优秀的 Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。 文章来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
css3是移动Web开发的主要技术之一。当前，CSS3技术最适合在移动Web开发中使用的特性有增强的选择器、阴影、强大的背景设置 、圆角边框 接下来我们主要讲解增强型的选择器，主要分两种，属性选择器和伪类选择器 1、属性选择器 1.1完全匹配选择器 语法：[attribute=value] 属性匹配选择器[id=article]{ color:red;} 1.2包含匹配选择器 语法：[attribute*=value] 属性匹配选择器属性匹配选择器属性匹配选择器[id*=arti...
下面我们从3个方面开始介绍： 1、scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数 Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。 Css代码 transform:scale(2,2.5); 2、 scaleX() 元素只在X轴（水平方向）缩放元素。 默认值是1，...
CSS 字体属性定义文本的（如斜体）和变形（如小型大写字母） 代码整理自w3school：http://www.w3school.com.cn body {font-family:sans-serif;font-size:100%} h1 {font-family:monospace;} h3 {font-family:Georgia,serif;} p.italicFont {font-style:italic;} p.obliqueFont {font-style:oblique;} p.normalVariant {font-variant:normal} p.smallCaps {font-variant: small-caps} p.bold100{f...
如果网页设计和开人员采用了正确的工具集，并基于一个灵活的网格架构，以及能够把响应图像应用到到设计之中，那么创建一个具备响应式的网站并不一定是一项艰巨的任务。在这篇文章中，我们为您呈现了一组优秀的网格工具清单。如果我们错过了任何没有列出在这个清单上的东西，请分享给我们。 Fitgrd Fitgrd 这个网格系统是建立响应式网站的坚实的基础。它是专用于快速制作原型，而且在生产环境中运行良好。该网格系统是完...
JQ中的 .css()有三种使用方法： $(#p).css(width); 取得ID为ｐ的样式属性的width值;等同 return width $(#p).css(width,100px); 设置ID为ｐ的样式属性 width : 100px；（单个设置） $(#p).css({width:100px,height:100px }); 设置ID为ｐ的样式属性 width : 100px；height: 100px;（多个设置）
准备讲一个布局系列由浅入深，先讲解一些基本属性理论，在通过实例与理论相结合，争取讲明白讲清楚。欢迎大家一起讨论，一起学习一起奋斗。废话少说，先去官方网站看看是怎么解释定义float浮动。 官方定义： float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确...
上下两栏布局，这个在做信息系统的时候我感觉用得比较多。结合前面布局的介绍，改天给介绍一个稍微比较复杂的真实信息系统布局。请看效果图： 要点：最顶一栏给其固定高度，下面一栏高宽度让其自撑，如果该栏的内容溢出，设置overflow属性为auto，允许其出现滚动条。下面一栏必须给设置绝对定位，他top的距离就是等于顶栏的高度且bottom等于0，就会自动拉升高度。 *{margin: 0;padding: 0;}html, body{height: 100%;} ...
transform-origin属性平时似乎用得很少，它决定了变换时依赖的原点。基本的属性特性可以参考CSS手册。 如果在H5动画项目中，用到旋转的话，它还是不能小觑的。 假如我们做一个秋千效果 其实在切图的时候就要注意了，但是乍一眼看过去，不少人可能会误以为是对整个区域图层进行旋转，或许会写成transform-origin:center top; 实际上正确的旋转点的是线的顶端点。 那么如果按这样切图的话，旋转的位置就是目前位置的...
今天讲讲上下两栏布局的应用场景，在此之前稍微提一下box-sizing这个属性。该属性有三个值分别为content-box|border-box|inherit。 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 通常我们设置的高宽度其实是指内容的高宽度，是没有将边框的高宽度算在内的。如果设置box-sizing：content-box就是只包含盒子内容的高宽度，边框的高宽不包含在内，默认就是这种算法（图1）。如果想将边框包含在我们设置的高宽度...
《css知多少》系列就此完结了。常来光顾的朋友可能会觉得突然：css的知识点还有很多，怎么突然就完了，还没讲完呢？这样说是对的。不过凡事都有一个定位，如果盲目求多，定位模糊，那样就没有目的没有方向了。 我的身份不是前端开发人员，而是产品经理。我规划的产品是一款项目管理软件，我也是一个PMP。我深知一个项目一定要有目标、范围、进度和质量要求。一旦达到，项目即可结束，准备下一个项目的启动。我接下来，要继续...
建设吐槽网站（一）之网站规划 灵感来源于一个中午，突然想到学校里有论坛，有小型的社区，但是呢缺少一个可以吐槽学校并且让学校的领导们（比如，院长。。）们看到的平台，实际上是能够更好的解决童鞋们生活学校中出现的问题，所以就有了以下的内容，客官，请跟我来....... 先进行网站的策划，大致如下： 除了上素的内容外，还要有管理员，可以进行删帖，有敏感字屏蔽，删除内容等操作，每...
本文由 伯乐在线 - J.c 翻译，sunbiaobiao 校稿。未经许可，禁止转载！英文出处：www.deanhume.com。欢迎加入翻译小组。 最近，我参加了在伦敦举办的Facebook移动开发者大会。在那天期间，有很多的交谈，但真正让我关注的是一场关于性能的，名为“让m.facebook.com更快”的交流会，它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。 Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome ...
一般在做产品页面的时候，如果产品图片宽高定死的话，有的图片就会变形，如果把宽给个最大宽，高自适应的话有的图又会由于是个长方形高超出了容器，这样就不得不截掉一部分图。于是就想着，首先不管图片是个什么比例，不管它是宽远大于高或者高远大于宽，统一设置最大的宽高值，不让它超出容器，并且这样处理图片不会变形。接下来想怎么处理图片大小不定，在固定容器中水平垂直居中的问题。 参考链接： 张鑫旭：大小不固定的图...