菜鸟教程首页制作html5

最新推荐文章于 2024-06-20 01:12:00 发布
最新推荐文章于 2024-06-20 01:12:00 发布
阅读量4.7w 收藏 36
点赞数 11
分类专栏： HTML 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39429962/article/details/82867074
版权

前几天突发奇想，想练一练自己的html布局，就仿照着菜鸟首页写了一个html页，个人感觉还行，下边是效果图跟代码：

菜单栏的小图的实现方法详解:https://blog.csdn.net/qq_39429962/article/details/82795650

源代码：

<!DOCTYPE html>
<html>
	<head>
		<title>菜鸟教程 - 学的不仅是技术，更是梦想！</title>
		<link href="runoob.css" rel="stylesheet" type="text/css"/>
		<link href="font.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<!--顶部-->
		<div class = "div_top">
			<div class = "top_left">
				<img class="top_img" src="http://www.runoob.com/wp-content/themes/runoob//assets/img/runoob-logo.png"></img>
			</div>
			<div class = "top_right">
				<input class="top_input" type="text" value="" placeholder="    搜索......"/>
			</div>
			<div class = "top_menu">
				<ul class="top_ul">
				<div class="div_li current" name ="li"><li>首页</li></div>
				<div class="div_li" name = "li"><li>菜鸟笔记</li></div>
				<div class="div_li" name = "li"><li>菜鸟工具</li></div>
				<div class="div_li" name = "li"><li>参考手册</li></div>
				<div class="div_li" name = "li"><li>用户笔记</li></div>
				<div class="div_li" name = "li"><li>测验/考试</li></div>
				<div class="div_li" name = "li"><li>本地书签</li></div>
				<div class="div_li" name = "li"><li>登录</li></div>
			</ul>
			</div>
		</div>
		<!--内容块-->
		<div class = "div_bottom">
			<div class = "div_menu">
				<div class="menu"><i class="fa fa-reorder"></i>全部教程</div>
		 		<div class="menu1" id="cate1">
					<i class="fa fa-external-link"></i> HTML / CSS
				</div>
				<div class="menu2" id="cate2">
					<i class="fa fa-external-link"></i> JavaScript
				</div>
				<div class="menu1" id="cate3">
					<i class="fa fa-external-link"></i> 服务端
				</div>
				<div class="menu2" id="cate4">
					<i class="fa fa-external-link"></i> 数据库
				</div>
				<div class="menu1" id="cate5">
					<i class="fa fa-external-link"></i> 移动端
				</div>
				<div class="menu2" id="cate6">
					<i class="fa fa-external-link"></i> XML 教程
				</div>
				<div class="menu1" id="cate7">
					<i class="fa fa-external-link"></i> ASP.NET
				</div>
				<div class="menu2" id="cate8">
					<i class="fa fa-external-link"></i> Web Service
				</div>
				<div class="menu1" id="cate9">
					<i class="fa fa-external-link"></i> 开发工具
				</div>
				<div class="menu2" id="cate10">
					<i class="fa fa-external-link"></i> 网站建设
				</div>		
			</div>
			<div class = "div_block">
				<div class = "block1">
					<div class="up_head">
						<h2><i class="fa fa-list"></i> HTML / CSS</h2>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 HTML】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031058182.png">
							  <strong>HTML，即超文本标记语言（Hyper Text Markup Language）</strong></a>
					</div>
					<div class="up_block">
						<h4>【学习 HTML5】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031045056.png">
							  <strong>HTML5 是下一代 HTML 标准</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 CSS】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031031521.png">
							  <strong>层叠样式表（Cascading StyleSheet）</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 CSS3】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031137632.png">
							  <strong>CSS3是CSS技术的升级版本</strong></a>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 Bootstrap3】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031195918.png">
							  <strong>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 Bootstrap4】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031192825.png">
							  <strong>Bootstrap4 目前是 Bootstrap 的最新版本</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 Font Awesome】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031149991.png">
							  <strong>Font Awesome 是一套绝佳的图标字体库和CSS框架。</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 Foundation】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031220495.png">
							  <strong>Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</strong>
					</div>
					
				</div>
				<div class = "block2">
					<div class="up_head">
						<h2><i class="fa fa-list"></i>  JavaScript</h2>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 HTML】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031058182.png">
							  <strong>HTML，即超文本标记语言（Hyper Text Markup Language）</strong></a>
					</div>
					<div class="up_block">
						<h4>【学习 HTML5】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031045056.png">
							  <strong>HTML5 是下一代 HTML 标准</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 CSS】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031031521.png">
							  <strong>层叠样式表（Cascading StyleSheet）</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 CSS3】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031137632.png">
							  <strong>CSS3是CSS技术的升级版本</strong></a>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 Bootstrap3】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031195918.png">
							  <strong>Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 Bootstrap4】</h4>
								<img class="codeicon codeicon-36" height="36" width="36" src="https://img-blog.csdnimg.cn/2022010706031192825.png">
							  <strong>Bootstrap4 目前是 Bootstrap 的最新版本</strong>
					</div>
					<div class="up_block">
						<a class="item-top item-1"><h4>【学习 Font Awesome】</h4>
								<img class="codeicon codeicon-36" height="36" width="36
