容我织梦

一张背景图的自适应按钮

Frog — Wed, 10 Feb 2010 09:20:06 +0800

其实很多时候都是用到自适应，用的最多的也就是导航，按钮的。根据实际字数需要，扩展或者缩小宽度。

hmtl代码:

<span>
<button>确定充值，去网银付款</button>
</span>

css代码：

span {
background:url(bg_comb.png) 100% 0;
height:32px;
display:inline-block;
padding:0 5px 0 0;
text-align:center;
font-size:14px !important;
vertical-align:middle;
width:auto;
}
button {
display:inline-block;
border:0;
background:url(bg_comb.png) 0 0;
height:32px;
line-height:30px;
padding:0 10px 5px 15px;
color:#fff;
vertical-align:middle;
white-space:nowrap;
overflow:visible;
}

其实我也是个懒人，这里不给出图片和预览了，如果又需要的。可以自己按照样式，亲自测试下。

关于iphone与itunes同步的问题

Frog — Tue, 19 Jan 2010 11:06:51 +0800

关于iphone与itunes同步的问题网上比比皆是，遇到问题的人也不少。

其实由itunes同步到iphone问题应该不是很大，稍微研究以下就可以搞定的，这里我就说以下，从iphone到itunes的一个逆向导入。貌似找了很久没有一个很好的办法。

简单说一下，我的过程：

电脑重装了系统，以前的itunes肯定也是要重装，那里面的app肯定是没有了。还好是双系统，另一个系统里也装有itunes，把里面的文件重新导入到新的系统里然后倒入就可以了的。不过在同步的时候是需要授权提示的，记住密码很重要，（用户名是已经安装过的，安装的时候是记住用户名的。）

再点击同步就完成了，当然，前提是你重装系统前备份：X:\Users\Administrator\Music\iTunes\iTunes Media\Mobile Applications 这个文件夹里的所有文件，其中的X是你的itunes的安装盘符，一般是C盘。再次声明是你有备份，没有备份的没有办法实现。此文标题可能起的有点让人无解，能帮到您那就好，如果此文对您没有意义，请别拍砖。

给表格做链接

Frog — Thu, 07 Jan 2010 17:08:00 +0800

1月5日的腾讯首页

Frog — Tue, 05 Jan 2010 11:03:37 +0800

今天还是习惯性的打开腾讯首页，只是用FF打开的时候（平时习惯用而已）看到一个现象。

其实我是很不屑的，错谁都会有啊，希望他们快点看到，快点修正。嘿嘿

IE6的bug的8个技巧

Frog — Wed, 30 Dec 2009 15:09:46 +0800

1. 设置position: relative

将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。

2.将浮动元素设置为display:inline

具有margin属性的浮动元素可能引起的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，当然，方法也不是只有这一个。

3. 将一个元素设置为hasLayout

很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候 hasLayout已经被启用。

4. 修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
为浮动元素的最后一个条目使用一个条件注释，比如：
1
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

5. 使用!important 或高级选择器来区分IE6

不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

#element {
 min-height: 20em;
 height: auto !important; /* 所有浏览器都理解这段代码 */
 height: 20em; /* IE6 错误的使用这个值 /*
}

IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。

另外一个可选的方法是使用高级选择器，比如e.g.

#element {
 min-height: 20em;
height: auto !important; 
height: 20em;
overflow: visible;
}

6. 避免百分比单位

百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：

body {
 margin: 2% 0 !important;
 margin: 20px 0; /* IE6 only */
}

7. 尽早测试并不断测试

不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。

8. 重构你的代码

经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

虽然IE8并没有从根本上改变IE，但是它对CSS标准的支持的确有非常大的改观。但是即便如此，我们依然不能寄希望与IE8的普及，这是一件很不靠谱的事情，顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。

[CSS]贴在底部的布局

Frog — Thu, 03 Dec 2009 16:00:36 +0800

对于前端开发人员来说，页脚的处理时常让我们比较头痛。因为，如果页面比较长还好说，如果页面比较短，则页脚则会跑到页面的中间部位，十分的不雅观。

那么有什么办法能让页脚乖乖的出现在每页的最下方呢？方法当然是有的，一种是使用js+css的方法,这种办法比较好理解，实现也比较的简单，这也是大家用的比较多的办法。但是，如果用户禁用了js，那么这种方法自然也就不再能够实现。那我们自然的想到了使用纯css。

<!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>
<title>我个是非常好的小页脚</title>
<meta http-equiv=”Content-Type” content=”text/html” charset=”utf-8″    />
<style type=”text/css”>
html{height:100%;overflow:auto;}
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}
.main{border-bottom:60px solid #fff;}
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}
</style>
</head>

<body>
    <div>
        <div id=”topbar”>菜单部分</div>
        <div>
                我是主体，我是核心<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
               <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
               虽然我是主体，但是你可以删除我其中的内容再看看我下面的页脚
        </div>
        <div id=”footer”>
            我是安分守己的页脚，我只安静的待在页面的最下方
        </div>
    </div>
