⛵ 源码获取 文末联系 ✈
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="###">邮箱:Services@langcoo.com</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>© 2021 版权所有 青岛量谷无线科技有限公司 Qingdao Langcoo Wireless Technologies Co.,Ltd 地址:青岛市市南区芝泉路6号 电话:0755-83316336 </p>
</div>
</body>
</html>
学的反而越迷茫
有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?
所以,放松心态吧,好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识