Designsor » CSS布局 http://www.designsor.com End Web Developer's Blog Sat, 14 Jan 2012 02:35:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 阿里巴巴UED前端开发面试题 http://www.designsor.com/2010/04/02/albb/ http://www.designsor.com/2010/04/02/albb/#comments Fri, 02 Apr 2010 07:29:56 +0000 xiaojue http://www.designsor.com/?p=555 下面是朋友发给我的阿里巴巴UED前端开发的网上测试题，感觉很有意思，把我所写的答案贴出来分享一下，主要题目为4部，第一个是一些职业发展倾向的心理测试，跳过不说，然后是一道CSS布局题目，比较简单，下面给出题目要求：

我列出我的代码：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
<meta name=”author” content=”XiaoJue”>
<title>用CSS实现布局</title>
<style>
*{margin:0px; padding:0px;}
div{background:#CDD8DA;}
.left_t,.left_d{width:90px;}
div.left_t{height:152px;}
div.left_d{height:117px;margin-top:10px;}
div.main{width:217px;height:279px;left:100px;top:0px;position:absolute;}
</style>
</head>

<body>
<div class=”left_t blow”>a</div>
<div class=”left_d”>b</div>
<div class=”main blow”>c</div>
</body>
</html>

使用了绝对定位和一个下边距，这个因人而异了，3个标签构建布局，你可以写全屏幕的等等等等，但是我做的是按照它给出图片的样子，进行的布局。

下面一道是JS问题，比较有意思，也是着重说一下，看题目要求。

关键字封装。复用。提示：可以使用任何开源代码。也就是框架库了。

我为了快速实现，选择了最熟悉的jquery，为了体现封装和复用，选择了jquery的插件机制来进行封装和复用。

下面是代码预览地址：

http://www.designsor.com/demo/albb.html

具体代码可以查看连接里的页面源代码，实现方法有很多，在不做HTML页面修改和不影响所有其他东西的前提下，使用了JS来实现要求，兼容FF/IE，其他没有测试，但是所有方法均是jquery的方法，所以兼容性估计应该可以保障。

封装之后的调用代码样例：

$(function(){
$(‘.blow’).jblow({“b_size”:25}); //调用封装的方法，可多次调用不影响HTML结构
})

HTML：

<body>
<div class=”left_t blow”>a</div>
<div class=”left_d”>b</div>
<div class=”main blow”>c</div>
</body>

好了，最后给出面试题地址：

http://job.aliued.com/race/chooseRace/wd.html

]]> http://www.designsor.com/2010/04/02/albb/feed/ 5