代码改变世界

随笔分类 - CSS+XHTML

[转]display:inline-block的深入理解

2010-10-27 00:05 by 一醉而过, 723 阅读, 收藏, 编辑
摘要:说明:display:inline-block之前一直没有好好研究,这几天接连遇到这样类似的BUG,于是研究下,网上的主要资料来自圆心的这篇文章《display:inline-block的深入理解》,不过读这篇文章之前最好先读一下《on having layout》对layout有一个深入的了解, 一年后圆心又写了《模拟兼容性的inline-block属性》一文,与此同时口碑网的秦歌也写了《inl... 阅读全文

8月前端 tips

2010-09-29 11:06 by 一醉而过, 965 阅读, 收藏, 编辑
摘要:8.2 - 8.6 104.【JS】获取当前时间的毫秒数可通过以下方法:new Date().getTime(), new Date().valueOf(), +new Date(), new Date() * 1, Date.parse(Date()) … 等等,前四种方法括号内可以带时间的参数,可以返回相应的时间的毫秒数,而最后一个会忽略掉任何参数。推荐看下:http://www.... 阅读全文

三谈Iframe自适应高度[转自口碑网UED博客]

2010-08-04 16:08 by 一醉而过, 2793 阅读, 收藏, 编辑
摘要:[代码]在构建B/S系统界面的时候,经常会遇到主页面index.html中嵌套其他页面的情况 ,虽然已经有的库已经提供了控件(例如jQuery easy UI),但是有时候iframe的使用是不可避免的,这篇文章应该给你一个相对来说比较实用的答案,正象文章所说,互联网上的大部分东西都是垃圾或者是不可相信的!原文有KOUBEI UED 由校 整理!为什么是三谈 为什么是三谈呢?一是因为这真的是一个... 阅读全文

margin-top的bug

2010-04-08 10:30 by 一醉而过, 2979 阅读, 收藏, 编辑
摘要:今天在做登录页面的时候发现个margin-top的bug ;初始代码如下:html:[代码]css:[代码]结果发现IE6.IE7正常,ie8,FF显示错误马上去以margin-top的bug 为关键字百度,结果发现这个BUG是存在的,见margin-top的bug症结:当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。解决方案... 阅读全文

漫画:混乱的标记语言XHTML2/HTML5

2009-10-11 21:54 by 一醉而过, 196 阅读, 收藏, 编辑
摘要:Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--W3C最近宣布将于今年年底解散XTHML2工作组。一石激起千层浪,很多误解和谣言四起,江湖一片血雨腥风,搞得网页设计师人人自危,好像世界末日即将到来。其实,这只是个误解,看完下面的这幅漫画,大家就了解了。... 阅读全文

面向对象的CSS--OOCSS [转]

2009-10-11 20:23 by 一醉而过, 1631 阅读, 收藏, 编辑
摘要:新版 OOCSS 请关注 http://www.oocss.cc/ 时下流行面向对象,那么有没有可能把样式表也面向对象一下呢,将现在的CSS(Cascading Style Sheets层叠样式表)进化一下,演变成面向对象的样式表,给套了个概念上去,以下叫“OOCSS”,即Object Oriented Cascading Style Sheets。◆ 为什么会... 阅读全文

关于前端的那点事儿

2009-08-16 13:16 by 一醉而过, 2074 阅读, 收藏, 编辑
摘要:Web前端都有些什么职位?那么,Web前端这样一个工作范畴里面都有一些什么样的职位呢?我们先从几个人的小作坊说起,这种小作坊里面,基本上有一个人负责页面的设计,然后把页面“切”出来,然后有一个专门的人负责套程序。在这样的公司里面,Web前端其实是由网页设计人员来兼作的,而这个职位一般叫做网页设计师或者叫做网站美工。随着公司规模的扩大,在达到十人以上到三十人左右的时候,网站一... 阅读全文

另辟蹊径解决滑动门的自适应问题

2009-08-16 11:56 by 一醉而过, 418 阅读, 收藏, 编辑
摘要:为了更好的理解本文,你需要阅读前确保了解了以下内容什么是滑动门?滑动门的原理是什么?参考阅读: 《CSS中的滑动门技术》《100%点击区的滑动门 》 现存的滑动门宽度自适应的主要原理是什么?这个方案的最大问题是什么?作者简要回答:1. 滑动门在CSS中,一个经常被人们讨论的先进技术就是背景图片的层叠,并允许他们在彼此之上进行滑动,以创造一种特殊效果(圆角),这就是滑动门。2. 滑动门的原理滑动门的... 阅读全文

深更半夜话(html)语义

2009-07-26 01:09 by 一醉而过, 3309 阅读, 收藏, 编辑
摘要:引子:近日杭州高温,不过受日食影响下了大雨(具体是不是,我也不知道),气温下降,难得一个周末还加了一天班,晚上和一同学探讨html+css,他刚学,从他编写的html上就可以看出来,过分使用diV标签,html的语义化很不好,一直都在讨论关于html的语义化的东西,什么是html的语义化?html有什么好处?每个人都有自己的理解,我的博客上没有类似的文章,一直想写,也没有时间,正好,借这个机会完善... 阅读全文

Reset CSS:只选对的,不选"贵"的

