Click here

26

IE与Firefox的CSS兼容问题整理

Posted by allan on 十月 26, 2007. Filled under Web制作. 2,683 views. Tags : , , .

常见兼容问题1:

  1.DOCTYPE 影响 CSS 处理
  2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
  3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
  4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
  5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上
  6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
  7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
  8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
  9.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}
  注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
  重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

点此查看原文……

 

20

css+div命名规则参考

Posted by allan on 十月 20, 2007. Filled under Web制作. 2,873 views. Tags : .

常用代码结构:

div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,例如:

  • (4.23)隐居豆腐店
  • 然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果

    h1-h6:标题
    h1-h6 根据重要性依次递减
    h1位最重要的标题

    label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:

    点此查看原文……

     

    11

    CSS Sprites

    Posted by allan on 十月 11, 2007. Filled under Web制作. 1,112 views. Tags : .

    CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传,后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅,其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来,甚至出现了在线生成工具,势不可挡也。近来国内很多blog都提到CSS Sprites,最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中,也是使用到CSS Sprites,几乎都有的CSS装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon. 一时间,CSS Sprites无处不在。

    原理

    我们知道,自CSS革命以降,HTML倾向于语义化,在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的,少不了各种漂亮的图来装点。新时代的生产方式是,在HTML布满各种各样的钩子(hook),然后交由CSS来处理。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现(题外话:为何我提现阶段,因为未来浏览器若支持content则又新增另外的实现方法)。我们的主角是,你一定猜到了,就是background-position。通过调整background-position的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,你看到只该看到的而已。就好比手表上的日期,你今天看到是21,明天看到是22,是因为它的position往上跳了一格。所以你也大概了解到,CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。

    我们使用YUI的sprite.png举个例子,假如我们有这么一段代码,max代表最大化,min代表最小化,我们需要给它们配上相应的漂亮图片(这样我们的网站才能够吸引人,才可以卖钱,才可以到佛罗里达晒太阳:D):

    点此查看原文……

     

    25

    js+css实现图片圆角化

    Posted by allan on 七月 25, 2007. Filled under Web制作. 2,103 views. Tags : , .

    很早关注过这个,但以前几种方法不是非常理想,以下这个比较完美。除了圆角以外还可以实现阴影、内外斜角等效果,理论上可以实现任何图片上的附加效果。支持Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari,IE7未测试。

    Corner.js 1.4 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean.

    It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing.

    详情:http://www.netzgesta.de/corner/

     

    十一 21

    使用DIV之后,什么时候使用TABLE?

    Posted by allan on 十一月 21, 2006. Filled under Web制作. 1,126 views. Tags : .

    关于表格

    使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,大家可以想象一下EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格,比如公司员工联系表,产品与型号对应表等.

    那么所谓表格大餐呢,其实意见上升到了一个层次,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.

    所以,关于那句使用以久的话,应该改为"使用表格作为网页排版,布局页面元素是不合理的,表格是用来显示数据的".

    点此查看原文……

     

    26

    用css控制当鼠标移上时td背景变换

    Posted by allan on 十月 26, 2006. Filled under Web制作. 1,396 views. Tags : .

    今天碰到这个问题,上网查了一下,找到解决方法。



    onMouseOut="this.className='Off'"
    onMouseOver="this.className='Up'">样子


     

    07

    一个链接打开两个地址

    Posted by allan on 十月 7, 2006. Filled under Web制作. 1,073 views. Tags : .

    有时候会收到这个比较BT的要求,正好看到此话题讨论,收下。

    <a href="1.htm" onclick="window.open('2.htm')">click</a>

    原贴:http://bbs.blueidea.com/thread-824223-1-1.html

     

    Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 35 bytes) in D:\localuser\zj01005405-m7i5n3h0\allan\blog\wp-content\plugins\wp-pagenavi\wp-pagenavi.php on line 108