网易页面重构面试题

前一阵子在网上看见留传的一道前端的面试题。其实很早就开始做了，记得上次我做过一个山寨版的163首页。不过今天这个有点不一样：完全按照给出的需求对原来的设计稿进行最精确的还原，还要最大限度地兼容各大浏览器。一共花了我三天的零碎时间。也学到了很多的东西。放上来和大家分享下。有兴趣的还可以自己做试试，有什么问题欢迎留言讨论。

我自己制作完成后的效果：点击预览代码下载

制作素材很简陋就一张美工设计好的PNG：下面是要求达到的效果

下面我把自己感觉有难度的地方总结出来以及一些技巧

1.JavaScript效果的制作

由于我的JavaScript刚开始学习，第一眼就觉得两个”切换菜单”不怎么好做，想好了后就分别写了一个函数来实现切换功能。原理类似模似摄像头。核心代码如下(下方菜单)：

function show(a) {//接收传入函数(1,2,3,4)分别为手机，相机笔记本，数字电视
	var nodeUl = document.getElementById("ul-content");
		//从文档中获得ID为"ul-content"的节点
	var ulHeight = -280;
		//定义每次绝对定位的top值做为参数传入判断语句
	if (a==1){//切换第一个项目菜单
		nodeUl.style.top = (a-1)*ulHeight + "px";
	}
	else if (a==2){//切换第二个项目菜单
		nodeUl.style.top = (a-1)*ulHeight + "px";
	}
	else if (a==3){//切换第三个项目菜单
		nodeUl.style.top = (a-1)*ulHeight + "px";
	}
	else if (a==4){//切换第四个项目菜单
		nodeUl.style.top = (a-1)*ulHeight + "px";
	}
}

侧边拦与此效果类似。

2.CSS Sprite技术的应用

为了达到更好的加载速度和更好的用户体验，我把整个页面所需的图片分别拼合制作成两个图片，如下图：

也许你会问为什么不做成一张图片岂不是更方便？这里我总结了一个技巧：

一般来说图标(上图左边)的颜色都比较少可用GIF图片制成以达到文件最小化，在网页有”意义”的图片(上图右边)颜色比较丰富所以就得用JPG图片以达到最佳的表现效果。这样才能综合做到文件大小，载入速度，整体效果的最优化。

3.布局相关技巧

1> overflow属性在IE6中只对流动布局和浮动布局起作用，如果你想防止内部定位元素的溢出是会有bug的

2> 浮动固然好用但一定要记住用完后在合理的地方清除掉

3> 如果你布局出现问题最好的查找原因的方法是用border:1px solid #f00显示出问题元素或者用火狐插件CSS Viewer一目了然.

《网易页面重构面试题》上有 24 条评论

同感,一些内容性的图片用在背景里,编辑应该是无法填充内容

回复 ↓

有些内容性的图片其实是不需要整个的.

回复 ↓

那个JS可以换个方法嘛，这样写看起来太累赘了。

回复 ↓

kily 在 2009年8月30日16:46 说：

@soncy 呵呵.soncy兄一阵不见还好吧!很忙吗?

回复 ↓
kily 在 2009年8月30日16:48 说：

@soncy 愿问其详啊.我是刚研究JS不怎么熟练^!^

回复 ↓

经验好丰富，想问下兄台做了多久的前台设计。

回复 ↓

kily 在 2009年8月21日17:54 说：

@小渔呵呵。我一直是业余的，个人喜好罢了^!^ 不过还好想找份这样的工作就更好了。

回复 ↓

现在这个网站的字体颜色就舒服多了、

回复 ↓

kily 在 2009年8月18日20:33 说：

@卢松松呵呵。有吗？错错觉吧！我没改过主题呀^!^

回复 ↓

这个页面很复杂的，这么短时间完成，很厉害了。

回复 ↓

kily 在 2009年8月18日19:07 说：

@LAONB 其实分析好了就不怎么复杂了^!^

回复 ↓

原来发现兄弟，你还真是 NB 啊，水平这么高！ :D
建议把这些技术应用在你的blog上，如有可能再分享给大家啊。

回复 ↓

0cai 在 2009年8月17日23:04 说：

露相非真人啊！佩服！

回复 ↓
- kily 在 2009年8月18日19:01 说：
  
  @0cai 呵呵！我突然想起来一句话：其实每个人都很专业的，不过是在不同的方便罢了…
  
  回复 ↓
kily 在 2009年8月18日18:45 说：

@365hope 呵呵。我也想呢。不过每一次做主题得花好大的劲儿呢。那可不是一个个的简单技术。而是集合性非常高的整体，一个页面可以用很多方法做出来，关键是得用一种最简单却能实现所有功能的才好。

回复 ↓