</body>
</html>

这个效果的好处我想不需要多说，大家看看也就明白了。

FF2.0+、FF3.0+、IE6、IE7、Safari、Opera、Chrome都通过。

[ 总结]浏览器兼容手册

Frog — Mon, 23 Nov 2009 09:42:13 +0800

浏览器兼容手册
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3. clear:both;
不想受到float浮动的，就在div中写入clear:both;
4. IE浮动 margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题
FF设置 padding 后，div会增加 height 和 width，但IE不会（* 标准的 XHTML1.0 定义 dtd 好像一致了）
高度控制恰当，或尝试使用 height:100%;
宽度减少使用 padding
但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义
6. div嵌套时 y 轴上 padding 和 marign 的问题
FF里 y 轴上子div 到父div 的距离为父padding + 子marign
IE里 y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个
FF里 y 轴上父padding=0 且 border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面
7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding
列表类
1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}
显示类
1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
2. 鼠标手指状显示
全部用标准的写法 cursor: pointer;
背景、图片类
1. background 显示问题
全部注意补齐 width，height 属性
2. 背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

强制Firefox显示滚动条

Frog — Thu, 19 Nov 2009 13:32:05 +0800

我们知道，在页面高度不够时候，FF火狐浏览器是默认没有滚动条的。但是当页面在加载完了之后，如果页面够长，会出现稍微的闪动（偏移）。这里我们强制FF在开始的时候就有滚动条，这样，就不会出现那样的现象了。

其实，实现过程也不是很复杂，具体看例子：

< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>强制Firefox显示滚动</title>
<style type=”text/css”>
<!–
html {overflow:-moz-scrollbars-vertical;} /*方法一*/
html {min-height:101%;} /*方法二*/
–>
</style>
</head>
<body>
<p>强制Firefox显示滚动条：</p>
<p>方法一：html {overflow:-moz-scrollbars-vertical;}</p>
<p>方法二：html {min-height:101%;}</p>
<p>为什么要强制显示滚动条？因为在Firefox你会发现页面在没有加载完全的时候是没有滚动条的，当加载完成后滚动条才显示出来，所以会感觉页面偏移了下。</p>
</body>
</html>

一首让人落泪的歌【李雷和韩梅梅】MV

Frog — Thu, 12 Nov 2009 15:19:14 +0800

这首歌确实看了让人回味无穷!

一个红色3D质感按钮的制作

Frog — Tue, 10 Nov 2009 16:09:45 +0800

前段时间在68上看到一个效果，觉得很不错。今天稍微有点空，所以自己也试着做了一下。重点在3D效果及光感的制作，不过制作的时候还是要注意好高光及暗调的搭配，能更好的体现按钮的质感。
最终效果

1、开始前老样子先在PS里新建一个文件，设置宽高800*600。

2、使用圆角矩形工具圆角为10px，这里颜色为红色。

3、将前面的圆角矩形图层复制一次，在复制出的图层上按鼠标右键，选择栅格化图层，这样将形状图形转化为像素图形。同样将另一个图层进行栅格化处理。

4、这里我们为了制作出3D按钮的立体质感效果，将会用底部的图层来做阴影，上面的图层保持不变，所以选中底部图层，按ctrl+u设置”色相/饱和度”参数如下。

5、将两个图层的位置进行调整，下面的图层向下移动10像素（按shift+下键）。

6、现在我们为3D按钮上面的图层进行视觉上的修饰，先按住ctrl点选上面的图层，使其整个处于选中状态，随后按“选择>修改>收缩”,设置缩小1px。

7、然后我们用工具栏的加深工具，设置参数如下。

8、在选中的图层上按住shift从左向右进行涂抹。

9、随后我们为上面的图层添加如下图设置的图层样式。

10、为下面的图层添加如下样式：

11、现在开始制作3D立体效果常见的光感效果，首先使用2px笔刷，硬度40%的设置。

12、确定你的PS里的前景色与背景色分别为白色与黑色，然后使用钢笔工具，确保你选用的是路径，新建立图层，按照下图方法用钢笔工具绘制两个点。

13、再在钢笔路径上按鼠标右键选择”描边路径”，随后选择画笔并勾选模拟压力。然后选择”删除路径”，完成后将会看到如下图的光感线条效果。

14、再来为按钮设置一些细节光感效果，选中” 减淡工具”,设置如下，使用高光参数，随后在按钮的上部图层上点大约两次，记住不要点的次数过多，点的太多会看上去十分难看。

15、最后一步，我们使用加深工具，在下部按钮图层的两边制作量条加深的线条。

16、完成后整体看上去的按钮效果图下，是不是立体感十足。

17、我们最后再添加上光感与文字。

前面的截图不是自己弄的，因为截图再贴是太浪费时间了，最后一步是自己的做的效果。