⛵ 源码获取 文末联系 ✈
Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | HTML期末大学生网页设计作业
-
HTML：结构
-
CSS：样式
在操作方面上运用了html5和css3，
采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识 -
JavaScript：做与用户的交互行为
前端学习路线
（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>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/movie.css">
<title>电影页面</title>
</head>
<body>
<div class="box">
<div class="box1">
<a href="tutu1.html"><span class="name"><span class="mingzi">------图图影视影院</span></span></a>
<div class="city1">城市:沧州</div>
<div class="city2"><div class="city3"><a href="#"><span class="mingzi">定位城市:定位失败</span></a></div>
<div class="city4">定位失败</div></div>
<div class="login"><a href="login.html"><span class="mingzi">登录/</span></a></div>
<div class="exit"><a href="tutu1.html"><span class="mingzi">退出</span></a></div>
<div class="search1">
<input type="text" class="input" placeholder="找影视剧、影人、影院">
</div>
<div class="search2">
<input class="submit" type="submit" value="搜索">
</div>
</div>
<div class="one">
<ul>
<li><a href="tutu1.html" class="three"><span class="mingzi">首页</span></a></li>
<li><a href="movie.html" class="three active"><span class="mingzi">电影</span></a></li>
<li><a href="yingyuan.html" class="three"><span class="mingzi">影院</span></a></li>
<li><a href="bangdan.html" class="three"><span class="mingzi">榜单</span></a></li>
<li><a href="#" class="three"><span class="mingzi">热点</a></span></li>
</ul>
</div>
</div>
<div class="box2">
<span class="classly"><a href="#" class="two active">正在热映</a></span> <a href="#"><span class="sort4">即将上映</span></a><a href="#"> <span class="sort4">经典影片</span></a>
<div class="classly1">
<span class="first">类型:</span> <a href="#"><span class="quanbu">全部</span></a> <a href="#"><span class="sort4">爱情</span></a> <a href="#"><span class="sort4">喜剧</span></a> <a href="#"><span class="sort4">动作</span></a>
<a href="#"><span class="sort4">动画</span></a>
<a href="#"><span class="sort4">科幻</span></a>
<a href="#"><span class="sort4">惊悚</span></a> <a href="#"><span class="sort4">悬疑</span></a> <a href="#"><span class="sort4">冒险</span></a>
<a href="#"><span class="sort4">家庭</span></a>
<a href="#"><span class="sort4">历史</span></a>
<a href="#"><span class="sort4">古装</span></a>
<a href="#"><span class="sort4">青春</span></a>
<a href="#"><span class="sort4">音乐</span></a>
<a href="#"><span class="sort4">戏剧</span></a>
<a href="#"><span class="sort4">其他</span></a>
<div class="classly2">
<span class="second">区域:</span> <a href="#"><span class="quanbu">全部</span></a></span> <a href="#"><span class="sort4">大陆</span></a> <a href="#"><span class="sort4">美国</span></a> <a href="#"><span class="sort4">韩国</span></a>
<a href="#"><span class="sort4">日本</span></a>
<a href="#"><span class="sort4">中国香港</span></a>
<a href="#"><span class="sort4">中国台湾</span></a> <a href="#"><span class="sort4">泰国</span></a> <a href="#"><span class="sort4">印度</span></a>
<a href="#"><span class="sort4">法国</span></a>
<a href="#"><span class="sort4">英国</span></a>
<a href="#"><span class="sort4">俄罗斯</span></a>
<a href="#"><span class="sort4">意大利</a>
<a href="#"><span class="sort4">西班牙</span></a>
<a href="#"><span class="sort4">波兰</span></a>
<a href="#"><span class="sort4">其他</span></a>
</div>
<div class="classly3">
<span class="third">年代:</span> <a href="#"><span class="quanbu">2021</span></a> <a href="#"><span class="sort4">2020</span></a> <a href="#"><span class="sort4">2019</span></a>
<a href="#"><span class="sort4">2018</span></a>
<a href="#"><span class="sort4">2017</span></a>
<a href="#"><span class="sort4">2016</span></a> <a href="#"><span class="sort4">2015</span></a> <a href="#"><span class="sort4">2014</span></a>
<a href="#"><span class="sort4">2013</span></a>
<a href="#"><span class="sort4">2012</span></a>
<a href="#"><span class="sort4">2011</span></a>
<a href="#"><span class="sort4">2000-2010</span></a>
<a href="#"><span class="sort4">90年代</span></a>
<a href="#"><span class="sort4">80年代</span></a>
<a href="#"><span class="sort4">70年代</span></a>
<a href="#"><span class="sort4">其他</span></a>
</div>
<div class="sort">
<div class="sort1">
<a href="#"><input type="button" style="width: 16px; height: 16px; border-radius: 50%; border:solid #000 1px; background:#F00;"><span class="sort5"> 按热门排序</span></a>
</div>
<div class="sort2">
<a href="#"> <input type="button" style="width: 16px; height: 16px; border-radius: 50%; border:solid #000 1px; "><span class="sort5"> <span class="sort4">按时间排序</span></span></a>
</div>
<div class="sort3">
<a href="#"><input type="button" style="width: 16px; height: 16px; border-radius: 50%; border:solid #000 1px; "><span class="sort5"> <span class="sort4">按评论排序</span></span></a>
</div>
</div>
<div class="movies">
<div class="movies1">
<a href="https://v.qq.com/x/cover/mzc00200v3x7zg9/t3308lhnf7i.html"><img src="../image/扬名立万.png"alt="扬名立万">
<p><span class="sort4">扬名立万</span></p>
<p>评分9.5</p></a>
</div>
<div class="movies2">
<a href="https://v.qq.com/x/cover/mzc00200kbornzq/c3304913l9d.html"><img src="../image/梅兰芳.png"" alt="梅兰芳">
<p><span class="sort4">梅兰芳</span></p>
<p>评分9.5</p></a>
</div>
<div class="movies3">
<a href="https://v.qq.com/x/cover/l3685p4jfe8zkyi/l3308af4g74.html"><img src="../image/不老奇事.png" alt="不老奇事" >
<p><span class="sort4">不老奇事</span></p>
<p>评分9.5</p></a>
</div>
<div class="movies4">
<a href="https://v.qq.com/x/page/x3305epwjmf.html"><img src="../image/007：无限赴死.png" alt="007：无限赴死" >
<p><span class="sort4">007：无限赴死</span></p>
<p>评分9.5</p></a>
</div>
<div class="movies5">
<a href="https://v.qq.com/x/cover/mzc00200wh6nz2g/o3219tg84hr.html"><img src="../image/天书奇谭4K纪念版.png" alt="天书奇谭4K纪念版" >
<p><span class="sort4">天书奇谭4K纪念版</span></p>
<p>评分9.5</p></a>
</div>
<div class="movies6">
<a href="https://v.qq.com/x/cover/jqq4vlwrxzfdxi4/p0020vf6862.html"><img src="../image/长津湖.png" alt="长津湖" >
<p><span class="sort4">长津湖</span></p>
<p>评分9.5</p></a> </div>
<div class="movies7">
<a href="https://www.bilibili.com/video/BV1x3411k7bA/"><img src="../image/长津湖之水门桥.png" alt="/长津湖之水门桥">
<p><span class="sort4">长津湖之水门桥</span></p>
<p>暂无评分</p></a>
</div>
<div class="movies8">
<a href="https://v.qq.com/x/cover/mzc00200z19pfwv.html"><img src="../image/铁道英雄.png" alt="铁道英雄" >
<p><span class="sort4">铁道英雄</span></p>
<p>暂无评分</p> </a>
</div>
<div class="movies9">
<a href="https://v.qq.com/x/cover/lcewsuqxacvnvh5.html"><img src="../image/反贪风暴5.png" alt="/反贪风暴5" >
<p><span class="sort4">反贪风暴5</span></p>
<p>暂无评分</p> </a>
</div>
<div class="movies10">
<a href="https://v.qq.com/x/cover/mzc002007nv9vz9.html"><img src="../image/超能一家人.png" alt="超能一家人" >
<p><span class="sort4">超能一家人</span></p>
<p>暂无评分</p>
</a>
</div>
<div class="movies11">
<a href="https://v.qq.com/x/cover/mzc00200gjcj7je/h32777xitzt.html"><img src="../image/穿越寒冬拥抱你.png" alt="穿越寒冬拥抱">
<p><span class="sort4">穿越寒冬拥抱</span></p>
<p>暂无评分</p> </a>
</div>
<div class="movies12">
<a href="https://v.qq.com/x/cover/jqq4vlwrxzfdxi4/p0020vf6862.html"><img src="../image/龙马精神.png" alt="龙马精神" >
<p><span class="sort4">龙马精神</span></p>
<p>暂无评分</p></a>
</div>
</div>
</div> </div>
<div class="bottom">
<p>
<a href="#"><span class="mingzi">商务合作邮箱：[email protected]</span></a> <a href="#"><span class="mingzi">客服电话：xxx</span></a > <a href="#"><span class="mingzi">违法和不良信息举报电话：xxx</span></a>
</p>
<p><a href="#"><span class="mingzi">xxx</span></a></p>
<p>
<a href="#"><span class="mingzi">图图影视影院</span></a> </p>
</div>
</body>
</html>
学的反而越迷茫
有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光
—————————————————
学习更多
关注我 | 点赞博文 | 每天带你涨知识