2009-07-15 14:19 by 一醉而过, 39842 阅读, 收藏, 编辑
摘要:先耐人深思,令人回味下:[代码]关于Reset CSS的类似问题还有很多,Reset.css极其简单又极其复杂,本文之所以叫做<<Reset CSS:只选对的,不选"贵"的>>,原因是这样的:首先Reset CSS你要找寻适合自己的,适合项目的,这就是只选对的,不选"贵"的,"贵"这里指的是代码的冗余所造成的不必要的浪费。回答我先回答一下上面的四个问题,进而本文逐渐展开。1... 阅读全文

CSS Sprites(CSS图像拼合技术)教程、工具集合

2009-05-29 12:09 by 一醉而过, 634 阅读, 收藏, 编辑
摘要:本文出处:http://blog.bingo929.com/css-sprites-css-techniques-tools-tutorials.html今天彬Go将向大家推荐目前为止最全的CSS Sprites(CSS图像拼合技术)技巧、工具和教程集合,该集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术,只不... 阅读全文

快速写出较好CSS的5种方法

2009-05-24 21:09 by 一醉而过, 406 阅读, 收藏, 编辑
摘要:1. Reset真的,要一直使用一个reset,无论是使用Eric Meyer Reset、YUI Reset、或者你自己的定制的reset,一定要使用。这可以简单到仅仅将所有元素中的margin和padding属性去掉:[代码]Eric Meyer和YUI的Resets样式是很棒的,但对我来说,它们走的太远了。我想要你清除所有东西,然后再重新定义元素的许多属性。这就是Eric Meyer所推荐的... 阅读全文

多种方法去除按钮以及链接点击时虚线

2009-05-23 19:12 by 一醉而过, 761 阅读, 收藏, 编辑
摘要:按钮点击时的虚线框真是让人难受无论是a下的还是表单下的搜集整理了一些方法,仁者见仁,js 方法:<a href="#" onFocus="if(this.blur)this.blur()"</a>CSS方法:1.a { outline:none;/*我是秒杀火狐浏览器里面的虚线框的*/ }2.无意中饭后逛荡蓝色,看见一老兄写的: " style="COLOR: #0000ff"... 阅读全文

最近整理的乱七八糟的东东

2009-05-23 18:33 by 一醉而过, 230 阅读, 收藏, 编辑
摘要:最近公司项目中遇到了一些以前不怎么熟悉的问题和一些莫名其妙的问题整理出来,以备不时之需1./* 溢出隐藏 */overflow :hidden;text-overflow: ellipsis ; /*clip是简单的裁切,ellipsis以省略号显示*/white-space :nowrap; /*控制内容不换行*/2./*ie6下的层背景滤镜问题(ie6下不显示,其他都显示,把height改成固... 阅读全文

整理及优化CSS代码的七个原则

2009-04-22 21:58 by 一醉而过, 194 阅读, 收藏, 编辑
摘要:英文原文:http://www.smashingmagazine.com/2008/08/18/ 译文原文:http://blog.bingo929.com/7-principles-optimized-css.html 作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML、CSS、Javacript、Flash和图片)尽量不要超过30KB的大小,随着互联网的日... 阅读全文

XPath详解,总结

2009-04-17 19:33 by 一醉而过, 189 阅读, 收藏, 编辑
摘要:经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下。 在这篇文章中你将能学习到: XPath简介XPath 路径表达式详解XPath在DOM,XSLT及XQuery中的应用 XPath简介 XPath是W3C的一个标准。它最主要的目的是为了在XML1.0或XML1.1文档节点... 阅读全文

浅析网页Transitional和Strict的文档声明的区别

2009-04-17 10:59 by 一醉而过, 567 阅读, 收藏, 编辑
摘要:在推广Web标准的今天,那些崇尚Web标准的人经常说XHTML比HTML更加严格,当然从某种意义上说是的,比如它要求所有的标签关闭并且所有的属性都用引号。但其实XHTML 1.0还分两种(加上Frameset DOCTYPE的话算三种,本文不讨论),Transitional(过渡型)和Strict(严格)DOCTYPEs。并且HTML 4.01也有同样的文档声明。从字面上就可以看出来意思:Tran... 阅读全文

如何应对实际开发中的CSS bug

2009-03-26 20:57 by 一醉而过, 254 阅读, 收藏, 编辑
摘要:淘宝的怿飞在“如何快速定位页面中复杂 CSS BUG 问题” 中总结了他解决css bug的步骤。做前端开发这么长时间确实也遇到了不少 css BUG,今天有时间 ,把他们整理出来:首先的感受是在实际开发当中,依据合理的语义化,恰当的文档流,按照标准化所生产出来的页面,在几大主流浏览器标准的渲染下,一般是不需要有太多的hack来解决兼容性的问题。同样包括那非常有脾气的IE 6。1.合理的语义化:所... 阅读全文

CSS中clip属性探究

2009-03-24 10:28 by 一醉而过, 4989 阅读, 收藏, 编辑
摘要:注:部分内容来源于互联网 基础语法: clip : auto | rect ( number number number number ) 取值: auto : 默认值。对象无剪切 rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪... 阅读全文

CSS Specificity--CSS特性、权重、优先级---CSS specificity规则、算法及实例分析

2009-03-16 20:57 by 一醉而过, 2781 阅读, 收藏, 编辑
摘要:CSS Specificity As mentioned above, CSS styles follow an order of specificity and point values to determine(确定) when styles override(覆盖) one another or take precedence(优先). Nettuts recently had a n... 阅读全文