最低0.47元/天 解锁文章
对明天的期待丶
关注
  • 11
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端----HTML 菜鸟教程网站首页制作
nO0b
09-24 1754
效果图: (实际内容是重复的,因为懒得去挨个搞图标,挨个写介绍,没有技术点)  缺陷很多, 比如底部栏没有做,  放缩效果不太好,文字有些会错位,原版的放缩时对应两套界面, 菜鸟教程首页很适合练习布局,很简洁有结构,当然要做好还是很难的, 看起来像不难,用起来体验好却很难做到,有大量的细节问题,还需要JS的加工 附上源码,css和HTML是分开的,图片资源没上传 ,不方便,有需要的...
菜鸟教程学习——html5 表单
LSONGCHEN的博客
08-03 1560
整理自：http://www.runoob.com/html/html5-form-attributes.html 表单中，输入框的内容提交后，仍有记忆：autocomplete=on www.runoob.com/try/try.php?filename=tryhtml5_input_autocomplete autocomplete 适用于 &lt;form&gt; 标签，以及以下类型的...
前端---HTML关于简易菜鸟教程网站首页制作
热门推荐
Nagile-zhou博客
09-23 1万+
这次给大家讲解一个菜鸟教程网站的制作过程,该网站是一个关于编程知识教学的相关网站,大家也可以进这个网站进行相关编程的学习,里面有各方面的全套教程.   先给大家展示一下最后网站实现的效果以及全部源代码:   &lt;html&gt; &lt;head&gt; &lt;title&gt;菜鸟教程-学的不仅是技术&lt;/title&gt; &lt;style&gt; ...
一天学会Golang基础语法(基于菜鸟教程)
最新发布
大学生小郑的博客
06-20 597
如何一天学会Go语言基础语法
HTML制作菜鸟教程首页
eggplant_的博客
09-26 8311
 成果图如下所示： 虽然比起原网站要逊色的多，但是猛地一看还是很有迷惑性的。（哈哈）   1、首先对页面用div进行布局 （先分成几个大块）如图：   2、然后在大块里面放上小块，如图 3、写上文字： 4、加上图片修改颜色，调整下位置，就得到如上的第一张图。     代码如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;...
