用乐观的生活，品味非凡人生。

使用JS的简单方法实现Rewrite的301域名转向

时间：2011-12-16 作者：天空下的雨 分类： 网页技术 浏览：1172

在做网站项目的时候，由于新老域名的问题，需要做301跳转，但发现虚拟主机不支持伪静态(Rewrite)功能，而项目全是php生成html的，动态方法也无法实现。

于是想到了JS，不管是动态和静态页面都可以完美支持。分享出来，下面是JS代码实现方法：

<script type="text/javascript">
/* 跳转JS代码 */
try 
{ 
var s_domain = location.host; 
var js_path = "www.68080.com"; 
if (s_domain != js_path) 
{ 
var str=window.location.href;
var es=/sh96.cn/;
es.exec(str);
var right=RegExp.rightContext;
top.location.href = "http://"+js_path+right; 
} 
} 
catch(e) { } 
</script>

代码解释：

代码中的第6行 www.68080.com 是新的域名地址，第10行 sh96.cn 则是老的域名。

代码例子：

当用户访问 http://sh96.cn/a/yinyue.html 的时候，

自动跳转到 http://www.68080.com/a/yinyue.html 

关于textarea换行显示的简单解决办法

时间：2011-3-19 作者：天空下的雨 分类： 网页技术 浏览：1911

网页编程中，有时候我们在textarea中输入：

15个国外最流行的CSS框架，帮助页面设计更完美

时间：2010-12-18 作者：天空下的雨 分类： 网页技术 浏览：1298

CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。虽然对于小的WEB开发项目来说，CSS框架并不一定适用，但是对于规模较大的团队开发项目而言，CSS框架不仅能加快设计开发速度，而且还能有效解决网站改版中带来的诸多麻烦和问题。这里推荐的15款CSS框架是现在国外最流行的CSS框架，希望能对你的开发有所帮助！

例如：
typography.css 基本排版规则
grid.css 基于网格的布局
layout.css 通常的布局
form.css for 表单样式
general.css 更多通用规则

1 . Elements CSS Frameworks
Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。

2 . YUI Grids CSS
YUI Grids基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。 更多信息

3 . YAML CSS Framework
Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

4 . Blueprint CSS
Blueprint 是一个CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

5 . Schema Web Design Framework
Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。

6 . CleverCSS
CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。

7 . Tripoli CSS Framework
Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

8 . ESWAT Web Project Framework
ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

9 . Boilerplate CSS Framework
作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

10 . WYMstyle CSS Framework
WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

11 . Content with Style Framework
Content with Style下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板。

12 . Logicss Framework
Logicss 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用css代码生成工具。

13 . That Standards Guy CSS Framework
That Standards Guy只能调用单个样式文件，主样式需要取得 CSS认证(WCAG 1.0)； 跨浏览器兼...

DIV在100%下iframe宽度高度的自适应的问题

时间：2010-11-1 作者：天空下的雨 分类： 网页技术 浏览：3270

很多时候在做B/S后台系统的时候，一般管理页左边为管理菜单，右边为操作页面，为了维护方便通常会使用iframe来展示操作管理页面，显然用固定的宽度和高度并不能满足要求，经常我们需要让页面自动适应用户分辨率，提高用户体验。下面是可以自适应代码，网页表头声明为xhtml1-transitional.dtd才能支持。

<iframe scrolling="auto" name="main" src="aaa.html"  frameborder="0" height="100%" onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>556?fdh:556)" width="100%"></iframe>

随后发现这段代码在DIV的宽度为100%时（<div id="MarRight" class="MarR">iframe 框架</div>），IE6、火狐等浏览器iframe并没有自适应DIV的宽度和高度，而是显示不全或出现滚动条的情况。

解决办法如下：

<script type="text/javascript">
window.onload=function(){
  var a=document.body.clientWidth-182;  //取得iframe框架的实际宽度
  // alert(a);  //弹出数值测试
  document.getElementById("MarRight").style.width=a+"px";
}
</script>

天空下的雨：绿色标示部分根据需要修改，通过上面的代码，就可以在其他浏览器中iframe的自适应宽度和高度了。

使用if IE控制语句解决浏览器兼容问题

时间：2009-11-20 作者：天空下的雨 分类： 网页技术 浏览：349

在网页的布局中，通常会遇到各浏览器解析网页的核心不同，而导致页面错乱的问题。

下面就列举了一些用if控制语句解决的方法。

<!--[if !IE]>除IE外都可识别<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->

<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

去掉网页设计中的超链接虚线(兼容各大浏览器)

时间：2009-10-20 作者：天空下的雨 分类： 网页技术 浏览：1026

在网页设计中，我们通常会看到点击链接时，页面上会出现链接的虚线。下面我给大家两个个简单的办法

1、在CSS样式中，加入下面的代码，意思是链接边框为空

a{  
outline:none;  
}  

2、html代码也类似:

网站点击链接提示&quot;正在处理请稍后...&quot;提高用户体验

时间：2009-10-13 作者：天空下的雨 分类： 网页技术 浏览：2143

天空下的雨：有时候网页上内容较多打开会慢，这时候我们可以使用简单的方法，让用户点击按钮时，弹出一个“正在处理请稍等...”的信息，加强用户的页面体验。下面点击效果图和实例代码给大家参考：



