当在一个网站上显示e-mail地址的时候你肯定会混淆它以防止收到spammers的攻击。但是哪种混淆方法是最好的呢…
Posted by 火恋の神父 on 05月 13th, 2009 :: Filed under
技术交流Tags ::
css,
Javascript,
QQ,
UE,
UI,
XHTML,
代码,
工具
从网上收集了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; 例如： 相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 [...]
Posted by 火恋の神父 on 10月 27th, 2008 :: Filed under
技术交流Tags ::
css,
DIV,
Javascript,
XHTML,
代码,
技巧,
方案,
解决,
设计,
链接
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。
二.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个class"update"
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class="update"将被使用，因为class比p更近。
八、多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10px的边框。
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px [...]
Posted by 火恋の神父 on 07月 25th, 2008 :: Filed under
技术交流Tags ::
css,
DIV,
XHTML,
代码,
技巧,
样式表
Opera Desktop是一款专为电脑所设计的浏览器，当网上冲浪的时候 Opera Desktop能展现最强劲的动力。它是目前最快、最安全和最容易使用的浏览器。Opera公司将 Opera Desktop设计成能适合生活。而且它是完全免费的。
Opera公司所推出的Opera Desktop 9又获得了全面的升级，在7月3日推出了最新Opera Desktop 9.51正式版。
本地下载：http://tools.mydrivers.com/soft/929.htm
官方网站：http://cn.opera.com/
Kestrel内核：全新的内核使Opera Desktop 9.5速度更快，与9.27相比速度提升50%。
Opera Link：书签、快速拨号等功能可以通过Opera Link功能传递到任何拥有Opera浏览器的设备上，包括最流行的免费手机浏览器Opera Mini。
极速搜索：只要你可以记住曾浏览过网页文字中的任何一个词，通过极速搜索功能，用户可以轻松的找到这个网页。
外观：Opera 9.5在用户界面上做出了很大改变，图标按键等都做出了更新。而且用户可以根据自己操作系统选择适合自己的外观。
加强防护恶意攻击及网络钓鱼：Opera不仅仅拥有欺诈保护功能，现在Opera是第一个网络浏览器拥有防护恶意攻击和恶意软件攻击功能。Opera通过与Haute Secure、Netcraft和PhishTank 网络安全公司的合作，可以自动抵御攻击性网页，从而保护用户免受侵害。
速度：在最新的Opera 9.5 上，Opera保持了其全球领先的性能，其中包括：邮件功能、新闻定制功能以及浏览器本身性能。
最新的Opera Desktop 9.5也继承了广大用户所熟知及喜爱的功能：
欺诈保护- Opera 的高级的欺诈保护功能可以防止您的个人信息被不正当网站窃取。
BitTorrent- 您并不需要另外的 BitTorrent 应用程序来下载大型文件。直接点击种子链接就可以开始下载。
内容阻止- 移除广告或图像 – 您可以自己做主。右键点击（Mac：CTRL + 鼠标左键点击）网页并选择“内容阻止”。
添加您喜欢的搜索引擎- 右键点击网站的搜索栏并在菜单中选择"创建搜索"。
缩略图预览- 在 Opera 中同时打开多个标签页非常容易。但哪个页面才有您想要的视频？将您的鼠标停留在任意标签上可以预览网页的缩略图。
站点首选项- 想用不同的方式查看站点或拒绝特定的 cookie？想只阻止某个网站的弹出窗口？右键点击并选择"编辑站点首选项"
Widget- 使您的桌面体验更有趣的小网络应用程序（多媒体、新闻推送、游戏以及更多）。使用 Widget 菜单可以发现新的 widget 并找到您最喜欢的。更强大的富文本编辑功能 – 在当今最流行的网络应用程序上使用先进的文本编辑功能。
下载管理器- 通过一个简单的下载管理器窗口您可以查看下载进程并访问所有您下载的内容。
标签式浏览- 使用相同的应用程序窗口打开多个网页可以使浏览更简单、更快速。
密码管理器- 密码管理器可以代替您记住您的用户名和密码。
内置搜索- 使用内置的搜索栏可以搜索 Google、eBay、Amazon 以及更多网站。您也可以使用关键字（比如 Google 用“g“）直接在地址栏内进行搜索。
阻止弹出窗口- Opera 允许您控制是否阻止所有弹出窗口，或打开您所请求的那些弹出窗口。
鼠标手势- [...]
Posted by 火恋の神父 on 07月 20th, 2008 :: Filed under
网络新闻Tags ::
css,
google,
XHTML,
下载,
免费,
图标,
工具,
广告,
手机,
更新,
样式表,
游戏,
相册,
移动,
聊天,
视频,
设计,
软件,
链接
CSS相关代码
Little Boxes 包含 16 个布局，经典！
Linknosie 是一个工具，你可以自定义布局类型，宽度以及其它的参数来生成布局。
Code Sucks 提供了大约 100 个 CSS 布局供下载。所有布局是按照 1024×768 的尺寸设计的。
CSS Intensivstation 包含了 15 个布局。所有模板都是基于 XHTML 1.0 以及 CSS2 的哦。
The Layout Reservoir 提供 2 栏以及 3 栏的布局。
MaxDesign 提供了一组 CSS 页面布局，包括 2 栏以及 3 栏布局。
Layout Gala 提供了 40 多个专业布局。使用规范的标记以及 CSS，在当前主流浏览器都能通过测试。
CSSplay 提供了很多免费专业的层次布局。大多都不需要经过授权而可以任意使用，不过，一些需要经过 email 授权！
CSSFILL 由 Michael Strand 设计的基于 CSS/XHTML 的布局和模板，免费下载。
XHTML相关代码
Open Source Templates 是一个免费的 CSS [...]
Posted by 火恋の神父 on 06月 26th, 2008 :: Filed under
技术交流Tags ::
css,
UE,
XHTML,
下载,
代码,
免费,
工具,
技巧,
经典,
设计,
链接
1.若有疑问立即检测
在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用，请见 http://validator.w3.org 。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。
2.使用浮动功能时记得适当清除指令
浮动是个危险的功能，未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况，请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。
3.边界重合时利用padding或border来避免
您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来。如果您有用到margin，那么很容易产生边界的重合；Andy Budd在他的网站上解释了可能的做法。
4.尝试避免同时对元素指定padding/border以及高度或宽度
Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但如果母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。
5.不要依赖min-width/min-height
Windows版IE并不支援两种语法。但是在某种程度下，windows版IE可以达到相当于min-width/min-height的效果，所以只要对IE做点过滤功能，即可达到您想要的结果。
6.若有疑问，先减少百分比
有时候某些错误会使50%+50%成为100.1%，使网页出现问题。这时请尝试将这些值改为49%，甚至49.9%。
7.记住“TRouBLed”写法
Border，margin与padding的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界，右边1像素，以此类推。记住“TRouBLe”，您就不会弄错次序了。
8.只要不是零的值，都要指定单位
CSS需要您对每个font，Margin等各种值指定单位。（唯一的例外是line-height）
Posted by 火恋の神父 on 05月 27th, 2008 :: Filed under
技术交流Tags ::
css,
XHTML,
代码,
工具,
技巧,
空间,
解决
为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。
如果网站没有使用CSS，可以在网页/模板的HTML代码和 之间插入：
<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>
有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议
<!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">
请将网页最头部的替换为以上代码。
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：
引用:
<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>
最简单的把页面变成灰色的代码是在head 之间加
<style type="text/css">
html{FILTER: gray}
</style>
Posted by 火恋の神父 on 05月 19th, 2008 :: Filed under
技术交流Tags ::
css,
Flash,
UE,
XHTML,
代码
这是刚才一个网友发的代码，在IE6中不能正常显示，感觉这段代码不错，就贴出来和大家分享一下！
重点只有一个，就是下边的这行代码！
#menu li:hover,#menu li a:hover{width:auto}
/*这句是后来加上的，如果不加会在IE6中有问题；width:auto是我随便写的，你删除后改成disploy:block或其它的内容，只要别它空就行*/
全部的布局为：
<body>
<ul id="menu">
<li> <a href="#nogo">
<table>
<tr>
<td><dl>
<dt><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
[...]
Posted by 火恋の神父 on 04月 15th, 2008 :: Filed under
技术交流Tags ::
css,
UI,
XHTML,
代码
习,但感觉太难了
而且用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多,由于最近求职,很多公司都要求DIV,CSS,所以我再次尝试学习
1.学习方式
我以为,看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识),在查看别人的代码时可以去除一些重复的,或者一些于CSS无关的代码,将更利于我们分析,你可以从中了解到别人是怎么做的,更深一点,你可以考虑为什么要这样做,当然它们做的也不一定全对,就算淘宝,我发现它们的CSS里面也有不少的多余代码,我曾经从淘宝的网页代码里面学到不少的东西,我把基本的框架保留下来,然后分析,并且我将我的分析记录了下来,你可以在这里查看：
http://www.dayanmei.com/blog.php/ID_536.htm
2.练习方式
在了解到一些基本的布局方式,以及一些容器的属性之后,可以尝试自己,编写一些简单的布局,遇到出现问题的时候,可以在google搜索一下,或者想\象理想论坛以及其他一些讨论标准化的论坛询问一下,会有很多好心人的哦
3.一本手册
在遇到问题的时候或者对某个属性不是很了解,或者对于属性的兼容性不太清楚的时候,这就有很大的作用了
手册可以去这里下载
http://www.w3cn.org/resource/down/2004/73.html
4.多写多练
你发现自己多写了几个布局,或者出了一些问题并解决后,你已经基本掌握了布局的要点了.
如何学习标准化
1、几本书、几个网站、几篇贴子、几个blog
《网站重构》掀起国内web标准热潮的第一本相关著作。理论性质多一些，全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途。建议在阅读学习《CSS网站布局实录》有了一定的技术基础了再回头学习，反思自己之前学习和设计过程中的问题，这样才能有效地提高。
《样式表中文手册》必备的工具，我一般放在桌面随时查询。里面提供了详细的使用说明和实例。
《CSS网站布局实录》较新的一本标准化著作。告诉你怎么去写符合标准的xhtml和css代码，告诉你一些常见布局和页面效果的代码是什么样子。这本书很适合初学者，基本上都是针对实例的布局、效果的实际操作，比较系统的讲述了如何进行标准化网站制作。这本书只是在讲具体的实现，关于标准化的概念、网站重构的目标这些指导实际操作的理念性东西几乎没有。可以在学习这本书之后读一下《网站重构》，二者结合起来学习效果不错。目前的版本可能因为时间问题，校对很仓促，有不少错别字和有问题的句子没，但涉及到代码到没有发现错误。
《CSS权威指南》详细阐述CSS1.0每个属性的规则和定义，并且展望了CSS2.0许多诱人的东西。对实现web标准化有着重要的意义。通过本书的学习可以深入理解浏览器如何解析属性的规则和定义，为准确实现设计意图提供保障。
《html和xhtml权威指南》应该是一本权威的工具书，没有必要通读，可以在实际设计制作过程中参考。详细的讲述了html和xhtml的规则定义使用技巧。
《javascript权威指南》作为行为层的主要技术，不学习javascript就不能完整地学习web标准。
网站设计师 最初接触web标准化学习必须访问并且认真阅读的网站。包含教程、资讯、参考资料等重要信息。
蓝色理想标准化专版 这个不用说吧，对几位版主热心勤劳在此致敬。不少牛人潜水与此。但近期的学习氛围略显浮躁，没有深入理解停留在css表现层次的朋友较多。
CSSer.org 这个网站不知道怎么关掉了……有段时间不去看了，等待站长再次开放吧。
网易 作为门户网站里较早采用web标准的站点之一，其最新版本很值得研究。
下面是一些web标准届牛人朋友的blog，跟着他们能学习很多，而且通过blog这样亲切的形式学习效果应该很好。建议静心阅读他们的系列教程。
http://www.realazy.org/blog/
http://www.andymao.com/andy/
http://old9.blogsome.com/
http://www.greengnn.com/
http://blog.pr1984.com/
http://www.loaoao.com/
2、如何学习
读写
读书读上面我推荐的贴子、网站和blog。互联网的宗旨在于共享和传播，那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程。要静下心来，不能仅仅为了一个效果或者一个布局的实现去找答案。而是去理解教程给我们带来的实现思路。要系统地读书也要针对性的搜集某个问题的方法去总结提取。读到的时候就要写，写一些代码片断，一些布局结构，一些效果的实现。哪怕是照着书敲出代码来，加深记忆和理解，效果要比单纯的度过效果要好得多。
改动
改，不是抄袭。把别人的网站另存下来，改动其中的部分内容，看看页面显示有什么变化，在这些变化中去理解你所改动部分代码再实现页面效果中起到了什么作用。这是一个很重要的学习方法。你看到的效果变化来源于你的改动，这本身就是一个加深记忆和理解的过程。另外一种改法就是把复杂的页面简单化，简单到能演示效果为主，代码少了看起来清晰有利于学习。或者把简单的布局填充内容之后看页面怎么显示，会不会影响到布局，自适应的还是固定大小的，超出固定大小的内容hidden了还是流向了结构之外？有没有什么Bug？青蛙用永远逮不到一个安安静静站在那里的蜻蜓，只有蜻蜓飞起来了青蛙才能判断才能捕食。
睡觉
睡觉前的思考。在显示器之外去思考之前学习到的东西，要有一定的距离和空间高度去看待去思考，比如今天写的布局是不是合理，有没有必要这样复杂，如果把浮动改成绝对定位呢。等等，就像作平面设计一样，有时候椅子往后一仰，稍稍的远离屏幕，对之前的细节处理就能有一个全新的认识。
收藏
好记性不如烂笔头，总去发帖提问也不是办法。把看到的有用的教程收集起来分类整理，比如布局代码、导航特效、浏览器兼容hack写法等等。建立自己的文档库，时间久了整理整理，如果有合适的条件不要忘记和朋友们分享。
实践
作一个完整的网站/网页项目，未必要复杂或者庞大。但至少要有一个完整的页面，尽可能用熟悉的技术去实现。检验自己、发现问题给自己继续学习的动力。
Posted by 火恋の神父 on 04月 19th, 2007 :: Filed under
技术交流Tags ::
css,
DIV,
google,
Javascript,
XHTML,
下载,
代码,
制作,
学习,
工具,
技巧,
样式表,
空间,
解决,
设计
RSS 订阅本站
Twitter!
新浪微博
