Photoshop笔刷让 你用自己喜欢的方式和主题来完成你的艺术作品或者是某个设计。网上现在有大量的免费笔刷提…

---

Posted by 火恋の神父 on 05月 8th, 2009 :: Filed under 技术交流, 网络资源
Tags :: DIV, Photoshop, 下载, 主题, 免费, 笔刷, 网页设计, 艺术, 设计, 软件

---

虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了awflasher的WordPress主题TES中：

其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。
最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：
首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
[quote]
正在加载
[/quote]
你可以直接放到页面的标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）
然后，在你的样式表中，对这个loading设定一个简单的样式：
[quote]#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}[/quote]
接下来，在你标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段标记：
[quote]document.write('
#loading{display:none}');
[/quote]
如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：
$('#loading').hide()
这样，当页面完全加载完毕之后，loading就隐掉了。对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。
最后，希望这个老土的技巧能帮到你：）
本文来自：http://www.awflasher.com/blog/archives/1589

---

Posted by 火恋の神父 on 11月 21st, 2008 :: Filed under 技术交流
Tags :: DIV, Flash, Javascript, SEO, UE, 主题, 代码, 技巧, 样式表

---

一、针对firefox ie6 ie7的css样式
　　现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释， 会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
#abc { color: #333; } /* Moz */
* html #abc { color: #666; } /* IE6 */
*+html #abc { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
二、CSS布局中的居中问题
　　主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
　　说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
　　但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
　　需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
三、盒模型
#box{
;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
>//for ff
;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
四、浮动ie6产生的双倍距离
#box{ float:left; ; margin:0 0 0 [...]

---

Posted by 火恋の神父 on 11月 17th, 2008 :: Filed under 技术交流
Tags :: css, DIV, Javascript, 代码, 技巧, 解决, 设计, 链接

---

楼梯口见到冉静~故事开始了.

第三次的邂逅,我知道她是空姐.

我第一次看见冉静穿职业装

她搬到我家…

---

Posted by 火恋の神父 on 11月 13th, 2008 :: Filed under 影音风暴
Tags :: DIV, 冉静, 女, 照片, 足球

---

从网上收集了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, 代码, 技巧, 方案, 解决, 设计, 链接

---

使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
之前《不要忘记清除DIV浮动》也提到过这样的问题，更多信息可以看这里。
不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用
body, html {
min-height:101%;
}
使块元素水平居中
margin:0 auto;
其实就是
margin-left: auto;
margin-right: auto;
这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用
body{
text-align: center;
}
然后定义内层容器
text-align: left;
恢复。
隐藏 Exploer textarea 的滚动条
textarea {
overflow:auto;
}
Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。
设置打印分页
h2 [...]

---

Posted by 火恋の神父 on 08月 26th, 2008 :: Filed under 技术交流
Tags :: css, DIV, UI, 技巧, 经典, 链接

---

在做网页的时候请注意清除DIV的浮动

用空标签清除
[html].clr {clear: both;}

Left
Right

[…

---

Posted by 火恋の神父 on 08月 26th, 2008 :: Filed under 技术交流
Tags :: DIV

---

个人总结了在开发css框架中的一点经验，献丑了。希望大家的讨论能使我们共同进步。:)
1、css框架
中国的互联网行业已经发展了10年，浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时，确实成为前端开发工程师的手中利器。为什么呢？因为框架是包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。
编写css也是一样，从最初只是定义文字颜色、内容排版，到现在定义所有的表现。css框架也渐渐被重视了，因为大家都认识到：从具象的表现中抽出抽象的模块来重复使用，是减少用户下载、方便团队及个人开发最重要的手段。
2、css框架的开发顺序
a) 格式化 reset.css
格式化css的真正好处是能够快速启动工作，你可以在新的HTML文件里引入框架，不用再处理重置padding 和 margins，实现统一的排版、浏览器下的相同表现。
b) 布局 layout.css
定义页面是二栏还是三栏，是全屏还是1024×768……
一个网站的设计可能有很多种布局，但是大多数都是由几个具有复用性的布局组成，选择性的引入所需要的布局，可以很快地应用所期望的页面布局。
c) 基本样式 type.css
定义body、h1-h6、a:link-a:active、p等的字体大小和颜色。
基本样式的css引用，譬如将ul定义class为“ul-text”，用来展现相同的icon、行间距、链接色彩。
还可以像这样应用：class=”ul-text square”，li前展现的是方型的icon。
d) 表格修饰 table.css
定义table、tr、td、th、thead、tfoot、tbody、caption等标签的表现。
和基本样式一样，但是表格在现有网站的展现形式几乎都是处理数据，所以分开存放引用。譬如在table上应用table-style-1便是黑色边框的表格，table-style-2便是黄色边框的表格。
e) 表单修饰 form.css
定义fieldset、label、button、input 、select、textarea这几个标签的表现。
大多数网站的表单、按钮、输入框几乎都是一样的。之所以引入这个css，是为了便于统一在各个浏览器中的展现。默认的按钮、输入框等在各个浏览器下的展现区别很大，虽然在格式化的css中已经初步的统一，但是输入框的边框，按钮的样式都是需要在这个css中定义的。无奈的是select无法做到统一，如果考虑到用js实现的话，这个成本太大了点。
f) 打印修饰 print.css
修饰打印输出的页面。
g) 包含其他css的css
frontpage.css、list.css、detail.css、register.css等等
根据各种引用去引入相应的css。譬如list页面中没有需要表格的修饰，那就不引入table.css。以节约代码量。
3、css框架文件夹的建立
a) core 主要的
存放reset.css、layout.css、type.css、print.css
b) bud 模块
存放table.css、form.css、album.css等css
c) petal 具体应用
存放封装过的css。frontpage.css、llist.css、detail.css、register.css等css。这个文件夹存放的css都是被直接引用的。
文件夹的命名，按个人喜好啦! 我还希望用电子、质子等命名呢。嘿嘿！
4、css框架的优点
a) 提高开发效率。
b) 规范名称定义，便于维护。
c) 规范项目开发流程
d) css代码更清晰、简单。html代码更合理。
5、css框架的弊端。
a) 学习成本提高。你需要了解整个框架，需要阅读框架的文档。
b) css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。
c)可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。
d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。残念 -_-
6、开发及使用css框架中常遇到的问题。
a、页面外部引用样式过多。
譬如关于ul的margin定义,在格式化的css中会声明为0，而在基本样式的css中又可能会声明margin:5px 10px;
所以在Yslow中会出现多次定义。
b、组件复用性的考量。
譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?
综合以上的二个问题，个人认为解决的方式便是封装，让该有的有，不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话，css的复用性又会变得很差，后期手工的封装会很痛苦。只能套用小马的一句话“具体情况，具体分析”。人生真是矛盾啊…
c、到底该不该支持em?
可见如要支持em，最大的目的是为了在浏览器中可以根据用户的分辨率大小自由缩放，对于拥有超大显示器的用户与小显示器的用户是非常有用的。可是在采集我们用户的浏览器数据后，发现分辨处于这二端的用户非常少，可想而知，为这部分的用户多花比正常开发一倍以上的时间显然是件不划算的事情，所以当初在开发tbsp的时候，我们团队就决定了不支持em。当然这是个建议，我们也希望能使用em带给用户最好的感受。