下面是CSS样式，先把DIV层隐藏起来：

<style type="text/css">
.updateing{background:#dd1058;border:1px solid #dd1058;position:absolute;top:92px;z-index:1;color:#fff;font-size:12px;padding:3px 5px;width:112px;display:none;}
</style>

当鼠标点击链接目标，执行下面的JS代码，意思是把先前隐藏起来的DIV显示出来

<script type="text/javascript">
function updateing()
{
 document.getElementById('updateing').style.display='block';
}
</script>

下面就是在Body内容中的div布局

<div id="updateing" class="updateing" style="position:absolute;top:180px;">正在更新请稍后...</div>

<a  onclick="updateing();" href="/abc.htm" >最新上传</a>  /*需要点击的链接*/

这样就基本上完成效果了，通过这样的方法，我们还可以用在其他的地方，如表单的提交等等，大家可以去试试。

刚看到有些朋友把我的文章转到自己的博客或空间，作者却改成自己的，这样很不好。
本博客大部分内容都属于[天空下的雨]原创，请需要转载的朋友注明出处，并加上链接。谢谢！

CSS的渲染效率，网上收集几点吧

时间：2009-9-8 作者：天空下的雨 分类： 网页技术 浏览：1579

根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。

1、十六进制的颜色值对位数与大小写　　

      编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
　　* 不赞成 - color:#f3a;
　　* 建议用 - color:#FF33AA;
2、display与visibility的差异

　　他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
　　* 不赞成 - visibility:hidden;
　　* 建议用 - display:none;
3、border:none;与border:0;的区别

　　和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
　　* 不赞成 - border:0;
　　* 建议用 - border:none;

4、不宜过小的背景图片平铺

　　一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
　　* 不赞成 - 宽高8px以下的平铺背景图片
　　* 建议用 - 衡量适中体积及尺寸的背景图片
5、IE的滤镜

　　IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
　　* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
　　* 建议用，最好选择其它方法能避免使用滤镜。
6、*{ margin:0; padding:0;}避免浏览器样式差异

　　*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
　　* 不赞成，使用*号通配符
　　* 不赞成，div span button b table等标签纳入通配符控制内外填充样式
　　* 建议用，有选择性地使用通配符控制内外填充样式。
7、不要添加额外的标签来描述class或id

　　如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
　　* 不赞成 - button#backButton { }
　　* 不赞成 - .menu-left #newMenuIcon { }
　　* 建议用 - #backButton { }
　　* 建议用 - #newMenuIcon { }

自适应略缩图代码，再加以扩展

时间：2009-6-5 作者：天空下的雨 分类： 网页技术 浏览：2358

天空下的雨：今天刚好碰到这样一个问题，一个图片展示的页面，由于图片过大，把网页给撑开了，这样及其影响页面美观。如果设置固定的宽度和高度，图片又会不好看。于是，参考了网上的代码，加以改进 ，并 用Ajax加入了预载入效果。完美解决此类问题。

<style type="text/css">
PhotoLoad {
 overflow:hidden;width:180px;height:125px;margin:10px auto 0px auto;border:1px #cccccc solid;text-align:center
}
.PhotoLoad_1 {
 overflow:hidden;width:180px;height:125px;margin:10px auto 0px auto;border:1px #6C6 solid;text-align:center
}
</style>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
function SImg(ImgId,_W,_H){window.setTimeout("InfoImgNow('"+ImgId+"',"+_W+","+_H+")",500)}
function InfoImgNow(ImgId,_W,_H) {
if(!$(ImgId))return;
var ImgUrl=$(ImgId).src;
var IW=$(ImgId).width;
var IH=$(ImgId).height;
if(IW>_W){
 IW=_W;
 IH=_W/$(ImgId).width*IH;
 }
if(IH>_H){
 IH=_H;
 IW=_H/$(ImgId).height*$(ImgId).width;
 }
if(IH<_H){
 if(!$(ImgId+"_Div"))return;
 var MT=(_H-IH)/2;
 $(ImgId+"_Div").innerHTML="<img src='"+ImgUrl+"' style='width:"+IW+"px;height:"+IH+"px;margin-top:"+MT+"px' oncontextmenu='return false'>";
 }else{
 $(ImgId+"_Div").innerHTML="<img src='"+ImgUrl+"' style='width:"+IW+"px;height:"+IH+"px' oncontextmenu='return false'></a>";
 }
}
</script>

<div id='Photo[page:i]_Div' class='PhotoLoad' onclick="window.open('链接网址')" onmouseover="this.className='PhotoLoad_1'" onmouseout="this.className='PhotoLoad'"><img src='style/photoload.gif' /><a href="[page:aurl]" title="[page:titlex]" target="_blank"><img id='Photo[page:i]' src='[page:Indexpic]' onload='SImg(this.id,180,125)' onerror="this.src='style/noerror.gif'"></a>
</div>
/*[page:i] 图片编号（div img 要一致）*/

Lightbox JS v2.0 点击图片逐渐放大的效果

时间：2009-5-27 作者：天空下的雨 分类： 网页技术 浏览：1240