重温两道页面重构面试题

最近一直在研习JavaScript,CSS方面的知识关注的甚少.偶然间又看到这两道页面重构面试题,心血来潮,重温一下,呵.其实这两道题之前就做过,挺有意思.
题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架.
思路:水平垂直均居中的实现,当然非absolute加外边距负值结合莫属.闲话略去,看代码及演示吧.
2个DIV实现的核心CSS代码:点此查看DEMO

.div_a{width:50px; height:200px; background:#a40000; position:absolute; left:50%; top:50%; margin:-100px 0 0 -25px}
.div_b{width:200px; height:50px; background:#a40000; position:absolute; left:50%; top:50%; margin:-25px 0 0 -100px}

3个DIV实现的核心CSS代码:点此查看DEMO

.div_a{width:200px; height:50px; background:#a40000; magin-top:75px}
.div_b{width:50px; height:200px; background:#a40000; margin:-125px 0 0 75px}
.div_c{width:200px; width:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px}

5个DIV实现的核心CSS代码:点此查看DEMO

.div_a{width:200px; width:200px; position:absolute; background:#a40000; left:50%; top:50%; margin:-100px 0 0 -100px}
.div_b,.div_c,.div_d,.div_e{width:75px; height:75px; background:#fff}
.div_b,.div_d{float:left}
.div_c,.div_e{float:right}
.div_b,.div_c{margin-bottom:50px}

题二:这是一道很费脑筋,但很有意思的一道题.这道题也能让你领略到CSS的博大精深.原题要求是,让某一图形水平垂直居中于当前可视页面,且图形是一个无限缩小的,就是四个角的正方形依次缩小,在用户体验上要满足尽最多用户.
思路:既然要求图形水平垂直居中,那最终它占的肯定是一个正方图形;从用户体验上,满足最多用户,主要是受限于用户的浏览器窗口大小.目前主流的显示器分辨率是1024*768,拿大陆用户量最大的IE来计算,其不安装插件的情况下可视高度约为590px,所以我们要实现的正方图形必须限制在590px*590px里面(分辨率宽大于高,所以以高为底线计算).按最中间的图形大小为200px*200px计算,200+100*2+50*2+25*2+12.5*2+6.25*2~=590.
题二思路借签自网络,原作者已无从考证,谨此感谢.
核心CSS代码:点此查看DEMO

.div_center{width:200px;height:200px;left:50%;top:50%;position:absolute;margin:-100px 0 0 -100px;background:#a40000}
.div_a,.div_b,.div_c,.div_d{width:50%;height:50%;position:absolute;background:#a40000;}
.div_a{left:-50%;top:-50%}
.div_b{right:-50%;top:-50%}
.div_c{left:-50%; bottom:-50%;}
.div_d{right:-50%; bottom:-50%;}

html部分:

个人觉得题一有一定的实用价值,题二只是对思维的一个考验,可能并不会在实际应用中用到.题二还可以用JS来实现,略过.

jQuery实现同一点击,两个不同链接,指向两个不同的iframe

最近写了两个管理后台的前端页面,其中有一个管理后台,左侧菜单导航和右侧内容页是两个iframe,需求是,点击上面的主导航时,左侧iframe和右侧iframe调用不同的链接.个人推荐用jQuery实现,代码简洁,扩展性强.
jQuery部分:

function gotourl(url_a, url_b)
{
	$('#ifr_a').get(0).src = url_a;
	$('#ifr_b').get(0).src = url_b;
}

html调用:

点我下面两个iframe内容都会变


通过js判断iframe的id,然后给不同id赋不同的src值也可以实现,但代码相对复杂一点.

新居优化初见成效,呵

新博发布第四天,谷歌谷歌Mr.Think,前两项已被占据,哈哈…
博客发布第四天
新博发布第三天,谷歌Mr.Think,我的博客排名第一,前五项已有两项是MrThink.net的,另一项为旧博bluebirdsky.cn的,呵呵.上个图,沾沾自喜下:)
Mr.Think发布第三天谷歌搜索截图
百度暂未收录:(

针对主流浏览器的CSS-HACK写法及IE常用条件注释

对于前端工作者,最痛苦的事莫过于浏览器兼容性的调试,而这最痛苦的事中,最变态的莫过于微软的三个版本IE6.0/IE7.0/IE8.0. 为了让所写代码在各主流浏览器中正常运行,我们不得不为各种浏览器写对应的样式。本文,博主将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.
一、通用区分方式:
IE系列可识别 \9 ;
IE6、IE7能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important;
IE7能识别*,也能识别 !important;
IE8能识别\0,不能识别*,+,_,* 加!important;
FF不能识别*,但能识别 !important;
例如style=”*width:10px!important; width:20px;”,其在IE7下宽度为10px,在IE6下宽度是20px.
其中还有如下三种写法:
第一种

width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
*width:300px!important; /* ,IE7 既能能识别*号,也能识别important */
*width:400px; /* IE6也能识别*号 */
/*Mr.Think提示:请注意书写顺序@MrThink.net*/

第二种

width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
*width:300px; /* IE7也能识别*号 */
_width:400px; /* IE6能识别下划线*/
/*Mr.Think提示:请注意书写顺序@MrThink.net*/

第三种

width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
+width:300px; /* +只识别IE6 IE7 */
_width:400px; /* IE6能识别下划线*/
/*Mr.Think提示:请注意书写顺序@MrThink.net*/

二、不常见的HACK(OP表示Opera,SA表示Safari),其中第3条比较实用
1..color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
2..color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
3..color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
4..color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
三、各种浏览器独立支持的hack
width:100px\0;/* 支持IE8 */
_width:100px; /* 支持IE6 */
[width:100px; /* 支持IE6,7 */
+width:100px; /* 支持IE6,7 */
*width:100px; /* 支持IE6,7 */
*width:100px!important; /* 支持IE6,7, */
*+width:100px; /* 支持IE6,7, */
*+width:100px!important;/* 支持IE6,7, */
width:100px\9; /* 支持IE6,7,8 */
width:100px!important; /* 支持IE6,7,8,FF */
w\idth:100px; /*IE5.x不支持 IE6、IE7、IE8、FF支持 */

四、IE特有的html条件注释使用规则
1.仅IE可见的写法



document.getElementById的简写方式

Mr.Think是一个喜欢简洁的人,喜欢如诗一样的代码.不喜欢.NET的代码,就是因为经常看到同事用VS后生成出来的一段段冗长的代码.在我的思维中,JavaScrip是一种很飘逸的语言,所以,写给TA的代码,也一定要做到飘逸,呵.比如用_$(id)代替document.getElementById(id).
个人比较推荐用prototype中对document.getElementById的定义:

function $()
{
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++)
  {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1)
      return element;
    elements.push(element);
  }
  return elements;
}

你还可以用以下代码来定义:

function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
	return document.getElementById(objectId);// W3C DOM
	} else if (document.all && document.all(objectId)) {
		return document.all(objectId);// MSIE 4 DOM
	} else if (document.layers && document.layers[objectId]) {
		return document.layers[objectId];// NN 4 DOM.. note: this won't find nested layers
	} else {
		return false;
	}
}

这样写不断可以为JS文件省掉不少字符,还可以避免输入时的错误.
有一个小小的说明,$是一个自定义的值,你可以根据你的喜好写任何一个非JavaScript保留关键字,比如i_d,myid,等等你喜欢的定义.如果你的页面中调用到了jQuery的库文件,你可以直接用$代替document.getElementById.


渔夫科技