之前在复习网页制作，仿照菜鸟教程的首页写了一个仿菜鸟首页。效果如下：

 制作网页之前先布局。原网页如下：

分析该网站的布局，我们可以发现，菜鸟教程的首页主要有四个模块，分别是顶端，顶端导航， 左边菜单，右边菜单内容。

先在原网站查看源码，找到相应模块的参数，根据这些参数来设置自己的模块，这样就可以增加自己网页与原网页的相似度。

1、顶端LOGO和搜索框

顶端LOGO和文本框的制作都很简单，文本框的搜索功能的实现在另一篇博客中有详细介绍，这里就不多加赘述。

博客链接：https://blog.csdn.net/Searchin_R/article/details/82819451

2、导航条

其次需要制作的就是导航条。菜鸟教程首页的导航条的下方是带小三角形的。我制作的没有加上。这个制作方法并不困难，说白了就是给div设置一个带小三角形的背景图片，等鼠标滑动到相应的div就会显现出来。

原网站：

我做的：

导航条的制作方法：https://blog.csdn.net/Searchin_R/article/details/82821119

3、左边菜单

左边菜单为一个大的div，该div又被分割成了数个小的div，每个div中都写上相应的名字，名字前面再加一个img，img的参数可以参照原网页的参数来设置，如果原网页设置的参数和自己网页的参数有出入，则自己看着调整一下就可以。菜单中的边框可以用border来设置。字体的参数参照原网页参数。这种菜单都很简单，只要做出一个小div，剩余的div按照模式来就可以大量制作。

  原网站图：                                                                 效果图：      

4、右边菜单内容

右边菜单栏是一个大的div，该div的边框可以通过border属性来设定。每一个内容块的标题（如HTML/CSS）也是一个div，页面中的下划线也是通过border来实现。

注：需要设置菜单栏div的padding，这样会留白，使得标题的下划线才不会直接顶到边框，

原网页：

我制作的：

我制作的这个网页只是简易的网页，如果想做成和菜鸟首页完全一样的，则可以在原网页中找到对应的参数，为文字、图片、以及div等添加超链接，以此实现点击进入对应页面的功能。

这里贴一下我写的这个仿菜鸟首页的源代码：