前端——“一看就会的”菜鸟教程网站首页制作！

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

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

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

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

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="data: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="data:images/logo2.png"style="margin-top:-1px;"alt="logo2">全部教程</div><div class="div_menu1"><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3 ">HTML/CSS</div><div class="div_tab"><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">JavaScript</div><div class="div_menu1" ><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">服务端</div><div class="div_tab" ><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">数据库</div><div class="div_menu1" ><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">移动端</div><div class="div_tab"><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">XML教程</div><div class="div_menu1"><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">ASP.NET</div><div class="div_tab" ><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">Web Service</div><div class="div_menu1" ><img height="20"width="20" src="data:images/logo3.png"style="float:left;margin-top:5px"alt="logo3">开发工具</div><div class="div_tab"><img height="20"width="20" src="data: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="data: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="data: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>

前端——“一看就会的”菜鸟教程网站首页制作！相关推荐

前端---HTML关于简易菜鸟教程网站首页制作
这次给大家讲解一个菜鸟教程网站的制作过程,该网站是一个关于编程知识教学的相关网站,大家也可以进这个网站进行相关编程的学习,里面有各方面的全套教程. 先给大家展示一下最后网站实现的效果以及全部源代码: ...
从菜鸟教程网站（www.runoob.com）上下载所有入门教程
git地址:git@github.com:lryong/tutorials-from-runoob.git 这个爬虫是大三的时候刚学习编程的时候写的,今天整理github的时候发现代码有bug就把它u ...
从菜鸟教程网站（www.runoob.com）抓取所有教程
项目链接:https://github.com/lryong/TutorialsFromRunoob 自己做的小项目,如果写得不好,欢迎大家给建议. 程序没有加载css样式,可以先用浏览器打开www. ...
菜鸟教程重构版，程序员小白入门编程必备神器
目前网络上已经有不少相关平台了,内容也基本都一样,但是随着各个平台的升级,功能开始不存粹了,有的是植入了第三方的广告,有的是过分的炫酷,忽略了内容本身属性. 基于这样一种需求,也为了方便自己可以拿来即 ...
不知道如何入门编程？最全在线教程网站汇总来了，还不赶快收藏
程序员是一个需要不断学习的职业.幸运的是,在这个互联网时代,知识就在那里,等着我们去获取. 作为一个"分享从未停止,学习从未开始"的博主,秉承着好东西不能独享的态度,把收藏的学习网 ...
程序员需知的11个在线教程网站，建议收藏！
作为一个"收藏从未停止,学习从未开始"的博主,秉承着好东西不能独享的态度,把收藏的学习网站整理分享出来,希望大家不要学我,一定要好好学习,天天进步,升职加薪. 一.在线教程首先列 ...
学编程，有哪些必备的在线教程网站？
这些在线教程网站通常都比较适合入门,可以作为开发学习路上的第一个阶梯,也可以作为工作中的在线文档. 1.how2j.cn 地址:how2j.cn 简介:一个Java全栈开发 ...
15个国外Web网站开发教程网站
互联网经过这么多年的发展,已经出现了众多的 Web 开发技术,像 .Net/Java/PHP/Python/Ruby 等等.对于 Web 开发人员来说,不管是初学者还是有一定经验的开发人员都需要时刻学 ...
lua菜鸟教程_初学者必看：Lua入门学习教程
Lua入门学习教程是本文要介绍的内容,主要是来对Lua入门的一个学习,Lua是一个被设计成用于扩展C/C++编程的轻量级脚本语言.不幸的是,网上很少有关于这个语言的在线教程.我主要通过阅读其源代码来了 ...
前端学习资料（禅意花园，菜鸟教程）
1.禅意花园 2.菜鸟教程转载于:https://www.cnblogs.com/lushousong/p/6841605.html

前端——“一看就会的”菜鸟教程网站首页制作！

前端——“一看就会的”菜鸟教程网站首页制作！相关推荐

最新文章

热门文章