摘要：
玩WEB重构的朋友相信都有一个同样的苦恼，那就是由于浏览器版本的不同，对CSS里某些元素的解释也不一样，才子当然也碰到同样的问题，也收集了一些解决方法，才子之前贴过两个针对浏览器版本不同而选择不同CSS的代码，有兴趣的朋友自己找找吧。其实我们还可以利用条件注释的方法来达到类似的目的，什么是条件注释，才子也在此简单介绍一下，无非就是一些if判断啦，呵呵，但这些判断不是在脚本里执行的，而是直接在htm... 阅读全文
posted @ 2009-05-05 13:18
Gre_Jee.Mr
阅读(291)
评论(0)
推荐(0)
摘要：
有时候，我们用CSS创建一个高度自适应布局，如何保证页脚（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么完美，经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法，兼容IE5.0+，Opera 8.5+，Firefox 1.5+。下面我们看步骤：1、为了让浏览器识别高度100%我们需要先给 html 和 b... 阅读全文
posted @ 2009-05-05 13:16
Gre_Jee.Mr
阅读(242)
评论(0)
推荐(0)
摘要：
语法：STYLE="filter:filtername(fparameter1, fparameter2...)" （Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数） 滤镜说明： alpha：设置透明层次 blur：创建高速度移动效果，即模糊效果 chroma：制作专用颜色透明 DropShadow：创建对象的固定影子 FlipH：创建水... 阅读全文
posted @ 2009-05-05 13:14
Gre_Jee.Mr
阅读(218)
评论(0)
推荐(0)
摘要：
自动居中代码：margin: 0 out; IE和火狐、网景浏览器通过测试。margin在中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性。一、margin的基本特性margin属性包括margin-top,margin-right,margin-bottom,margin-left,margin，可以用来设置box的margin area。属性... 阅读全文
posted @ 2009-05-05 12:58
Gre_Jee.Mr
阅读(1153)
评论(0)
推荐(0)
摘要：
js文件中嵌套另外一个js文件用 <%= include 'HEADER' %>//这里主要包括描述文件，比如作者之类的 <%= include 'base.js', 'string.js' %>//一次可以包括多个js文件 嵌套失败？ css文件中嵌套另外一个文件 @import url("/uuzone/css/htmlarea.css"); //css嵌套的时候如果有... 阅读全文
posted @ 2009-05-05 12:57
Gre_Jee.Mr
阅读(252)
评论(0)
推荐(0)
摘要：
CSS的常用技巧放送——使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二.明确定义单位，除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=1... 阅读全文
posted @ 2009-05-05 12:56
Gre_Jee.Mr
阅读(193)
评论(0)
推荐(0)
摘要：
初学div+css网页布局的设计者常常会被一个问题困扰着。 在IE和其他(Mozilla、Opera等)浏览器里显示的效果常常会偏差2px。 这是因为IE对盒之间距离的解释的bug造成的。一个技巧提示帮我们找到了解决的方法：用!important。 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。 语法格式{ sRule!important }，即写在定义的最后面，... 阅读全文
posted @ 2009-05-05 12:55
Gre_Jee.Mr
阅读(218)
评论(0)
推荐(0)
摘要：
一个客户的旧网站需要更新，使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我曾经使用的很多编程惯例已经不再适用，特别是从可访问性上来讲。我曾经使用绝对的字体大小，固定的页面宽度和表格来做版面设计和空间分配。 像那时建构的很多网站一样，我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本。它没有使用任何CSS的更加强有力... 阅读全文
posted @ 2009-05-05 12:54
Gre_Jee.Mr
阅读(176)
评论(0)
推荐(0)
摘要：
IE vs FFCSS 兼容要点：DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后, div 会增加 he... 阅读全文
posted @ 2009-05-05 12:53
Gre_Jee.Mr
阅读(287)
评论(0)
推荐(0)
摘要：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con... 阅读全文
posted @ 2009-05-05 12:52
Gre_Jee.Mr
阅读(246)
评论(0)
推荐(0)
摘要：
初学div+css网页布局的设计者常常会被一个问题困扰着。 在IE和其他(Mozilla、Opera等)浏览器里显示的效果常常会偏差2px。 这是因为IE对盒之间距离的解释的bug造成的。一个技巧提示帮我们找到了解决的方法：用!important。 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。 语法格式{ sRule!important }，即写在定义的最后面... 阅读全文
posted @ 2009-05-05 12:51
Gre_Jee.Mr
阅读(231)
评论(0)
推荐(0)
摘要：
效果如图: 以下是代码： Nice and Free CSS Template 7 MENU #left { ... 阅读全文
posted @ 2009-05-05 12:48
Gre_Jee.Mr
阅读(641)
评论(2)
推荐(0)
摘要：
来看一个经典的三栏布局： 从内容出发（渐进增强的核心思想），一份合理的HTML结构如下： main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。 写好上面的代码后，我们来看看如何实现三栏布局。（书写HT... 阅读全文
posted @ 2009-05-05 12:45
Gre_Jee.Mr
阅读(255)
评论(0)
推荐(0)
摘要：
栅格系统的形成 1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马... 阅读全文
posted @ 2009-05-05 12:42
Gre_Jee.Mr
阅读(243)
评论(0)
推荐(0)
摘要：
以前看过一些类似的文章，但这些文章文字在理论上阐述得比较多，没有从技术角度来分析和实现滑动门效果，前段时间心血来潮对此作了一番专门的研究，这里就把我的所得奉献给大家。 一、什么是滑动门技术? 如上图，简单地说，滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这... 阅读全文
posted @ 2009-05-05 12:41
Gre_Jee.Mr
阅读(422)
评论(0)
推荐(0)
摘要：
本人非SEO工程师，写这篇文章的主要目的是自我学习、沉淀积累。以下观点如有错误，请指正！ 百度的收录一般都是让人捉摸不透的，变化无常，人工干扰相当的严重。最近几个月，百度对新站的收录时间越来越长，很多新站干脆不被收录。百度不收录你的网站肯定有它的原因的，只不过最近增加了对新站的考察期，一般考察期为半个月到一个月。真正导致百度收录难的原因，我个人也在学习和总结，目前整理几条原因，与大家分享（新手请先... 阅读全文
posted @ 2009-05-05 12:24
Gre_Jee.Mr
阅读(328)
评论(0)
推荐(0)
摘要：
SEO技术是复杂的，知识体系也是非常庞大的，但是知识相比实战技巧，知识就显得次要了。SEO初学者往往重知识，却往往忽视其中的技巧，实战技巧也绝非短期内可积累到的。本人其实也是一个SEO新手，虽然有6-7年做站经历，实战中，很多理论知识的应用还是很不到位的，所谓说说容易做做难嘛。写本文的目的，是给SEO初学者提供SEO优化简要的工作流程。 先用VISIO画了一个简图： SEO优化工作第一步：关键字... 阅读全文
posted @ 2009-05-05 12:24
Gre_Jee.Mr
阅读(368)
评论(0)
推荐(0)
摘要：
『截字』是网页设计当中最头疼的事情了吧。 当字数超过容量，要么是超出，要么是换行，无论怎样都会破坏布局。要避免出现这种情况，就必须进行截字。截字的操作在前后端都可以做，也都应该做。其原因是无论那种截字，都会漏洞，所以双保险比较好。 先简单说一下后台程序截字会出现的问题。 按字符数来截字的方法是错误。因为英文字母会比中文汉字要短，“超长的标题”就比“title”要长。 按字节数来截... 阅读全文
posted @ 2009-05-05 12:17
Gre_Jee.Mr
阅读(244)
评论(0)
推荐(0)
摘要：
这是去年在复习HTML标签的时候顺便制作的一个文档，里面包含了(几乎)所有的HTML标签。一方面是作为一个归纳，可以通过这个看到哪些其实可以用但是被我们忽略掉的标签，另一方面也是用来测试一些对HTML定义默认样式的样式表，可以把你自己定义的默认样式表放进去测试一下，看看是不是所有的HTML标签都定义到了。 当前版本号是1.2。全部代码在下面的文字框内。也可以点此处下载该htm文件。 HTM... 阅读全文
posted @ 2009-05-05 11:59
Gre_Jee.Mr
阅读(531)
评论(0)
推荐(0)
摘要：
“吊扇”这个东西现在也渐渐少看到了。我前几天望着天花板发呆的时候忽然注意到吊扇上的一个设计。先拍下来给大家看看（手机拍的，效果不好，将就看吧～）： 注意中间那个亮亮的螺旋图案。是不是经常在各种吊扇上看到？所以为什么都用这个螺旋的图案放在吊扇的中间呢？ 首先，吊扇是要转的，如果放一朵花在中间，转起来就看不到了。所以第一个结论是：装饰图案一定要在产品使用的时候也能很好的表现。有一个很常见的例子便是... 阅读全文
posted @ 2009-05-05 11:58
Gre_Jee.Mr
阅读(353)
评论(0)
推荐(0)
摘要：
最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。 vertical-align的值有点多，包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）。我先给大家看一个我觉得最夸张的值：bottom。代码如下... 阅读全文
posted @ 2009-05-05 11:56
Gre_Jee.Mr
阅读(263)
评论(0)
推荐(0)
摘要：
拿到IE 8 beta 2的 Search Partner Build Invitation。于是下午花了点时间先在网上搜寻了一下关于IE 8对CSS的支持，以及如何对它做Hack。 我是个懒人，最不喜欢去记那些复杂的hack，所以总是希望能找到一个“银弹”Hack，也就是“能搞定一切的通用方法”。下面是我能找到的最好的一个： .indicator{ background: red; ... 阅读全文
posted @ 2009-05-05 11:54
Gre_Jee.Mr
阅读(195)
评论(0)
推荐(0)
摘要：
CSS优先级的知识大家应该都比较了解了（如果不了解可以参看《详解CSS的优先权》）。但是，注意哦，这只是W3C的CSS2.1规范自己声称的。而事实上，确实有“极少数的浏览器”并不一定按照这个规则来办。这个“极少数浏览器”我就不点名了哈。 今天介绍一个最简单的。 div.colorful {color: red;} div .colorful {color: green;} 按照CSS2.1规范里... 阅读全文
posted @ 2009-05-05 11:51
Gre_Jee.Mr
阅读(151)
评论(0)
推荐(0)
摘要：
IE里面关于CSS优先级的bug其实挺多，所以这里还得来个第二篇。可预见的还有个第三篇，大家耐心。 这次讲的是有关链接伪元素的。CSS2.1规范里有明确的提到，类名和伪元素的个数是合并在一起计算的。换句话说，:hover的优先级，应该和如.highlight一样高。但是在IE 6里并不是这样的哦。看下面两个定义 a:hover{ /* 优先级 [0,1,1] */ color: red; ... 阅读全文
posted @ 2009-05-05 11:51
Gre_Jee.Mr
阅读(332)
评论(0)
推荐(0)
摘要：
.orange_link .orange_link .orange_link a { color: orange; } .orange_link .orange_link a { color: orange;} a:hover{ color: red;} .orange_link a { color: orange;} 根据上次的结论：在IE6里，“a:hover”的优先级比“.orange_l... 阅读全文
posted @ 2009-05-05 11:50
Gre_Jee.Mr
阅读(388)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2009-05-05 11:45
Gre_Jee.Mr
阅读(181)
评论(0)
推荐(0)
摘要：
图形化按钮，就类似这个样子的： 当然，它其实就是一张图片而已。这样做纯粹是为了好看。这里探讨的不是怎么设计这种按钮，而是怎么在网页里把它做出来。这里要提几个要求： A. 语义化。如果这个按钮叫“完成注册”，就要在HTML中写出这四个字，以保证只读HTML的情况下也知道这个按钮是什么文字。 B. display:inline。用display:block可以很容易的调整大小。但是如果一横排并列两个... 阅读全文
posted @ 2009-05-05 11:44
Gre_Jee.Mr
阅读(214)
评论(0)
推荐(0)
摘要：
阅读全文
posted @ 2009-05-05 11:41
Gre_Jee.Mr
阅读(131)
评论(0)
推荐(0)
摘要：
December2008 之前有要求我多写点CSS方面的，那就写吧。因为习惯其实是会变的，所以只能写“最近”的。这些习惯都跟技术无关，如果不遵守，也不会出错。但是我觉得良好的习惯会体现一个人的素质。 1. 用class_name方式写类名。以前喜欢用class-name写，不过好像两样也没什么差别。但我比较反对用className写类名，因为始终对浏览器大小写敏感的问题抱有怀疑态度。但是id我会... 阅读全文
posted @ 2009-05-05 11:39
Gre_Jee.Mr
阅读(219)
评论(0)
推荐(0)
摘要：
坦率的说，我写CSS时，有至少1/4的时间是在纠结选择符该如何命名。随意的命名，会让你陷入尴尬。 举个例子，我们需要在一段文字里将某些词标红。所以为此建了一个.red { color: red; }。结果产品经理觉得，红色太刺眼了，改成橘色比较好吧。这下头大啦，难道写成.red { color: orange; }么？要不然就是把HTML里的每个class="red"改成class="orange... 阅读全文
posted @ 2009-05-05 11:34
Gre_Jee.Mr
阅读(303)
评论(0)
推荐(0)
摘要：
body {font-family: Arial, sans-serif; } 这是我迄今发现的最好的全局字体解决方案。当然，所谓“最好”，也只是基于我个人的评判标准。所以我还是得分析一下其他的写法有什么缺点，最后再总结这个写法的特点。 body {font-family: "宋体", sans-serif; } 这个写法可能的缺点在于： 1. 宋体在Safari和Vista的IE 7下，看起... 阅读全文
posted @ 2009-05-05 11:29
Gre_Jee.Mr
阅读(239)
评论(0)
推荐(0)
摘要：
对于从未声明过的对象，如果尝试给它赋值，会隐式的将它声明为全局对象。比如： (function() { s = 'abc'; })(); alert(s); //会弹出 abc 如果尝试读一个未声明的对象，JS会报错。比如： alert(a); //不会弹出对话框，会报错 这个结论是犀牛书中所写。但是有意思的是，在IE里，如果尝试读一个未声明的对象，并不会报错，当然也不会继续执行JS。这点其实... 阅读全文
posted @ 2009-05-05 11:28
Gre_Jee.Mr
阅读(270)
评论(0)
推荐(0)
摘要：
我曾经佩服过google ads，它可以再任何网页上出现，而它的样式却不会被寄主网页的CSS给破坏。后来发现它其实是用的iframe，呵呵。 不过倒是引发了我一个思考：如何保证一个区域里的样式不会被外部样式“入侵”。要做到这点其实说难不难，说容易也不太容易。关键是两点： 1. 将该区域里的所有样式全部设为最初的默认值； 2. 保证上面的样式的优先级为最高。 所以呢，下面是一个尚未完善的例子： #c... 阅读全文
posted @ 2009-05-05 11:24
Gre_Jee.Mr
阅读(284)
评论(0)
推荐(0)
摘要：
最正式的方法就是给一个透明图片加样式： 但是这样做有一些缺点： 1. 会多一个图片的请求 2. 众所周知的，内联行里的图片和中文字的底端无法对齐。这个问题的解决办法也有，就是用“vertical-align: -2px;” 强行把图片拉下来一截。 第二种方法： a { display: block; text-indent: -3000px; overflow: hidden; width... 阅读全文
posted @ 2009-05-05 11:23
Gre_Jee.Mr
阅读(221)
评论(0)
推荐(0)
摘要：
淘宝商城的 detail 页面“产品详情”部分是商家自定义区块，曾出现这样一个问题： 品牌：XZX 市场价：145元 颜色：黑色 面料：棉 尺码：S M L 衣长：S 89 M 90 L 91 ... 阅读全文
posted @ 2009-05-05 11:15
Gre_Jee.Mr
阅读(478)
评论(0)
推荐(0)
摘要：
惊叹于老外的发现 《CSS Background image on html image element?》，自己从没关注过，也没想过如此的问题。 实现方法很简单：设置 img 元素为块元素（display:block;），并赋一个 padding 值。 例如（simple demo ）： img { display:block; background:url('parallax.... 阅读全文
posted @ 2009-05-05 11:15
Gre_Jee.Mr
阅读(201)
评论(0)
推荐(0)
摘要：
在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢？ 我们可以对加载的 JS 对象使用 onload 来判断（js.onload），此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持，但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatec... 阅读全文
posted @ 2009-05-05 11:15
Gre_Jee.Mr
阅读(202)
评论(0)
推荐(0)
摘要：
在浏览器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中测试以下代码（Demo）： test 结果会发现，在 IE6、IE7 浏览器中第二次弹出的 result.innerHTML 中的 A 元素的 href 值成为了绝对路径。 其实先人们早遇到这些问题（感谢 玉伯 提供的资料）： 《getAttribute(”... 阅读全文
posted @ 2009-05-05 11:14
Gre_Jee.Mr
阅读(166)
评论(0)
推荐(0)
浙公网安备 33010602011771号