菜鸟教程首页制作经验总结
qq_35892775的博客
09-21 1519
之前做了百度首页，比较简洁，逻辑清晰；虽然菜鸟教程首页的复杂度比百度首页高一些，但只要遵循先整体布局再动手敲代码的原则，依旧可以很轻松的完成。此次网页制作有几个关键点值得提一下： 1.导航栏可通过部署div块完成，也可以通过ul-li列表完成，尤其利用后种方法时，要将ul的padding和margin设为0，否则导航栏内的首个元素不能靠向最左； 2.导航栏元素下方的三角可通过多种方式设置，...
百度首页(HTML5)
不良少年
05-26 1万+
一 效果图(分三部分)1 图一 : header(位于右上角)2 图二 : content(位于中间位置)3 图三 : footer(位于底部的中间)二 需要创建的文件三 HTML中设计的部分(先将主旨部分搭建好)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度首页</title>
菜鸟教程离线html版
01-31
**菜鸟教程离线HTML版** 是一个专门为前端学习者准备的资源包，它包含了丰富的HTML教程内容，使得用户可以在没有网络连接的情况下也能进行学习。这个压缩包中的所有资料都是为了帮助初学者掌握HTML这一基础且重要的...
菜鸟教程html实例.zip
06-11
"菜鸟教程html实例.zip"这个压缩包文件显然包含了针对初学者的一系列HTML示例，旨在帮助学习者逐步了解和实践HTML语法。 在HTML中，主要的知识点包括但不限于以下几个方面： 1. **HTML结构**：HTML文档通常由`<!...
w3cschool菜鸟教程.CHM.rar
11-27
《w3cschool菜鸟教程.CHM.rar》是一个包含丰富的在线编程学习资源的压缩包，主要针对初学者设计，提供离线阅读的便利性。CHM（Compiled HTML Help）是微软的一种帮助文档格式，将HTML页面集合在一起，形成一个可搜索...
web开发（菜鸟教程）h5+css+js（jQuery）.zip
03-04
本压缩包"web开发（菜鸟教程）h5+css+js（jQuery）.zip"提供了关于这些关键前端技术的详细学习资源，帮助你掌握网页设计和开发的基本要素。 首先，我们来深入了解一下HTML5。HTML（超文本标记语言）是构建网页内容...
菜鸟也仿网站
10-17
菜鸟也仿网站
网站模板4套完整版
11-30
全是html页面，直接套用就行了，不用必改什么，有4套，都是完整的
仿w3cschool整站源码 v1.5
11-07
是w3cschool 的一个完美克隆，之前只是一个手册版，现在作者将其修改为网页版并修改了多处的bug使界面更加完美，修改它纯属爱好行为，如果您喜欢他就赶快下载吧，这里不想再多的废话了。
2018 AngularJS 菜鸟 离线教程 导航直接跳转
01-09
学习者可以通过阅读“AngularJS 参考手册_菜鸟”来深入理解和实践AngularJS的各种特性，从而快速上手并进阶成为一名熟练的AngularJS开发者。此外，教程可能还会涵盖最佳实践、调试技巧以及如何与其他库和工具集成等...
HTML-菜鸟首页
GHL1996的博客
10-14 534
这是我自己写仿写的一个菜鸟首页，做的不是很好，还有许多需要改进的地方，仅供大家参考 html文件 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;菜鸟教程-学的不仅是技术，更是梦想！&amp;lt;/title&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot; style=&quot;te
html菜鸟教程 很多代码,HTML5 代码编写规范简介
weixin_39692172的博客
06-09 134
空行和缩进不要无缘无故添加空行。为每个逻辑功能块添加空行，这样更易于阅读。缩进使用两个空格，不建议使用 TAB。比较短的代码间不要使用不必要的空行和缩进。不必要的空行和缩进示例：在线教程HTMLW3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分享。W3CAPI 社区宗旨与口号，人人可以免费学开发，人人可以免费做分...
网页制作案例_学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习
weixin_39761822的博客
12-15 258
很多朋友想学一下网页制作，上网一看，只要涉及到网页制作，都离不开HTML这个词语，HTML是HyperText Markup Language的简称，想学习HTML语言，先得了解一些基本知识，今天这边内容可以作为学习HTML的菜鸟教程第一课。HTML是什么？一般我们说HTML是指超文本标记语言，英文名称为HyperText Markup Language，简称HTML，它是目前互联网上应用最广泛的...
小程序菜鸟的模板（template）学习
lm13420109892的博客
08-12 287
小程序菜鸟的模板template学习 新建template（header.wxml） <template name="header"> <view class="title">{{title}}</view> </template> 引用模板header.wxml <import src="../../template/header.wxml"/> <template is="header" data="{{title:'头
菜鸟教程侧边栏HTML5
05-26
菜鸟教程侧边栏HTML5是指菜鸟教程网站HTML5教程页面右侧的导航栏，其中包含了HTML5教程的目录结构以及其他相关链接。通过该侧边栏，您可以方便地浏览和学习HTML5教程的各个章节内容，以及查看相关的HTML5资源和工具。此外，该侧边栏还提供了在线编辑器和运行环境，您可以在其中实践并调试自己的HTML5代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值