Div+CSS[Web standards]
CSS:alpha背景透明
No Comments »
在各浏览器下用css实现背景透明。 但有个bug就是div中的所有元素都透明。这个问题一直困扰着我，有幸找到一种解决办法，就是加上span元素，在span中定义 position:relative，我也不知道为何加绝对定位就能解决，有时候方法就这么神奇似的。遗憾的是这个方法也只针对IE，其他浏览器还没有找 到方法。
代码：
<!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>续写alpha透明</title>
<style type=”text/css”>
<!–
.transparent{
width:450px;
height:50px;
color:red;
font:14px 700 “宋体”;
filter:alpha(opacity=35);
-moz-opacity:0.35;
opacity:0.35;
background-color:#000;
}
.transparent span { position:relative}
–>
</style>
</head>
<body>
<div class=”transparent”><span>CSS实现背景透明效果</span></div>
</body>
</html>
图片说明：
解释:
filter:alpha(opacity=35); 支持 IE 浏览器
-moz-opacity:0.35; 支持 FireFox 浏览器
opacity:0.35; 支持 Opera，safari 等浏览器
重置默认样式 css reset 分享
No Comments »
最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章， 可以看看国外使用css reset的比例调查。
这里有一篇总结css reset比较全面的文章，列举了多种css reset的写法，可以看看。
译文地址查看
原文地址查看
接下来我也查看了国内的两个网站，用Firebug按F12看看他们的css reset怎么写的？
淘宝（www.taobao.com）：
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px [...]
对付CSS兼容问题的十个超级技巧
No Comments »
一、针对firefox ie6 ie7的css样式
现在大部分都是用!important来 hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释， 会导致页面没按要求显示！找到一个针对IE7 不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
Example Source Code
#abc { color: #333; } /* Moz */
* html #abc { color: #666; } /* IE6 */
*+html #abc { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
二、CSS布局中的居中问题
主要的样式定义如下：
Example Source Code
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; 就可以了。
三、盒模型
Example Source Code
#box{
;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
>//for ff
;
//for [...]
css hack浏览器兼容
No Comments »
各大浏览器独享hack
ie6： “_“下划线是它的独享，例如: _background-color:#000;
ie7： “+!important” 复杂了点，但是为了效果… ，例如: + background-color:#000 !important;
FF： “!important“,他和ie7有很多类似，如果想要区分开ie和FF,只要把FF的代码写在ie的前面即可（下面会写到） ，例如: background-color:#000 !important;
各大浏览器交集hack
以下段落出自CSS hack:区分IE6，IE7，firefox
区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange; *background:blue;
区别IE6与IE7：
background:green !important; background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange; *background:green !important; *background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important
IE6
IE7
FF
*
√
√
×
!important
×
√
√
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
background:orange;*background:green;_background:blue;
这个很重要：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。Visit
多IE下的页面在线测试
No Comments »
ipinfo.info,可以在多内核IE里进行测试,并且可以在IE6与IE7的产生一张对比图，通过图片，你可以清楚看到被测试页面在IE6与IE7下的不同。Visit
30款免费CMS、新闻杂志型Wordpress主题
1 Comment »
新闻杂志、CMS型的WordPress主题是blogger极力追捧的。此类主题一改以往单纯的blog展示模式，用更合理，图文并茂，多菜单导航，多栏混合等方式将内容完美的体现出来。如果blogger能在此类主题上加上自我创新的元素，至少能界面上能赢取部分读者的“芳心”。
Magadine 1.2 Demo | Wordpress Theme 详情
Overstand Demo | Wordpress Theme 详情
Futurosity Vero Demo | Wordpress Theme 详情
Cool News Demo | Wordpress Theme 详情
Rebel Magazine Demo | Wordpress Theme 详情
Arthemia Demo | Wordpress Theme 详情
Linoluna Demo | Wordpress Theme 详情
Thunderbolt Lett tema, minimalt med grafikk. Temaet er gratis hvis du ikke fjerner linkene i footer. [...]
几天没更新博客,在忙richwelder网站并上线!
No Comments »
这个星期接到一个任务(网站http://www.richwelder.com附界面)，白天忙公司工作，晚上在家里忙任务，一直忙到1点左右，早上7点起来..真累，真想尽快完成，好好休息一下。
庆幸的是整体基本完工，还有二块小细节没有完成（正在研究中…）。
这次在任务制作中, 扔掉了曾经一直在用的Dreamweaver，用一款开源notepad++编辑器来写css和div页面，刚开始感觉怪怪的，而且很不适应，因为没有像Dreamweaver随时可视化，希望完成这次任务以后，能慢慢适应notepad开源小巧的编辑器来完成以后的工作任务。
网站地址：http://www.richwelder.com
20 个漂亮的 Ajax + CSS 表格
No Comments »
并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
更多查看之前收藏30个ajax特效 ：
#1. Tablecloth
Tablecloth 由CSS Globe 开发，是一个轻量级的、易于使用的表格，以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。
#2. Ask the CSS Guy Table
Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格，例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。
#3. A CSS styled table version 2
Veerle Duoh 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法，并且在实现的过程中充分考虑了表格的可访问性。
#4. Sortable Table
Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。
#5. Row Locking with CSS and JavaScript
演示了如何利用Javascript 和 CSS 实现“锁定行”的效果，选中的行会一直显示高亮效果直到用户再次点击才会消失。
#6. Vertical scrolling tables
如果你有大量的数据但是没有足够大的空间来显示它，这会是一个很好的解决办法。通过CSS 固定表格的页眉和页脚，但是内容却可以滚动显示。
#7. Replicating a Tree table
利用HTML 和CSS 建立的树状表格。
#8. Collapsible [...]
12 个极具创意的 Javascript + CSS 菜单效果
No Comments »
在谈到设计网站的导航栏以及菜单时，每一个网页设计师都希望自己的设计能够极具创意，与众不同。现在我们从网上收集了一些基于Javascript + CSS 的菜单效果，这些菜单使用都非常简单，而且也易于修改，相信它们一定能满足你的需要。
#1. Sexy Sliding Side Bar
漂亮的基于MooTools 框架的边栏平滑菜单效果。此外，还有一个基于Prototype 的版本。
示例1. 基于MooTools 的版本：点此查看
示例2. 基于Prototype 的版本：点此查看
#2. FastFind Menu Script
基于jQuery 框架，这个脚本可以利用动态的Ajax 嵌套加载多层菜单，还可以通过利用Interface for jQuery 组件生成拖放效果。
[...]
25个优秀的WordPress主题设计展示
No Comments »
WordPress 是一个非常优秀的开源博客平台。尽管它主要用于博客，但是只要动动脑筋，WordPress 潜力无限。
如果您正为新建的博客认真思考并创造一个主题，不妨借鉴下面这25个优秀的博客，也会会给您带来灵感。
1. 3.7 Designs
2. Blogsolid
3. Candes Projects
4. coda.coza
5. ISO50
6. Larissa Meek
7. Vikiworks? Studio
8. keasone.de
9. RobGoodlatte.com
10. Graphik’n’Sound
11. La Vie Est Une Fête !
12. Moderno Prometeo, escrito por Rolando Hernandez
13. Mark Forrester
14. Stylized Web
15. Portfolio of Adit Shukla
16. Antiphrasis
17. JESUS RODRIGUEZ VELASCO
18. Basmati Tree
19. La Privata Repubblica
20. {e} house studio
21. Arnii
22. Pelangi Petang Production
23. Kevin [...]
