菜鸟教程首页制作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 1756
效果图: (实际内容是重复的,因为懒得去挨个搞图标,挨个写介绍,没有技术点)  缺陷很多, 比如底部栏没有做,  放缩效果不太好,文字有些会错位,原版的放缩时对应两套界面, 菜鸟教程首页很适合练习布局,很简洁有结构,当然要做好还是很难的, 看起来像不难,用起来体验好却很难做到,有大量的细节问题,还需要JS的加工 附上源码,css和HTML是分开的,图片资源没上传 ,不方便,有需要的...
菜鸟教程学习——html5 表单
LSONGCHEN的博客
08-03 1562
整理自：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 618
如何一天学会Go语言基础语法
HTML制作菜鸟教程首页
eggplant_的博客
09-26 8312
 成果图如下所示： 虽然比起原网站要逊色的多，但是猛地一看还是很有迷惑性的。（哈哈）   1、首先对页面用div进行布局 （先分成几个大块）如图：   2、然后在大块里面放上小块，如图 3、写上文字： 4、加上图片修改颜色，调整下位置，就得到如上的第一张图。     代码如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;...
菜鸟教程首页制作经验总结
qq_35892775的博客
09-21 1523
之前做了百度首页，比较简洁，逻辑清晰；虽然菜鸟教程首页的复杂度比百度首页高一些，但只要遵循先整体布局再动手敲代码的原则，依旧可以很轻松的完成。此次网页制作有几个关键点值得提一下： 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-菜鸟首页
GHL1996的博客
10-14 546
这是我自己写仿写的一个菜鸟首页，做的不是很好，还有许多需要改进的地方，仅供大家参考 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 140
空行和缩进不要无缘无故添加空行。为每个逻辑功能块添加空行，这样更易于阅读。缩进使用两个空格，不建议使用 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:'头
菜鸟也仿网站
10-17
菜鸟也仿网站
网站模板4套完整版
11-30
全是html页面，直接套用就行了，不用必改什么，有4套，都是完整的
仿w3cschool整站源码 v1.5
11-07
是w3cschool 的一个完美克隆，之前只是一个手册版，现在作者将其修改为网页版并修改了多处的bug使界面更加完美，修改它纯属爱好行为，如果您喜欢他就赶快下载吧，这里不想再多的废话了。
Html 5菜鸟教程（建议新生学习）
YJlio的博客
09-22 3625
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
html5如何建立首页,网站开发首页传统布局的两种方式，如何用html5+css3给网页布局？...
weixin_35455994的博客
06-09 562
首先来说一下html5用于布局常用的标签，这些标签只有html5才能使用，因为是html5才出来的。headerasidesectionfooter这几个标签都是没有实际效果的，只包含了各自特有的语义先来说一下如何用绝对定位做网页：定位布局演示图：定位布局代码：html>Titlebody{width:960px;margin:0auto;position:relative;}hea...
写菜鸟教程首页总结
victor_yjx的博客
02-01 189
1、编码问题：一定要注意！！！ 编码决定了每一种信息在计算机上0、1shift如何组合的。 信息必须指定编码，如果解析编码一致就能解析成功，否则则会解析失败。 2、页面布局：做页面之前一定要先用div进行页面布局 好处：div布局内部元素无论怎么改变，都不会对其他元素进行影响，可...
php网站源码
菜鸟教程
05-29 5352
php网站源码 地址： https://www.piaodoo.com/yan
jquery重写自定义鼠标右键弹出菜单列表
tanqingfu1的博客
03-12 1508
生而为人 谁不付出 谁不努力 jQuery仿电脑桌面点击鼠标右键弹出菜单操作，可自定义添加右键菜单代码。需要使用到一个JS文件mouseRight.min.js 1：参数说明 itemname：表示右键菜单“名称”。 icon：新建项font-awesome图标样式如：fa fa-plus。（特别说明一点icon是要通过样式控制的，请到font-awesome.min.css你们查找）...
菜鸟教程：制作EXE电子书步骤详解
"这篇文档是关于如何制作exe格式的电子书的教程，主要涉及两个步骤：首先使用软景HTML制造机将文本文件转换为HTML，然后利用eBookWorkshop来组合这些HTML页面制作成电子书。教程详细介绍了软景HTML制造机的使用方法...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值