之前在复习网页制作，仿照菜鸟教程的首页写了一个仿菜鸟首页。效果如下：
制作网页之前先布局。原网页如下：
分析该网站的布局，我们可以发现，菜鸟教程的首页主要有四个模块，分别是顶端，顶端导航， 左边菜单，右边菜单内容。
先在原网站查看源码，找到相应模块的参数，根据这些参数来设置自己的模块，这样就可以增加自己网页与原网页的相似度。
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等添加超链接，以此实现点击进入对应页面的功能。
这里贴一下我写的这个仿菜鸟首页的源代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html";charset="utf-8"/>
<title><菜鸟教程首页></title>
<link href="div.css" rel="stylesheet" type="text/css"/>
</head>
<body style="background-color:#fbfbfb">
<!--头部-->
<div class="div_top">
<!--LOGO-->
<div class="div_top div_logo "style="width:80%" >
<div ><img height="100" width="380"src="images/logo.png"style="float:left" alt="LOGO">
</div>
<!--搜索框-->
<div class="div_top div_text" >
<form action="http://www.baidu.com/s" method="get"id="submit">
<input id="usename" name="wd" placeholder="搜索......" type="text" style="width:380px;height:35px; border:3px #f1f1f1 solid; ">
</div>
</form>
</div>
<!--顶部导航-->
<div class="div_topnav">
<div class="div_navmenu "style="margin-left:15%;"><font color="#FFF">首页</font></div>
<div class="div_navmenu"><font color="#FFF">菜鸟笔记</font></div>
<div class="div_navmenu "><font color="#FFF">菜鸟工具</font></div>
<div class="div_navmenu "><font color="#FFF">参考手册</font></div>
<div class="div_navmenu "><font color="#FFF">用户笔记</font></div>
<div class="div_navmenu "><font color="#FFF">测验/考试</font></div>
<div class="div_navmenu "><font color="#FFF">设计神器</font></div>
<div class="div_navmenu "><font color="#FFF">本地书签</font></div>
<div class="div_navmenu "><font color="#FFF">登录</font></div>
</div>
<div class="div_whole">
<!--左侧菜单-->
<div class="div_menu">
<div class="div_tab0 " style="line-height:4px;"><img height="20"width="20" src="images/logo2.png"style="margin-top:-1px;"alt="logo2">全部教程</div>
<div class="div_menu1"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3 ">HTML/CSS</div>
<div class="div_tab"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">JavaScript</div>
<div class="div_menu1" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">服务端</div>
<div class="div_tab" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">数据库</div>
<div class="div_menu1" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">移动端</div>
<div class="div_tab"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">XML教程</div>
<div class="div_menu1"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">ASP.NET</div>
<div class="div_tab" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">Web Service</div>
<div class="div_menu1" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">开发工具</div>
<div class="div_tab"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">网站建设</div>
</div>
<!--主题内容-->
<div class=" div_whole div_list ">
<div class="div_block">
<div class="div_head1"><img height="20"width="20" src="images/logo4.png"style="float:left;margin-top:5px"alt="logo3 "><font size="5px">HTML/CSS</font></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习HTML】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385959091.png"style="float:left">
<small style="color:#666;">HTML，即超文本标记语言（Hyper Text Markup Language）</small></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习HTML】</h2>
<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385999291.png"style="float:left;">
<small style="color:#666;">HTML5 是下一代 HTML 标准</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习CSS】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385920670.png"style="float:left;">
<small style="color:#666;">层叠样式表（Cascading StyleSheet）</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习CSS3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385977847.png"style="float:left;">
<small style="color:#666;">CSS3是CSS技术的升级版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Bootstrap3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390045684.png"style="float:left;">
<small style="color:#666;">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Bootstrap4】</h2><img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390099034.png"style="float:left;">
<small style="color:#666;">Bootstrap4 目前是 Bootstrap 的最新版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Font Awesome】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390020072.png"style="float:left;">
<small style="color:#666;">Font Awesome 是一套绝佳的图标字体库和CSS框架。</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Foundation】</h2><img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390054915.png"style="float:left;">
<small style="color:#666;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</small>
</div>
</div>
<div class="div_block">
<div class="div_head1"><img height="20"width="20" src="images/logo4.png"style="float:left;margin-top:5px"alt="logo3 "><font size="5px">HTML/CSS</font></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习HTML】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385959091.png"style="float:left">
<small style="color:#666;">HTML，即超文本标记语言（Hyper Text Markup Language）</small></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习HTML】</h2>
<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385999291.png"style="float:left;">
<small style="color:#666;">HTML5 是下一代 HTML 标准</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习CSS】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385920670.png"style="float:left;">
<small style="color:#666;">层叠样式表（Cascading StyleSheet）</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习CSS3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701385977847.png"style="float:left;">
<small style="color:#666;">CSS3是CSS技术的升级版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Bootstrap3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390045684.png"style="float:left;">
<small style="color:#666;">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Bootstrap4】</h2><img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390099034.png"style="float:left;">
<small style="color:#666;">Bootstrap4 目前是 Bootstrap 的最新版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Font Awesome】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390020072.png"style="float:left;">
<small style="color:#666;">Font Awesome 是一套绝佳的图标字体库和CSS框架。</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【学习Foundation】</h2><img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010701390054915.png"style="float:left;">
<small style="color:#666;">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</small>
</div>
</div>
</div>
<!--底部-->
<div class="div_under" style="clear:both">Copyright © 2013-2018 菜鸟教程 runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
</body>
</html>
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
