代码改变世界

随笔分类 - CSS+XHTML

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

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

8月前端 tips

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

margin-top的bug

2010-04-08 10:30 by 一醉而过, 2765 阅读, 收藏, 编辑
摘要:今天在做登录页面的时候发现个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 一醉而过, 154 阅读, 收藏, 编辑
摘要:Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->W3C最近宣布将于今年年底解散XTHML2工作组。一石激起千层浪,很多误解和谣言四起,江湖一片血雨腥风,搞得网页设计师人人自危,好像世界末日即将到来。其实,这只是个误解,看完下面的这幅漫画,大家就了解了。... 阅读全文

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

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

关于前端的那点事儿

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

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

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

深更半夜话(html)语义

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

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

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

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

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

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

2009-05-23 19:12 by 一醉而过, 709 阅读, 收藏, 编辑
摘要:按钮点击时的虚线框真是让人难受无论是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 一醉而过, 184 阅读, 收藏, 编辑
摘要:最近公司项目中遇到了一些以前不怎么熟悉的问题和一些莫名其妙的问题整理出来,以备不时之需1./* 溢出隐藏 */overflow :hidden;text-overflow: ellipsis ; /*clip是简单的裁切,ellipsis以省略号显示*/white-space :nowrap; /*控制内容不换行*/2./*ie6下的层背景滤镜问题(ie6下不显示,其他都显示,把height改成固... 阅读全文

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

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

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

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

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

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

CSS中clip属性探究

2009-03-24 10:28 by 一醉而过, 4932 阅读, 收藏, 编辑
摘要:注:部分内容来源于互联网 基础语法: 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 一醉而过, 2603 阅读, 收藏, 编辑
摘要: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... 阅读全文

条件CSS的高级用法

2009-03-15 11:09 by 一醉而过, 167 阅读, 收藏, 编辑
摘要:介绍 条件CSS(Conditional-CSS)的开发源于在多数浏览器上修正 CSS 渲染 bug 的需求,以确保尽量多的用户看到正确的网站设计。核心思想建立在 Internet Explorer 上发现的 条件注释 方法,并扩展到包含其他的浏览器,而且将条件声明内联到 CSS 定义里面。 条件CSS(Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣,而是对用户浏览器使用的渲染引... 阅读全文

background-position 之剑走偏锋

2009-03-10 14:44 by 一醉而过, 5757 阅读, 收藏, 编辑
摘要:在设置background-image属性时,经常会遇到一个background-position ;一直不怎么会用,今天有空研究下. 版本:CSS1 兼容性:IE4+ NS6+ 继承性:无 语法: background-position : length || length background-position : position || position 取值: length... 阅读全文

CSS浏览器兼容问题葵花宝典(未必自宫,慎重!)

2009-03-07 08:52 by 一醉而过, 604 阅读, 收藏, 编辑
摘要:1、发用!important解决IE和Mozilla的布局差别!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义,例如,我们定义这样一个样式:.colortest{ border:20pxsolid#60A179!important; b... 阅读全文

网页切图过程中dic+css命名规则(适合菜鸟)

2009-03-07 08:48 by 一醉而过, 2255 阅读, 收藏, 编辑
摘要:网页切图过程中div+css命名规则 内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner ... 阅读全文

最全的CSS浏览器兼容问题整理

2009-03-07 08:28 by 一醉而过, 154 阅读, 收藏, 编辑
摘要:最全的CSS浏览器兼容问题整理 从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200p... 阅读全文

个人总结的一些css实用技巧及必须得注意的事项

2009-03-07 08:20 by 一醉而过, 164 阅读, 收藏, 编辑
摘要:个人总结的一些css实用技巧及必须得注意的事项: 1.注释须知:html中注释不能这样写: 代码: 这种写法,FF中会忽略其下面的内容详见:http://www.bluebirdsky.cn/article.asp?id=153. 2.CSS注释切记在/*之后及*/之前空一格,否则在有些语言中会出问题,正确写法: 代码: #div{style}/* 注释前后要空格 */ 3... 阅读全文

目前最全的浏览器/CSS选择器兼容性总结(包括Safari 4 beta)

