⛵ 源码获取 文末联系 ✈

Web前端开发技术
描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 摄影作品 | 影视设计网页 | 在线电影 | 视频音频元素 | HTML期末大学生网页设计作业

  1. HTML：结构

  2. CSS：样式
    在操作方面上运用了html5和css3，
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. 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>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/js.js"></script>
<title>电影电视剧</title>
</head>
<body>
<div class="zxnav">
  <header class="clearfix"> <a href="#" class="logo"><img src="images/logo.png"/></a>
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="dianying.html">电影</a>
         <ul>
            <li><a href="#">恐怖电影</a>  </li>
            <li><a href="#">爱情电影</a>  </li>
         </ul>
     </li>
      <li><a href="dianshiju.html">电视剧</a>
         <ul>
          <li><a href="#">古装电视剧</a>  </li>
          <li><a href="#">搞笑电视剧</a>  </li>
          
         </ul>
        </li>
    
    </ul>
    <div class="denglu"> <a href="login.html" class="dl">登录</a>丨 <a href="练习.html" class="zc">友情链接1</a>丨 <a href="平时作业6五环.html" class="zc">友情链接2</a> </div>
  </header>
</div>
<div class="wrapin">
  <div class="banner_con clearfix">
    <div class="banner_box ">
      <div class="box-1">
        <ul>
          <li><a href="#"><img src="images/banner_01.jpg"></img></a> </li>
          <li><a href="#"><img src="images/banner_02.jpg"></img></a> </li>
          <li><a href="#"><img src="images/banner_03.jpg"></img></a> </li>
        </ul>
      </div>
      <div class="box-2">
        <ul>
        </ul>
      </div>
      <div class="box-3"> <span class="prev"> < </span> <span class="next"> > </span> </div>
    </div>
  </div>
  
  <div class="con">
    <div class="title">
      <h2>电影院</h2>
    </div>
   
    <div class="about clearfix">
      <div class="text">
        <p>万达电影股份有限公司（以下简称万达电影 股票代码：002739.SZ）隶属于万达集团。2005年，万达电影院线成立，2015年A股上市，2017年正式更名为万达电影。业务范围从产业链下游放映业务向上延伸至电影投资、制作和发行及相关衍生业务，全面覆盖电影产业链。截至2020年12月31日，万达电影在全球拥有影院1704家，银幕17118块；包含国内直营影城700家、6099块银幕。其中，拥有44家杜比影院和370块IMAX银幕，IMAX银幕数量全球领先。 </p>
		<a href="#" class="btn">详情查看</a> <a href="#" class="btn2">订票</a>
      </div>
      <div class="pic"><img src="images/c1.jpg"/></div>
    </div>

	<div class="about clearfix">
      <div class="text">
        <p>太平洋电影城是四川省电影公司全资影城、属太平洋电影院线旗下影院，创立于1992年12月，距今已23年历史，累计票房收入2.3亿元，接待观众超过2千余万。影城成立以来先后投资三千余万元，经数次装修改造，使影城始终引领电影时尚潮流。 地处最繁华的春熙路商圈核心位置， 拥有18个豪华电影厅，观众座席数2000多座，是全国影厅最多、节目最多、场次最多、人次最多的影城。率先引进数字3D电影，影厅内安装有世界顶级的英国杜比CP650(EX)数字处理器、 美国JBL音响、德国ISCO一体化镜头、美国QSC数字功放（DCA）、 6.1声道杜比数码立体声系统！</p><a href="#" class="btn">详情查看</a> <a href="#" class="btn2">订票</a>
      </div>
      <div class="pic"><img src="images/c2.jpg"/></div>
    </div>
	
	<div class="about clearfix">
      <div class="text">
        <p>百老汇电影中心有4间影院，共640个座位，还有1间叫Kubrick的书店，售卖电影、书籍及提供咖啡店服务。该处是除了已结业的影艺戏院外，香港少数播放非主流电影的戏院。
2009年11月，百老汇电影院(香港安乐影片有限公司)在北京开设了一家艺术影院——MOMA百老汇电影中心，这是北京第一座大型艺术影院。坐落在地标性建筑群当代MOMA(当代万国城)中， MOMA百老汇电影中心拥有三个放映屏幕、一个电影资料馆、一家书店和一间咖啡厅。</p>
 <a href="#" class="btn">详情查看</a>  <a href="#" class="btn2">订票</a>    </div>
      <div class="pic"><img src="images/c3.jpg"/></div>
    </div>
  </div>
  
  <div class="con">
    <div class="title">
      <h2>热门电影</h2>
      <a href="dianying.html">查看更多</a> </div>
    <ul class="game_list clearfix">
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/1.jpg"/></div>
        <p>峰爆</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/2.jpg"/></div>
        <p>困在时间的父亲</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/3.jpg"/></div>
        <p>一级指控</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/4.jpg"/></div>
        <p>寻龙诀</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/5.jpg"/></div>
        <p>一曲倾情</p>
        </a> </li>
    </ul>
  </div>
  <div class="con">
    <div class="title">
      <h2>热门电视剧</h2>
      <a href="dianshiju.html">查看更多</a> </div>
    <ul class="game_list clearfix">
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/11.jpg"/></div>
        <p> 加里森敢死队</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/22.jpg"/></div>
        <p>情谜睡美人</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/33.jpg"/></div>
        <p>双镜</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/44.jpg"/></div>
        <p>突如其来的假期</p>
        </a> </li>
      <li> <a href="#" class="box">
        <div class="pic"><img src="images/55.png"/></div>
        <p>奇妙博物馆</p>
        </a> </li>
    </ul>
  </div>
  <marquee οnmοuseοver='this.stop()' οnmοuseοut='this.start()' direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1200" height="50" bgcolor="#FFFFFF" hspace="10" vspace="10">
近期电影院推出众多热播电影，包含如下：困在时间的父亲、寻龙诀、一曲倾晴、一级指控等等。除此以外还有一些电视剧。静等您的观看!<br>
日后会推出什么系列的电影电视剧，让我们拭目以待吧！
</marquee>
  <footer> 版权所属</footer>
</div>
</body>
</html>

学的反而越迷茫

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

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

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

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

学习更多

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

更多推荐

制作一个简单HTML电影网页设计（HTML+CSS）---电影主题网站 6页带