天空下的雨

很多时候在做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的自适应宽度和高度了。

罗列常去的或不常去但也去过的博客和技术网站！

技术门户：
博客园: http://www.cnblogs.com
目前最活跃的.NET技术社区，.NET程序员必去的网站之一。

CSDN：http://www.csdn.net
刚学程序那会经常去论坛问问题，现在很少去。

infoQ:   http://www.infoq.com/cn/
infoq的中文站，软件开发中比较创新的一些内容，涵盖JAVA、.NET、Ruby等一些企业级架构的东西，里面的东西大多有深度，不常去。

蓝色理想：http://www.blueidea.com/
网站设计人员之家，主要关于网站页面设计和前端体验开发，通常搜CSS内容会搜到这里。

团队博客：
淘宝网用户体验设计UED
http://ued.taobao.com/blog/

口碑网用户体验设计UED
http://ued.koubei.com/

阿里软件UED团队
http://www.alisoftued.com

19楼UED团队
http://ued.dukuai.com/blog/

用户为中心的设计(UCD),UCD大社区
http://ucdchina.com/

站长、IT相关
落伍者论坛：http://www.im286.com/
中国站长的集聚地，最大站长社区

站长网：http://www.admin5.com/
中国站长经常吹嘘的地方

中国站长站：http://www.chinaz.com/
站长的全面资讯

DoNews：http://www.donews.com/
IT社区-媒体平台

草根网：http://www.20ju.com/
主要是关于IT资讯的内容，涵盖网站设计，运营，技术，招聘等。。

个人技术博客：
cssrain http://www.cssrain.cn  
懒人开发人员一定要去看看哦，资源超多，很多效果例子。特别是jquery。

李会军：http://www.dotneteye.cn  
去过博客园的应该都知道吧，神仙级专家。

赵劼：http://www.cnblogs.com/JeffreyZhao/  
同上，为博客员知名专家，特佩服他！

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

下面就列举了一些用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]-->

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

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

a{  
outline:none;  
}  

2、html代码也类似:

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

下面是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写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下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; 阅读全文>>

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

阅读全文>>