2009-03-03 11:44 by 一醉而过, 380 阅读, 收藏, 编辑
摘要:2009年2月24日,Safari 4.0 beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3)。不过为了方便大家的工作,下面提供了最新版本的CSS选择器浏览器支持情况,其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estelle Weyl的总结。注: 绿色 / √ 表示目前支持。 橙色/ Δ 表示浏览器部分支持... 阅读全文

如何快速定位页面中复杂 CSS BUG 问题<怿飞,TAOBAO前端开发工程师>

2009-03-03 11:26 by 一醉而过, 288 阅读, 收藏, 编辑
摘要:原文地址:如何快速定位页面中复杂 CSS BUG 问题 相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug 等等。但时常我们也会碰到复杂的 CSS BUG 问题,所谓“复杂”实质是指触发的条件很复杂,而“BUG” 也并非指一定是浏览器的 BUG 。对于此类问题,我们首先要解决的是如何... 阅读全文

渐进增强式布局

2009-03-02 14:47 by 一醉而过, 293 阅读, 收藏, 编辑
摘要:Grids Layout Demo Grids Layout Demo 常用布局 两栏布局 三栏布局 自适应宽度 三栏:.grid-c3main510pxsub190pxextra230px三栏:.grid-c3fmain510pxsub190pxextra230px三栏:.grid-c3emain510pxsub190pxextra230px三栏:.grid-c3dmain5... 阅读全文

CSS中的滑动门技术

2009-03-02 14:36 by 一醉而过, 6326 阅读, 收藏, 编辑
摘要:CSS中的滑动门技术 原文作者:Douglas Bowman 原文出自:A List Apart 中文翻译:54player.com nobita 版权说明:本文中文翻译版权归译者54player.com nobita所有。需要转载发表的,请先与作者联系 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。根据 CSS2.0... 阅读全文

PNG IE6 BUG解决方案

2009-03-02 14:19 by 一醉而过, 305 阅读, 收藏, 编辑
摘要:一:对于直接插入的图片,例如请在中插入以下JS代码,整个页面内的所有直接插入的png图片都可以实现透明: 二:对于使用css的background属性: 只能用CSS的Alpha滤镜解决,但是会发现在FF下不会出现背景,是由于FF不支持该滤镜的,所以利用CSS的hack区分属性,来解决同时为了节省代码,只在#main_pic中写公共属性 ... 阅读全文

跟我学DIV+CSS(3)

2009-02-24 09:36 by 一醉而过, 308 阅读, 收藏, 编辑
摘要:整理者:猪头 交流QQ:117376883 UI 交流群:26364378第二章为良好的xhtml而努力在上一章我们对于div+css这种网页制作技术的原理应该有了一个简单的认识,在本章中,我们将学习一些关于xhtml的内容,之所以一直在教程中强调xhtml,是因为在html向xml过度过程中使用的就是xhtml(可以查阅web标准化的相关知识),和电脑打交到的人要时刻跟着潮流前进,为所要书写的页... 阅读全文

跟我学习DIV+CSS(2)

2009-02-24 09:34 by 一醉而过, 273 阅读, 收藏, 编辑
摘要:整理者:猪头 交流QQ:117376883第一章:从那里开始?万事开头难,从哪里作为我的教程的开始呢?在写第一章几个字之前,我还在思考,正好想到那天我徒弟问我的一个问题,我就从这里开始我的教程吧! 那天徒弟问我:&lt;div class= &#8220;b&#8221;&gt;&lt;/div&gt;到底是怎么在样式表中控制显示样式的呢?我当时没有直接回答她,而是直接对她说 : &#8220;你... 阅读全文

跟我学习DIV+CSS(1)

2009-02-24 09:33 by 一醉而过, 384 阅读, 收藏, 编辑
摘要:整理者:猪头 交流QQ:117376883写在前面的话:离开了江西先锋软件股份有限公司,我立志为成长为一名出色的UI设计师而努力奋斗,加入新的公司,开始了自己新的生活,一不小心,我却成为了一个前台开发的人,div+css成为我每天工作所必须面对的内容。两个月前,关于网页制作中的各种术语:div,css,xhtml&#8230;&#8230;我还不是很了解,今天,我通过自己的努力,终于可以在各种论坛... 阅读全文