HTML-菜鸟首页

最新推荐文章于 2023-07-10 15:17:48 发布
最新推荐文章于 2023-07-10 15:17:48 发布
阅读量677 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： html 文章标签： 菜鸟首页 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GHL1996/article/details/83050077
本文介绍了作者仿写HTML菜鸟首页的过程，虽然不完美，但可供学习参考。内容包括html文件和css文件的使用，以及部分效果图展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是我自己写仿写的一个菜鸟首页，做的不是很好，还有许多需要改进的地方，仅供大家参考

html文件
<html>
<head>
	<title>菜鸟教程-学的不仅是技术，更是梦想！</title>
<link rel="stylesheet" style="text/css" href="aaa.css"/>
</head>
<body>
	<div class="div_shangbu">
		<img class="div_tupian1"src="G9X_7`QO%JY@31_Z8MM24KS.png"/>
		<input type="text"placeholder="搜索......"class="div_search">
		</input>
		
		<div class="div_xiakuang">
			<div style="margin-left:30px;
			margin-top:6px;
			font-size:15px;
			} " class="div_ziti1">首页
			
			</div>
			<div class="div_ziti1">菜鸟笔记
			</div>
			<div class="div_ziti1">菜鸟工具
			</div>
			<div class="div_ziti1">参考手册
			</div>
			<div class="div_ziti1">用户笔记
			</div>
			<div class="div_ziti1">测验/考试
			</div>
			<div class="div_ziti1">本地书签
			</div>
			<div class="div_ziti1">登录
			</div>
		</div>
	</div>
	<div class="div_zuobu">
		<div class="div_quanbu"><img width=14 height=14 src="E(31V}_0O[6I`@LML_JV)QE.png">全部教程</div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">HTML/CSS</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">JavaScript</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">服务端</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">数据库</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">移动端</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">XML 教程</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">ASP.NET</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">Web Service</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">开发工具</div></div>
		<div class="div_xiaokuang"><img width=20 height=20 class="aaa" src="IK019Q7V(84P)2QEFB}E(H5.png"/><div class="ziti">网站建设</div></div>
	
	</div>
	<div class="div_xiabu">
		<div><div class="a">HTML/CSS</div></div>
		<div class="item1"><div class="kuang1">【学习 HTML】</div><img class="t"/ src="下载.png"><div class="ziti0">HTML，即超文本标记语言（Hyper Text Markup Language）</div></div>
		<div class="item1"><div class="kuang1">【学习 HTML5】</div><img class="t"/ src="下载1.png"><div class="ziti0">HTML5 是下一代 HTML 标准</div></div>
		<div class="item1"><div class="kuang1">【学习 CSS】</div><img class="t"/ src="下载2.png"><div class="ziti0">层叠样式表（Cascading StyleSheet）</div></div>
		<div class="item1"><div class="kuang1">【学习 CSS3】</div><img class="t"/ src="下载3.png"><div class="ziti0">CSS3是CSS技术的升级版本</div></div>
		<div class="item1"><div class="kuang1">【学习 Bootstrap3】</div><img class="t"/ src="下载4.png"><div class="ziti0">Bootstrap，来自 Twitter，是目前最受欢迎的前端框架</div></div>
		<div class="item1"><div class="kuang1">【学习 Bootstrap4】</div><img class="t"/ src="下载5.png"><div class="ziti0">Bootstrap4 目前是 Bootstrap 的最新版本</div></div>
		<div class="item1"><div class="kuang1">【学习 Font Awesome】</div><img class="t"/ src="下载6.png"><div class="ziti0">Font Awesome 是一套绝佳的图标字体库和CSS框架。</div></div>
		<div class="item1"><div class="kuang1">【学习 Foundation】</div><img class="t"/ src="下载7.png"><div class="ziti0">Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架</div></div>
		<div class="b">JAVASCRIPT</div>
		<div class="item1"><div class="kuang1">【学习 JAVASCRIPT】</div><img class="t"/ src="下载8.png"><div class="ziti0">JavaScript 是 Web 的编程语言</div></div>
	</div>