---

Posted by 火恋の神父 on 08月 20th, 2008 :: Filed under 技术交流
Tags :: css, DIV, icon, Javascript, UE, UI, 下载, 代码, 学习, 工作, 工具, 色彩, 解决, 设计, 链接

---

一.使用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, 代码, 技巧, 样式表

---

一个企业的UI设计部门中的美术设计师，有别于人机交互优化、用户行为分析、用户体验优化、页面语言标准优化等角色。
尤其是在中国互联网行业现有的短平快的企业产品设计特色，对于美术设计师本身的有求相对比较高，而且具备的素质也更加全面。
一个UI美术师是一个企业的窗口，一个产品的灵魂，
今天我想浅谈在一个小互联网公司，UI美术设计师在初级阶段应该做的事情。
（因为我本人一直做管理，做技术，本身不涉及太专业的美术设计领域，因此只能浅评，请大家拍砖）
首先，作为一个UI美术设计师，拿到一个Case时，你最先应该做的是忘记你的本身的角色。
因为你需要先对自己的工作做策划和规划，你得先明白你要做什么，怎么做，为什么这么做！
如果你为了一次市场活动做Minisite，你需要加强自己对业务表达方面的意识；
如果你是协助产品经理做产品界面设计，你则需要先深入了解这款产品的理念、特性，以及它的用户群；
如果你是为客户做一个整站Case，那么你还需要了解这个客户的心理，他的网站行业特征和主要受众。
然后，再到具体执行的步骤：
1，策定你将要使用的基调和色调。
要根据你已经了解到的信息，然后根据它的行业特性、产品特性、业务目的决定一个主色，和两个以上的辅助色，制定一套配色方案。
用色的多少以及他们之间是强烈对比还是渐变过度，要根据你的工作经验和Case的几本需求来决定。
2，收集你必须使用的元素。
无论是做活动用的Minisite，还是客户的的整站方案，还是产品设计。都肯定有一些必须要表达的点，要动用的元素以及需要划分的板块和栏目。
而且这些元素是你不能过度表达，也不能漏掉其中一个的必备条件。
举个例子，做一个产品促销站，页面上肯定得有的至少得有企业的标识、产品的标识、促销的按钮、产品特性和优点的表述、这次促销活动的卖点吧，这些都是最基本的。
通过与客户、产品经理或者相关负责人的深度沟通，以及你自己对这个Case的理解，这时候应该清晰地确定有哪些元素是你必须用到的，其他的才是你根据自己需要发挥出来的点缀品。
3，根据业务目的，安排要表达的元素的轻重排序。
现在，你应该对你要做什么，和为什么这么做比较清楚了，并且手中已经初步掌握了可以运用的元素和模块。
你需要根据当前CASE深层次的业务目的，来为这些元素进行排序。屡清思路，明白哪个或者哪几个元素是需要下功夫勾画。
明白重点突出，占页面比较大的比重，而哪些元素是仅仅点到为止即可，还有哪些是可以引申发挥，并且点缀衔接的。
4，策定页面布局。
现在，页面的基调和色调，要运用的手法，可以使用的元素，以及需要突出的重点，你都非常清楚了。
如果还不够清楚，请与客户、产品经理或者其它负责人再次沟通。
然后，在你心目中已经勾画出一个大概的轮廓。也就是说，结合你专业的排版知识，你可以开始策定页面的布局了。
5，进行边角的调优。
现在，你可能已经在草稿纸面上简单的策划了一下你需要做的页面。
[...]

---

Posted by 火恋の神父 on 07月 7th, 2008 :: Filed under 技术交流
Tags :: css, DIV, Photoshop, UI, 代码, 图标, 工作, 工具, 方案, 用户体验, 色彩, 设计

---