随笔分类 -  CSS(3)

摘要：使用CSS3技术绘制心形头像 阅读全文

摘要：在前端开发过程中，经常要对元素进行居中设置。一般有水平居中，和垂直居中。一般设置水平居中简单。基本是margin:0 auto，就可以了。但是垂直居中，我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用。 目前通用的解决办法是，使用绝对定位，然后设置left和top为50%。然后通过margin来设置。下面具体代码演示了一个简单的登录页面，然后使登录界面水平居中和垂... 阅读全文

摘要：项目最终效果如下图所示： 可以看出2个tab之间有一天分割线，这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最后一个需要隐藏，否则效果不是很理想。 最原始的写法是： 1: #tabnav li:last-child 2: { 3: border-righ 阅读全文

摘要：项目中使用的是DIV+CSS布局，有一个页面是同事完成的，这几天他请假有事。项目发现一个UI Bug。在IE7下，某一个Div的padding-top会让整个div产生padding-bottom样式。在IE8/9、Firefox、Chrome下都是OK。 通过搜索发现是发现问题的答案： 链接地址是 阅读全文

摘要：最近2周，公司的测试PM带领我们使用HTML5 Canvas为公司的大屏幕制作一个展示公司历史和发展的apps。主要技术是HTML5 Canvas和Javascript。可能大家觉得Canvas标签就几个api，完成不了什么工作。其实如果你对Javascript掌握的比较好，是可以用Javascript加上Canvas制作出像Flash动画的效果。当然我们apps功能相对简单。昨天收到了图灵社区发了一封订阅邮件，我随意点击进去，然后搜索了一席最新新翻译或出的HTML5书籍。国内作者翻译了一本《HTML5 Canvas基础教程》，原名：《Foundation HTML5 Canvas: Fo.. 阅读全文

摘要：Web开发，除了后台开发和数据开发，很大一块是前端开发。前端开发中使用最大的技术是：HTML(现在也有项目开始使用HTML5了，比如沪江英语的听力曲线使用html5 canvas绘制的)，CSS（这个也有一个新版本，CSS3.0。很多应用出现圆角效果，估计都使用到了3.0的新特性），Javascript（其实这个也有版本的哦！盛大的权一大师就在研究ECMAScript5了），一个javascript框架，比如说jQuery,Dojo,YUI等等。 主要讲解CSS性能调优，内容涉及一下几个方面。1.Style标签的调优2.特殊CSS样式的使用3.CSS的缩写4.CSS的声明(省略)5.CS... 阅读全文