您的位置：首页 > 职场人生

各位周末玩了一天累了吧，我们一起来做两道面试题吧（据说淘宝的哟）！

2013-05-18 17:20 405 查看

前言

我的CSS一直是一块短板，原因就是前几年对CSS不重视，现在重视了项目经验又不足，所以在这块上我是下了很大功夫的，也看了一点书，做了点东西，希望在几个项目后CSS水平有所提高！

完了，我最近在思考自己的CSS是短板，那么JS就是强项了吗？却发现自己前端水平貌似也不是很高，于是又开始走老路开始自卑起来了，于是这个时候我们要嘛做点实事做点项目，不然就在网上搞几道面试题来干干，这对个人提高很不错的。

我之前有一段时间有点迷茫，并且找不到学习的方向与方法，却在一次面试过程中从新获得了专注的力量，所以我们不要小看了面试题带来的冲击，面试题是帮助前端人员提高的非常好的途径呢！我不CSS是短板吗，好的那就上两道CSS的面试题好了。

进入正题

<!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>
<title></title>
<style>
* { margin: 0; padding: 0; }
#test01 { border-collapse: collapse; }
#test01 td { border: 5px solid blue; width: 50px; height: 50px; text-align: center; }
#test01 td:hover { border-color: Red; }

#test02 { position: relative; z-index: 1; }
#test02 a { border: 5px solid blue; width: 50px; height: 50px; _width: 60px; _height: 60px; text-align: center; display: block; position: absolute; z-index: 2; }
#test02 a:hover { border-color: Red; z-index: 3; }
</style>
<!--<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var tb = $('#test02');
for (var i = 1; i < 10; i++) {
var c = parseInt((i - 1) / 3);
var t = c * 50;
var ll = i % 3 == 0 ? 3 : i % 3;
l = (ll - 1) * 50;
if (l != 0) {
l += 5 * (ll - 1);
}
if (t != 0) {
t += 5 * c;
}
var tmp = $('<a href="javascript:;" style="left:' + l + 'px; top: ' + t + 'px">' + i + '</a>');
tb.append(tmp);
}
});
</script>-->
</head>
<body>
<h1>
丑陋的table</h1>
<table id="test01">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
<td>
8
</td>
<td>
9
</td>
</tr>
</table>
<hr />
<h1>
a的绝对定位</h1>
<div id="test02">
<a style="left: 0px; top: 0px" href="javascript:;">1</a><a style="left: 55px; top: 0px"
href="javascript:;">2</a><a style="left: 110px; top: 0px" href="javascript:;">3</a><a
style="left: 0px; top: 55px" href="javascript:;">4</a><a style="left: 55px; top: 55px"
href="javascript:;">5</a><a style="left: 110px; top: 55px" href="javascript:;">6</a><a
style="left: 0px; top: 110px" href="javascript:;">7</a><a style="left: 55px; top: 110px"
href="javascript:;">8</a><a style="left: 110px; top: 110px" href="javascript:;">9</a></div>
<hr />
</body>
</html>


View Code



于是我们实现了功能，因为在IE6下面css 盒模型解析有误，所以还进行了一点hack处理，现在我们回头看看这道题我做的有什么不足。

看了代码的朋友可能会注意到，我其实是使用js生成的html代码，js代码就不用看了，没经过思考的，但是每个元素上面都会有style

我不知道大神是怎么做的，但我能想到的就是这个样子了，至于这道题究竟想考察什么，小的我也不知道了。。。。不明觉厉！

再一次附上预览地址：

http://sandbox.runjs.cn/show/xhqxoohd

于是，我们进入下一个题目吧。

第二题

首先附上预览地址：http://sandbox.runjs.cn/show/7vpjps1r

说实话，望着第二题，我看了很久对其中一个词语没有搞懂“现代浏览器”，这里所说的现代浏览器是指IE9+的浏览器吗？？？

但是搞到现在，如果不使用HTML5和CSS3的东西就用纯html，我怕我是实现不了的，于是我们在看看他这个题目

前面鼠标以上后，文字变慢慢变大，而且似乎只有一个a标签<a href="#" title="订阅博客">订阅博客</a>，下面那根红线应该是其他的吧？

但是对于CSS3来说，这个题好似没什么难度，但会是坑吗？我们来看看：

PS：文字详细说了是一个a标签，所以我这里应该只能用一个标签吧

<!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>
<title></title>
<style>
* { margin: 0; padding: 0; }
a { display: block; border-bottom: 4px solid red; text-decoration: none; color: Gray; font-size: 12px;
transition: font-size 1s; padding: 0 0 5px 10px; }
a:hover { font-size: 50px; }
</style>
</head>
<body>
<a href="#" title="订阅博客">订阅博客</a>
</body>
</html>




于是我感觉怎么莫名其妙的就做完了。。。。也不知道对不对。。。

http://sandbox.runjs.cn/show/7vpjps1r

结语

之前我们项目经理说过，没事出去面试一下，会得到增长的，到我这里就变成了没事做两道面试题会有好处的，呵呵，希望这两道题能给各位代理乐趣。

如果觉得不错，就帮顶哟
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航