如何进行简单的功能仿制(网页制作)

现在企业网站上越来越重视类似网盟的这种宣传设计，个人认为这个玩意确实不错，但是至于能招来多少顾客，确实说不好，

但是客户能在进入网站之后，用最快的方法找到自己想要的信息，这个确实是不错的实现。

研究了被仿网站的代码，发现其背景其实就是一张图片，然后在图片上划分区域就可以，那这么弄其实就比较简单了。

1）首先仿做一个类似的导航图片，因为被仿的网站图片较大(1100px*100px),所以请美工同学做了个960px*100px的图片，如上图所示；

2）把这张图作为背景，然后在这个背景上进行区域分割，这部分的实现由css来完成，整个功能区被分成15个大小不等的区域，

     CSS代码如果个人能力足够的话可以自己花时间敲，像我这样实力还不足的，就可以直接把仿制网站的css另存，然后去掉其中跟本模块无关的

     样式即可；

/*常用关键词模块start */
/* 背景区域以及链接hover的效果*/

.idx-cjwt{position:relative;height:100px;margin-top:20px;background:url(/images2014/wx_pop_qus.jpg) no-repeat;} 
.idx-cjwt a{position:absolute;overflow:hidden;text-indent:-9999px;}

.idx-cjwt a:hover{text-decoration:none;background:#fff;opacity:0.2;filter:Alpha(Opacity=20,Style=0);}

/* 区域划分*/
.idx-cjwt a.a-1{left:167px;top:0;width:102px;height:60px;}
.idx-cjwt a.a-2{left:167px;top:62px;width:102px;height:38px;}
.idx-cjwt a.a-3{left:271px;top:0;width:90px;height:45px;}
.idx-cjwt a.a-4{left:271px;top:47px;width:90px;height:53px;}
.idx-cjwt a.a-5{left:362px;top:0px;width:108px;height:28px;}
.idx-cjwt a.a-6{left:362px;top:30px;width:108px;height:40px;}
.idx-cjwt a.a-7{left:362px;top:72px;width:108px;height:29px;}
.idx-cjwt a.a-8{left:471px;top:0;width:58px;height:62px;}
.idx-cjwt a.a-9{left:471px;top:64px;width:58px;height:36px;}
.idx-cjwt a.a-10{left:530px;top:0;width:172px;height:33px;}
.idx-cjwt a.a-11{left:530px;top:35px;width:58px;height:65px;}
.idx-cjwt a.a-12{left:590px;top:35px;width:112px;height:65px;}
.idx-cjwt a.a-13{left:703px;top:0;width:93px;height:49px;}
.idx-cjwt a.a-14{left:703px;top:51px;width:93px;height:49px;}
.idx-cjwt a.a-15{left:797px;top:0;width:163px;height:100px;}
/*常用关键词模块end */

3) 在每个区域添加链接代码：

<div class="idx-cjwt" style="color:#000; padding-bottom:18px;">
        <a href="/zhuanti/xfzt/" target="_blank" class="a-1">烤瓷牙修复</a>
        <a href="/yczj/2801.html" target="_blank" class="a-2">门牙大怎么办</a>
        <a href="/zhuanti/yxycjz/" target="_blank" class="a-3">牙缝大怎么办</a>

        ... ... ...
</div>

4) 这样整个功能就已经仿制完成了。