</body>	
</html>
css文件

		.div_shangbu{
			width:100%;
			hight:20%;
			background-color:#f6f6f6;
			float:left;
			}
		.div_search{
			width:400px;
			height:38px;
			margin-top:17px;
			float:left;
			margin-left:600px;
			border-radius:5px;
			border-width:1px;
			}
		.div_xiakuang{
			width:100%;
			height:34px;
			background-color:#96b97d;
			float:left;
			}
		.div_ziti1{
			font-color:#fff;
			float:left;
			margin-left:10px;
			margin-top:6px;
			font-size:15px;
			}
		.div_tupian1{
			margin-top:17px;
			margin-bottom:17px;
			width:258px;
			height:39px;
			float:left			
			}
		.div_zuobu{
			width:17%;
			height:500px;
			background-color:#f6f6f6;
			float:left;
			margin-top:2px;
			}
		.div_xiabu{
			width:83%;
			height:1000px;
			background-color:#ffffff;
			float:left;
			}
		.div_xiaokuang{
			height:40px;
			width:160px;
			background-color:#fbfbfb;
			margin-top:2px;
			margin-bottom:2px;
			margin-left:10px;
			}
		.aaa{
			float:left;
			padding-left:50px;
			padding-top:10px;
			ma
			}
		.div_quanbu{
			height:28px;
			width:160px;
			background-color:#f2f2f2;
			text-align:center;
			font-size:14px;
			line-height:28px;
			margin-top:2px;
			margin-bottom:2px;
			margin-left:10px;
			}
		.ziti{	
			font-size:14px;
			line-height:40px;
			padding-left:20px;
			padding-top:0px;
			}
		.a{
			font-size: 18px;
			font-weight: 700;
			margin: 12px 0;
			margin-left:10px;
			border-bottom: 1px solid #eaeaea;
			}
		.item1{
			width:307px;
			height:92px;
			background-color:#f6f6f6;
			margin-left:15px;
			margin-top:20px;
			border-radius:5px;
			float:left;
			}
		.b{
			font-size: 18px;
			font-weight: 700;
			margin: 12px 0;
			margin-left:10px;
			clear:both;
			margin-top:40px;
			border-bottom: 1px solid #eaeaea;
			}
		.kuang1{
				width:100%;
				height:20px;
			    color: #64854c;
				font-size: 16px;
				margin-top: 10px;
				text-align: left;
				margin-left:15px;
				float:left;
			}
		.t{
			width:36px;
			height:36px;
			float:left;
			margin-top:10px;
			margin-left:20px;
			}
	
		.ziti0{
			width:230px;
			height:50px;
			color:#666;
			float:left;
			font-size:12px;
			margin-left:5px;
			margin-top:13px;
			}
这个是效果图，我没有做完整版，这是大概内容,这里面的图片可以在原网页上找

在这里插入图片描述

