登录 ┊ 背包客 ┊ 收藏
订阅丑蛙大杂烩

什么是RSS订阅？查看解释
订阅到您的在线阅读器

抓虾
google reader
my yahoo
bloglines
鲜果
哪吒

网站收藏

IE6下解决Png透明的最佳方法

发布:丑蛙 8th,Dec

1、非常小的javascript文件：1kb！
2、解决因为IE的滤镜属性所带来的影响。
3、无论是img元素或background-image属性，都能有效果。
4、在加载页面之前就能自动运行。或者就一丁点的元素。
5、允许自动高宽。
6、使用起来超级简单。
如何使用：
1）、下载zip 然后，添加下面的代码到你页面的头部<head></head>。（一定要确保路径的正确）
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
 2）、添加clear.gif到你的images 文件夹中。在js文件中，修改”var clear=”images/clear.gif” 路径，为你存放clear.gif的文件路径。
3）、你的整个项目的png图片都实现了透明效果。的确非常简单吧？就2个步骤，就实现了整个站点所有png的透明效果。
文件下载：unitpngfix.zip

More...

Tags: png  ie6  透明  

分类:DIV+CSS | 评论:1 | 引用:0 | 浏览:

制作网页时编写CSS代码的25个小技巧

发布:丑蛙 3th,Dec

1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。
3、一个兼容性调整(IE和Mozilla)的笨办法：初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在Mozilla里必须要设成B才能正常显示，或者两个倒过来。
　　临时解决方法：选择符{属性名:B !important;属性名:A}
4、如果一组要嵌套的标签之间需要些间距的话，那就留给位于里面的标签的margin属性吧，而不要去定义位于外面的标签的padding
5、li标签前面的图标推荐使用background-image，而不是list-style-image。
6、IE分不清继承关系和父子关系的差别，全部都是继承关系。
7、在给你的标签疯狂加选择符的时候，别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。
8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。
9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active
10、与内容无关的图片请使用background
11、定义颜色可以缩写#8899FF=#89F
12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。
13、<script>没有language这个属性，应该写成这样:
以下是引用片段：
<script type=”text/javascript”> 

More...

Tags:

分类:DIV+CSS | 评论:0 | 引用:0 | 浏览:

IE与Firefox的CSS兼容大全及省略号应用（之二）

发布:丑蛙 31th,May

CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。

　　常见兼容问题：

　　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 特别设置样式

　　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.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

　　注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：

More...

Tags: divcss  CSS  兼容  

分类:DIV+CSS | 评论:0 | 引用:0 | 浏览:

为页面添加正确的doctype声明-W3C标准

发布:丑蛙 22th,Apr

用dw设计网页时,代码最前面总要出现一个下面的东东，

<!doctype html public "-/w3c/dtd html 4.01 transitional/en"

"http://www.w3.org/tr/html4/loose.dtd">

这个是dw自动在网页文件页增加了dtd信息（DOCTYPE声明），可以删。删除后，浏览器会使用的默认dtd。

很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果可能会令页面出现错误。

doctype的作用

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。

More...

Tags: W3C  网页  

分类:DIV+CSS | 评论:0 | 引用:0 | 浏览:

最全的CSS浏览器兼容问题（之一）

发布:丑蛙 16th,Dec

　　CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. 

　　CSS技巧

　　1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 

　　2. margin加倍的问题     设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;    例如：    <#div id=”imfloat”>    相应的css为    #IamFloat{    float:left;    margin:5px;/*IE下理解为10px*/    display:inline;/*IE下再理解为5px*/} 

　　3.浮动ie产生的双倍距离     #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;  

More...

Tags: CSS  兼容  浏览器  IE  FF  

分类:DIV+CSS | 评论:0 | 引用:0 | 浏览:

关于UK主题，FROG样式

发布:丑蛙 15th,Dec

绿豆蛙（丑蛙）

Z-Blog下的UG-FROG主题样式：简洁、大方、适合宽屏用户；

3列形式，右边栏目2列固定宽度，左边内容页为自适应伸缩；

解决了评论、留言及正文图片的自动伸缩问题；

加入了公益FLASH广告功能，并对代码进行了注释，更具规范性，使之结构更加合理，更适合WEB2.0发展的方向；

符合Web标准，并全面通过Firefox3，IE7及IE6等浏览器的测试。

2008-12-14更新，根据使用反馈修正。

如有好的建议，请留言，谢谢！

Tags: 主题  样式  体验  UE  

分类:DIV+CSS | 评论:0 | 引用:0 | 浏览:

Web标准基础教程

发布:丑蛙 21th,Nov

课程列表(附上CSS参考手册.chm)；可下载；FLV视频形式；共25节。

基础理论（一）
基础理论（二）
基础理论（三）
1、初探CSS
2、CSS基本语法
3、CSS文字效果
4、CSS图片效果
5、CSS页面背景
6、CSS设置表格和表单样式
7、页面和浏览器元素
8、CSS制作实用菜单
9、CSS滤镜的使用
10、理解CSS和DIV定位
11、CSS排版
12、网页变幻
13、CSS和javascript
14、CSS与XMl综合运用
15、CSS与AJAX综合应用
16、我的博客
17、小型工作室
18、公司网站
19、网上购物
20、旅游观光
CSS设计彻底研究[上]
CSS设计彻底研究[下]

More...

Tags: web2.0  DIV  CSS  FLV  

分类:DIV+CSS | 评论:0 | 引用:0 | 浏览:

分页:[«]1[»]