⛵ 源码获取文末联系 ✈

Web前端开发技术
描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 | HTML期末大学生网页设计作业，Web大学生网页

HTML：结构
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

文章目录

前端学习路线
网页基本结构
网页演示
- HTML结构代码
学的反而越迷茫
学习更多

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；
（2）css文件：css全部页面样式,文字滚动, 图片放大等；
（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　
(2)二级页面：从首页点击进入之后的页面叫做二级页面
(3)三级页面：从二级页面点击进入的页面

网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的
首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.
网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

在这里插入图片描述

HTML结构代码



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>曼谷科技</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="top">
		<div class="width clearfix">
			<form class="right biaoge" action="shuju.html" method="post">
				<input class="search1 left" type="text" name="搜索" value="搜索...">
				<input class="search2 right" type="submit" name="提交" value="   ">
			</form>
			<a href="###"><img class="right" src="picture/weixin0.png"></a>
			<a href="###"><img class="right" src="picture/weibo.png"></a>
		</div>
	</div>
	<div class="nav width clearfix">
		<h1><img src="picture/logo.png"></h1>
		<ul>
			<li><a href="###" class="act">网站首页</a></li>
			<li><a href="###">产品中心</a></li>
			<li><a href="###">技术与服务</a></li>
			<li><a href="###">解决方案</a></li>
			<li><a href="###">合作伙伴</a></li>
			<li><a href="###">新闻动态</a></li>
			<li><a href="###">关于我们</a></li>
		</ul>
	</div>
	<div class="main .bgcolor1">
		<div class="banner">
			<div class="dingwei">
				<div class="aa a1">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
				<div class="aa a2">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
				<div class="aa a3">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
				<div class="aa a4">
					<div class="bb b1">
						<div class="bb b2">
							<div class="bb b3"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main1">
			<div class="prodoctus clearfix width">
				<div class="prod">
					<div class="icon i1"></div>
					<p>物联网手持终端</p>
				</div>
				<div class="prod">
					<div class="icon i2"></div>
					<p>物联网手持终端</p>
				</div>
				<div class="prod p3">
					<div class="icon i3"></div>
					<p>物联网手持终端</p>
				</div>
			</div>
		</div>
		<div class="main2">
			<div class="jjfz width">
				<div class="title clearfix">
					<h2>解决方案<span>SOLUTIONS</span></h2>
					<div class="bg"></div>
				</div>
				<div class="jjfa_main clearfix">
					<div class="mulu left">
						<div class="wenzi jt left">交通行业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="mulu left">
						<div class="wenzi sf left">司法行业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="mulu left">
						<div class="wenzi zf left">政府相关企业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="mulu left">
						<div class="wenzi qt left">其他行业</div>
						<div class="content left">
							<div class="content_left left"><img src="picture/img1.png"></div>
							<div class="content_right left">
								<ul>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
									<li><a href="###">军用物资组套仓储管理系统</a>[2017-04-17]</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main3">
			<div class="news width">
					<div class="title clearfix">
					<h2>新闻动态<span>NEWS</span></h2>
					<div class="bg"></div>
				</div>
				<div class="news_main clearfix">
					<div class="yinying"><div></div></div>
					<ul class="clearfix left">
						<li class="one">
							<a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a>
							<p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a>
							<p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a>
							<p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
					</ul>
					<ul class="clearfix left right_ul">
						<li class="one">
							<a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a>
							<p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a>
							<p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
						<li>
							<a href="###"><h3>青岛量谷无线科技有限公司（简称量谷科技）</h3></a>
							<p>公司秉承引领前沿信息、创新突破，自强务实的企业理念，不断地吸收借鉴国外先进技术并积极开展自主创新的研究。</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main4 clearfix">
			<div class="hzhb width">
				<div class="title clearfix">
					<h2>合作伙伴<span>PARTNERS</span></h2>
					<div class="bg"></div>
					</div>
					<div class="hzhb_main clearfix">
						<a href="###"><img src="picture/hzhb1.png" alt="tupian1"></a>
						<a href="###"><img src="picture/hzhb2.png" alt="tupian2"></a>
						<a href="###"><img src="picture/hzhb3.png" alt="tupian3"></a>
						<a href="###"><img src="picture/hzhb4.png" alt="tupian4"></a>
						<a class="last" href="###"><img src="picture/hzhb5.png" alt="tupian5"></a>
					</div>
				
			</div>
		</div>
	</div>
	<div class="footer clearfix">
		<div class="list width clearfix">
			<ul>
			<li class="first"><a href="###">产品中心</a></li>
			<li><a href="###">手持终端</a></li>
			<li><a href="###">产品线</a></li>
			<li><a href="###">附件</a></li>
			<li><a href="###">软件</a></li>
		</ul>
		<ul>
			<li class="first"><a href="###">技术与服务</a></li>
			<li><a href="###">技术支持</a></li>
			<li><a href="###">售后服务</a></li>
		</ul>
		<ul>
			<li class="first"><a href="###">解决方案</a></li>
			<li><a href="###">交通行业</a></li>
			<li><a href="###">司法行业</a></li>
			<li><a href="###">政府及其相关</a></li>
			<li><a href="###">其他行业</a></li>
		</ul>
		<ul class="last_ul">
			<li class="first"><a href="###">联系方式</a></li>
			<li class="sec"><a href="###">电话：0532-83887966 / 83887967</a></li>
			<li class="thi"><a href="###">邮箱：[email protected]</a></li>
			<li class="four"><a href="###">微信：青岛量谷无线科技</a></li>
		</ul>
		</div>
		<div class="xian"></div>
		<div class="lianjie width">
			<p><span>友情链接：</span><a href="###">物联中国</a><a href="###">物联网世界</a><a href="###">青岛市江苏商会</a><a href="###">青岛物联网协会</a></p>
		</div>
	</div>
	<div class="bottom">
		<p>&copy; 2021 版权所有 青岛量谷无线科技有限公司 Qingdao Langcoo Wireless Technologies Co.,Ltd 地址：青岛市市南区芝泉路6号        电话：0755-83316336 </p>
	</div>
</body>
</html>

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光
—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识