菜鸟教程首页制作html5
qq_39429962的博客
09-27 4万+
前几天突发奇想，想练一练自己的html布局，就仿照着菜鸟首页写了一个html页，个人感觉还行，下边是效果图跟代码： 菜单栏的小图的实现方法详解:https://blog.youkuaiyun.com/qq_39429962/article/details/82795650 源代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;tit...
前端----HTML 菜鸟教程网站首页制作
nO0b
09-24 1952
效果图: (实际内容是重复的,因为懒得去挨个搞图标,挨个写介绍,没有技术点)  缺陷很多, 比如底部栏没有做,  放缩效果不太好,文字有些会错位,原版的放缩时对应两套界面, 菜鸟教程首页很适合练习布局,很简洁有结构,当然要做好还是很难的, 看起来像不难,用起来体验好却很难做到,有大量的细节问题,还需要JS的加工 附上源码,css和HTML是分开的,图片资源没上传 ,不方便,有需要的...
html 菜鸟驿站,菜鸟驿站
weixin_34280781的博客
06-17 2191
项目背景菜鸟驿站是由阿里巴巴旗下菜鸟网络牵头，建立的面向社区、校园的第三方末端物流服务平台。在服务物流行业的同时，持续提升末端运作效率，并为用户提供包裹暂存、代寄等服务，致力于为消费者提供多元化的最后一公里服务。菜鸟驿站主要有三个核心业务：1、 网购包裹暂存、线下自提、安全保管2、 便捷代寄、线上下单、在线支付3、 便民服务、生活服务、特色服务为了打造菜鸟的IOT战略下的新物流操作系统，实现数智化...
写菜鸟教程首页总结
victor_yjx的博客
02-01 231
1、编码问题：一定要注意！！！ 编码决定了每一种信息在计算机上0、1shift如何组合的。 信息必须指定编码，如果解析编码一致就能解析成功，否则则会解析失败。 2、页面布局：做页面之前一定要先用div进行页面布局 好处：div布局内部元素无论怎么改变，都不会对其他元素进行影响，可...
HTML入门
m0_47035167的博客
07-10 201
接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。
一起学习html列表
AXN567的博客
03-16 257
HTML列表 这周我们学习了HTML列表。 无序列表 这是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 <ul> 标签 小练习： 1. <ul> 2. <li>男生</li> 3. <li>女生</li> 4. </ul> 浏览器显示如下： 男生 女生 有序列表 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 编号列表 <ol>
HTML简单的列表实现-编程-菜鸟入门
12-17
HTML简单的列表实现-编程-菜鸟入门
JavaScript-菜鸟基础教程.doc
最新发布
05-25
与Java不同，JavaScript是一种解释型语言，直接嵌入到HTML中执行，而Java是一种编译型语言，需要预编译。JavaScript的源代码可以直接通过查看网页源文件获得，而Java通常需要特定的工具来查看编译后的字节码。...
vue基础知识-菜鸟入门
01-03
9. **vue 事件修饰符.html**: Vue提供了多种事件修饰符，如`.stop`阻止事件冒泡，`.prevent`阻止默认行为，`.capture`在事件捕获阶段触发，`.self`只有当事件的目标元素是当前元素时才触发，`.once`只触发一次等。...
HTML 教程-菜鸟教程
qq_27172205的博客
07-23 2157
链接: HTML 教程-菜鸟教程文档. <!DOCTYPE html> /*声明html版本是html5*/<br/> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书的详情信息</title> </head> <body> /* 常用html标签的总结 1. 文本标签: h1-h6 <h1>图书管理一级标
HTML制作菜鸟教程网站首页
热门推荐
qq_36470686的博客
09-21 2万+
这是我们要制作的网站首页  我们接下来将分块进行解析: 顶端模块: 我们将顶端模块分为两个div,分别通过float属性和margin属性达到我们想要的布局效果. 此处我试用的高和宽皆为像素定值,实际很多地方高都不需为定值,使其根据内容自适应大小即可.因为是像素设置的原因,所以当浏览器窗口缩小,浏览器窗口像素相应减小.此时div的宽又无法自适应调整,如果浏览器一行无法放下的话,di...
html基础+利用css制作海报
Insprion_fjl的博客
06-22 4536
html的代码                                                 ife.baidu.com                          2017.06                                                                       
egret中使用protobuf常见错误原因
J_Giving的博客
12-29 5072
protobuf.js:158 Uncaught Error: .StageTaskFightParam#roleTaskId  is not a field: undefined   请求参数中键名错误 Missing at least one required field for Message .StageTaskFightParam: .StageTaskFightParam.r
百度首页
GHL1996的博客
09-29 462
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;百度一下&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; .div_1{ width:100%; height:10px; margin-left:55%; margin-top:15px; } .div_2{ bac
菜鸟教程首页制作经验总结
qq_35892775的博客
09-21 1746
之前做了百度首页，比较简洁，逻辑清晰；虽然菜鸟教程首页的复杂度比百度首页高一些，但只要遵循先整体布局再动手敲代码的原则，依旧可以很轻松的完成。此次网页制作有几个关键点值得提一下： 1.导航栏可通过部署div块完成，也可以通过ul-li列表完成，尤其利用后种方法时，要将ul的padding和margin设为0，否则导航栏内的首个元素不能靠向最左； 2.导航栏元素下方的三角可通过多种方式设置，...
【原创】利用typeface实现不同字体的调用显示及String转换为Unicode
weixin_30670151的博客
05-12 139
最近工作用到，就写个小demo demo实现从assets中利用typeface调用不同字体，并在editText中显示出来 1.layout中创建activity_main.xml文件 布局代码如下： 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns...
HTML制作菜鸟教程首页
eggplant_的博客
09-26 8506
 成果图如下所示： 虽然比起原网站要逊色的多，但是猛地一看还是很有迷惑性的。（哈哈）   1、首先对页面用div进行布局 （先分成几个大块）如图：   2、然后在大块里面放上小块，如图 3、写上文字： 4、加上图片修改颜色，调整下位置，就得到如上的第一张图。     代码如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;...
egret添加字体样式
J_Giving的博客
01-04 1万+
egret中，除了默认的字体样式以外，我们还可以使用位图字体。但是位图文字一般用于固定文字，对于动态可编辑的文字不再适用，这时候我们需要引入外部字体。 首先在样式表中添加外部字体： @font-face { font-family:"ziti1"; src: url("kaiti.ttf"); }其次添加侦听，使得进入游戏
适合菜鸟的精美HTML个人主页设计
### 精美html静态个人主页设计知识点概述 #### 标题知识点 1. **HTML基础**：HTML是构建网页的基础语言，必须掌握基本的HTML标签来创建网页的结构。包括但不限于`<html>`, `<head>`, `<title>`, `<body>`, `<h1>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值