05 2012 档案
摘要:开始研究响应式web设计,CSS3 Media Queries是入门。Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。那么,Media Queries是如何工作的?两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:意思是当屏幕的宽度大于等于400px的时候,应用styleA.css在media属性里:screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定
阅读全文
摘要:在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有:Opera、Safari。但很遗憾,最流行的 IE 和 Firefox 却不支持这个属性(在 Firefox3 版本中将会支持 display:inline-block)。不过 Firefox 下却有私有属性 -moz-inlin
阅读全文
摘要:之前转载过用边框实现三角形的技巧,早上重新看了一下淘宝跟QQ空间顶部工具栏的三角形实现方式,并记录下来效果图:<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>.qq_div{ width: 100px; height: 30px; margin: auto; text-align: center; padding: 50px; background:#50803F; color: #FFF
阅读全文
摘要:转自网易邮箱前端技术中心:http://ntesmailfetc.blog.163.com/blog/static/206287061201241692848617/但凡从事互联网的人基本都会写几行html,用过Word的人用Dreamweaver也能做出规整的页面,所以大部分人会很自然地认为“页面 的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题;兼容性,小case;图片集成,一直都在 用……还能有什么问题?瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢?网易邮箱前端技术中心也设立好几年了,似乎有 着讨论不
阅读全文
摘要:姐不太道德地把它的代码扒了下来,放在这里慢慢研究<!DOCTYPE html><!-- saved from url=(0036)http://y.qq.com/vip/promote_yearvip/ --><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><t
阅读全文
摘要:转自:http://www.rainweb.cn/article/css3-transition-menu-a.htmltransition是css3中新添加的特性,在W3C标准中是这样描述 的:“css的transition允许css的属性值在一定的时间内从 一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。查看demo主要就是设置图片的属性left 从0过度到300,透明度从0变到1:.mh
阅读全文
摘要:浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问,浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)?很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。1
阅读全文
摘要:outline:input和textarea的默认焦点样式语法:outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit相关属性:outline-style , outline-width , outline-offset , outline-color<outline-color>: 指定轮廓边框颜色。参见outline-color <outline-style>: 指定轮廓边框轮廓。参见outline-style <outline-wi
阅读全文