沫鱼 - 博客园

2012年5月23日

摘要：开始研究响应式web设计，CSS3 Media Queries是入门。Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，Media Queries是如何工作的？两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：意思是当屏幕的宽度大于等于400px的时候，应用styleA.css在media属性里：screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定阅读全文

posted @ 2012-05-23 18:59 沫鱼阅读(101482) 评论(9) 推荐(30) 编辑

display:inline-block的深入理解

摘要：在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、Safari。但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（在 Firefox3 版本中将会支持 display:inline-block）。不过 Firefox 下却有私有属性 -moz-inlin 阅读全文

posted @ 2012-05-23 11:46 沫鱼阅读(1146) 评论(2) 推荐(0) 编辑

2012年5月22日

淘宝和QQ空间顶部工具栏三角形箭头的实现方式

摘要：之前转载过用边框实现三角形的技巧，早上重新看了一下淘宝跟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 阅读全文

posted @ 2012-05-22 18:34 沫鱼阅读(1559) 评论(0) 推荐(1) 编辑

2012年5月19日

页面前端的水有多深？再议页面开发

摘要：转自网易邮箱前端技术中心：http://ntesmailfetc.blog.163.com/blog/static/206287061201241692848617/但凡从事互联网的人基本都会写几行html，用过Word的人用Dreamweaver也能做出规整的页面，所以大部分人会很自然地认为“页面的开发没什么技术含量，很简单”。不仅有这种普遍的认知，对从业者来说也有很多疑惑：做页面前端实现，没问题；兼容性，小case；图片集成，一直都在用……还能有什么问题？瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢？网易邮箱前端技术中心也设立好几年了，似乎有着讨论不阅读全文

posted @ 2012-05-19 15:35 沫鱼阅读(734) 评论(0) 推荐(0) 编辑

2012年5月17日

QQ音乐页面css3动画的应用

摘要：姐不太道德地把它的代码扒了下来，放在这里慢慢研究<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><t 阅读全文

posted @ 2012-05-17 12:12 沫鱼阅读(727) 评论(1) 推荐(0) 编辑

CSS3transition实现的简单动画菜单

摘要：转自：http://www.rainweb.cn/article/css3-transition-menu-a.htmltransition是css3中新添加的特性，在W3C标准中是这样描述的：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。”有了transition一切动画都变得如此简单。在今天的小贴士,我们将向您展示如何让你的菜单添加一个整洁的悬浮效果。查看demo主要就是设置图片的属性left 从0过度到300，透明度从0变到1：.mh 阅读全文

posted @ 2012-05-17 11:30 沫鱼阅读(808) 评论(0) 推荐(0) 编辑

2012年5月14日

[转]那些年我们一起清除过的浮动

摘要：浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局；恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动还是闭合浮动（Enclosing float or Clearing float）？很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。1 阅读全文

posted @ 2012-05-14 15:06 沫鱼阅读(15898) 评论(6) 推荐(14) 编辑

2012年5月3日

chrome/FF/safari浏览器下input和textarea的默认样式outline和resize

摘要： 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 阅读全文

posted @ 2012-05-03 18:09 沫鱼阅读(2952) 评论(0) 推荐(0) 编辑

2012年4月20日

JS过滤空格

摘要： 1、过滤字符串两边的空格 str = $.trim(str)2、过滤所有空格 str = str.replace(/ /g,'') 阅读全文

posted @ 2012-04-20 14:57 沫鱼阅读(18425) 评论(1) 推荐(2) 编辑

我想知道

摘要：我想知道我不关心你以什么为生。我关心的是你因为什么而痛苦，想知道你是否敢于去梦想，满足心灵的渴望。我不在乎你的年龄。我在乎的是你是否甘当傻瓜去追求爱、追求梦想和经历生活的惊险刺激。是什么磨圆了你的棱角我不感兴趣。我想知道的是你是否触碰过自己内心的忧伤，是否因为生活的挫折而变得豁达，还是因为害怕遭受更多的痛苦而变得无助、紧闭心扉。我想知道你是否能痛苦着我的痛苦而不是避开它，躲着它。我想知道你似乎否能因为我的欢乐而欢乐，是否能狂舞一曲，让快乐溢满你的指尖和脚趾，而不是畏畏缩缩地想：要小心翼翼、要现实、要牢记做人的局限。你说的是真是假我不在乎。我想知道你是否为了忠实于自己而敢于拒绝他人，是否敢于承担阅读全文

posted @ 2012-04-20 09:31 沫鱼阅读(307) 评论(0) 推荐(0) 编辑

公告