当前位置 飘雪电影 资讯 正文

HTML5期末大作业:电影网站设计——电影介绍(11页) 大学生电影网页作品 电影网页设计作业模板 学生网页制作源代码下载

HTML5期末大作业电影网站设计——电影介绍(11页) 大学生电影网页作品 电影网页设计作业模板 学生网页制作源代码下载

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

作者主页-更多源码

HTML期末大作业文章专栏

作品介绍

1.网页作品简介 :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

2.网页作品编辑:作品下载后可使用任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页)。

3.网页作品技术:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

@TOC

一、作品展示

影视热点影视热点影视热点影视热点

二、文件目录

影视热点

三、代码实现


<html lang="en">
<head>  <meta charset="UTF-8">
<meta name="author" content="order by dede58.com/" />
  <title>Demo</title>

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/iconfont.css">
</head>
<body style=" height: 2000px; ">

  
  <div id="header">

    
    <div class="header-top">
      <div class="auto-width">
        <h1 class="logo fl"><a href="#"><img src="picture/logo.png" alt="#"></a></h1>
        <div class="search-box fl">
          <form action="#">
            <input type="text" class="fl search-text" placeholder="Search here...">
            <button class="fl search-btn">
              <i class="iconfont icon-search"></i>
            </button>
          </form>
          <div class="search-feedback">
            <span class="search-hot">今日热搜</span>
            <div class="search-menu">
              <a href="#" class="item item-cur">
                <span>1</span>
                <em>OverWatch</em>
              </a>
              <a href="#" class="item item-cur">
                <span>2</span>
                <em>电影知道答案</em>
              </a>
              <a href="#" class="item item-cur">
                <span>3</span>
                <em>S6</em>
              </a>
              <a href="#" class="item">
                <span>4</span>
                <em>夏目友人帐</em>
              </a>
              <a href="#" class="item">
                <span>5</span>
                <em>微小而确实的幸福</em>
              </a>
              <a href="#" class="item">
                <span>6</span>
                <em>神盾局特工</em>
              </a>
              <a href="#" class="item">
                <span>7</span>
                <em>天凉好个秋</em>
              </a>
            </div>
          </div>
        </div>
        <ul class="header-guide fr">
          <li class="guide-item download">
            <a href="#">
              <i class="iconfont icon-app"></i>
              <span>下载客户端</span>
            </a>
            <div class="guide-hover">
              <img src="picture/app-download.png" alt="#">
            </div>
          </li>
          <li class="guide-item login">
            <a href="#">登录/注册</a>
          </li>
          <li class="guide-item history">
            <a href="#">
              <i class="iconfont icon-history"></i>
            </a>
            <div class="guide-hover">
              <span class="text">尚未记录任何历史信息。</span>
              <a href="#" class="more">More</a>
            </div>
          </li>
          <li class="guide-item upload">
            <a href="#">
              <i class="iconfont icon-upload"></i>
            </a>
            <div class="guide-hover">
              <ul>
                <li><a href="#">投视频</a></li>
                <li><a href="#">投文章</a></li>
              </ul>
            </div>
          </li>
          <li class="guide-item collect">
            <a href="#">
              <i class="iconfont icon-collect"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>

    
    <div class="header-banner">
      <a href="#" class="bg"></a>
      <span class="text">这辆车……到底能不能上啊!!!</span>
      <a href="#" class="link"></a>
    </div>
    
    <div class="header-nav">
      <div class="nav-wrap auto-width clearfix">
        <a href="#" class="nav-item nav-cur">首页</a>
        <a href="#" class="nav-item">番剧</a>
        <a href="#" class="nav-item nav-item_hover">动画</a>
        <a href="#" class="nav-item nav-item_hover">音乐</a>
        <a href="#" class="nav-item nav-item_hover">舞蹈</a>
        <a href="#" class="nav-item nav-item_hover">游戏</a>
        <a href="#" class="nav-item nav-item_hover">娱乐</a>
        <a href="#" class="nav-item nav-item_hover">科技</a>
        <a href="#" class="nav-item nav-item_hover">影视</a>
        <a href="#" class="nav-item nav-item_hover">体育</a>
        <a href="#" class="nav-item nav-item_hover">彼女</a>
        <a href="#" class="nav-item nav-item_hover">鱼塘</a>
        <a href="#" class="nav-item nav-item_hover">文章</a>
        <a href="#" class="nav-item nav-item_hover">合辑</a>
        <a href="#" class="nav-rank">
          <i class="iconfont icon-rank"></i>
          全站排行榜
        </a>
      </div>
      <div class="subNav">
        <ul class="auto-width">
          <li class="subNav-item">
            <a href="#">动画短片</a>
            <a href="#">动画资讯</a>
            <a href="#">旧番补档</a>
            <a href="#">新番连载</a>
            <a href="#">MAD·AMV</a>
            <a href="#">MMD·3D</a>
            <a href="#">2.5次元</a>
            <a href="#">国产动画</a>
          </li>
          <li class="subNav-item">
            <a href="#">原创·翻唱</a>
            <a href="#">演奏</a>
            <a href="#">Vocaloid</a>
            <a href="#">日系音乐</a>
            <a href="#">综合音乐</a>
            <a href="#">演唱会</a>
          </li>
          <li class="subNav-item">
            <a href="#">宅舞</a>
            <a href="#">综合舞蹈</a>
          </li>
          <li class="subNav-item">
            <a href="#">主机单机</a>
            <a href="#">游戏集锦</a>
            <a href="#">电子竞技</a>
            <a href="#">LOL</a>
            <a href="#">守望先锋</a>
            <a href="#">桌游卡牌</a>
            <a href="#">Mugen</a>
          </li>
          <li class="subNav-item">
            <a href="#">生活娱乐</a>
            <a href="#">鬼畜调教</a>
            <a href="#">萌宠</a>
            <a href="#">美食</a>
            <a href="#">综艺</a>
          </li>
          <li class="subNav-item">
            <a href="#">SF</a>
            <a href="#">黑科技</a>
            <a href="#">数码</a>
            <a href="#">广告</a>
            <a href="#">白科技</a>
            <a href="#">自我发电</a>
            <a href="#">科学技术</a>
            <a href="#">汽车</a>
          </li>
          <li class="subNav-item">
            <a href="#">电影</a>
            <a href="#">日剧</a>
            <a href="#">美剧</a>
            <a href="#">国产剧</a>
            <a href="#">网络剧</a>
            <a href="#">韩剧</a>
            <a href="#">布袋·特摄</a>
            <a href="#">纪录片</a>
            <a href="#">其他</a>
          </li>
          <li class="subNav-item">
            <a href="#">综合体育</a>
            <a href="#">足球</a>
            <a href="#">篮球</a>
            <a href="#">搏击</a>
            <a href="#">11区体育</a>
            <a href="#">惊奇体育</a>
          </li>
          <li class="subNav-item">
            <a href="#">造型</a>
            <a href="#">西皮</a>
            <a href="#">爱豆</a>
            <a href="#">其他</a>
          </li>
          <li class="subNav-item">
            <a href="#">军事</a>
            <a href="#">历史</a>
            <a href="#">焦点</a>
          </li>
          <li class="subNav-item">
            <a href="#">文章综合</a>
            <a href="#">工作·情感</a>
            <a href="#">漫画·轻小说</a>
            <a href="#">游戏</a>
          </li>
          <li class="subNav-item">
            <a href="#">AcFun专题</a>
          </li>
        </ul>
      </div>
    </div>

  </div>

  
  <div id="main">
    <div class="auto-width clearfix">

      
      <section class="area clearfix area-slider">
        <div id="sliderBox" class="slider-box fl">
          <ul class="slider">
            <li data-title="Picture 1" class="slider-item"><img src="picture/slider-1.jpg" alt="#"></li>
            <li data-title="Picture 2" class="slider-item"><img src="picture/slider-2.jpg" alt="#"></li>
            <li data-title="Picture 3" class="slider-item"><img src="picture/slider-3.jpg" alt="#"></li>
            <li data-title="Picture 4" class="slider-item"><img src="picture/slider-4.jpg" alt="#"></li>
            <li data-title="Picture 5" class="slider-item"><img src="picture/slider-5.jpg" alt="#"></li>
          </ul>
          <div class="btn-box">
            <a href="javascript:;" class="btn-item btn-item__active"></a>
            <a href="javascript:;" class="btn-item"></a>
            <a href="javascript:;" class="btn-item"></a>
            <a href="javascript:;" class="btn-item"></a>
            <a href="javascript:;" class="btn-item"></a>
          </div>
        </div>
        <ul class="slider-menu fl">
          <li class="slider-menu__item">
            <a href="#" class="item">
              <img src="picture/slider-menu__1.jpg" alt="#">
              <div class="mask-gradient">
                <p>嗨呀!好气啊!OW堡傻缺集锦</p>
                <div class="text-box">
                  <em>UP: AcFun出品</em>
                  <span class="info">
                    <i class="iconfont icon-collect">14.9万</i>
                    <i class="iconfont icon-collect">165</i>
                  </span>
                </div>
              </div>
            </a>
          </li>
          <li class="slider-menu__item">
            <a href="#" class="item">
              <img src="picture/slider-menu__2.jpg" alt="#">
              <div class="mask-gradient">
                <p>嗨呀!好气啊!OW堡傻缺集锦</p>
                <div class="text-box">
                  <em>UP: AcFun出品</em>
                  <span class="info">
                    <i class="iconfont icon-collect">14.9万</i>
                    <i class="iconfont icon-collect">165</i>
                  </span>
                </div>
              </div>
            </a>
          </li>
          <li class="slider-menu__item">
            <a href="#" class="item">
              <img src="picture/slider-menu__3.jpg" alt="#">
              <div class="mask-gradient">
                <p>嗨呀!好气啊!OW堡傻缺集锦</p>
                <div class="text-box">
                  <em>UP: AcFun出品</em>
                  <span class="info">
                    <i class="iconfont icon-collect">14.9万</i>
                    <i class="iconfont icon-collect">165</i>
                  </span>
                </div>
              </div>
            </a>
          </li>
          <li class="slider-menu__item">
            <a href="#" class="item">
              <img src="picture/slider-menu__4.jpg" alt="#">
              <div class="mask-gradient">
                  <a href="#" class="userName">UP: iphone猫</a>
                </div>
              </li>
              <li class="area-menu__item">
      <div class="footer-middle clearfix">
        <div class="item">
          <a href="#"><i class="icon icon-1"></i>中国互联网举报中心</a>
          <a href="#"><i class="icon icon-2"></i>网络文化经营单位</a>
        </div>
        <div class="item">
          <span>京8888888888号</span>
        </div>
        <div class="item">
          <span>节目制作经营许可证66666666666号</span>

        </div>
      </div>
      <div class="footer-bottom">
        <img src="picture/logo-gray.png" alt="#">
        <p>本站不提供任何视听上传服务,所有内容均来自视频分享站点所提供的公开引用资源。********</p>
      </div>
    </div>
  </div>

  <a href="javascript:;" id="back_top" class="iconfont icon-up"></a>

  <script src="js/jquery.min.js"></script>
  <script src="js/script.js"></script>
  <script src="js/sliderbox.js"></script>
  <script src="js/tab.js"></script>

</body>
</html>

四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站


五、完整源码

作者主页-更多源码

HTML期末大作业文章专栏

~ 关注我,点赞博文~ 每天带你涨知识!

相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

【百度网盘-源码下载地址】

链接:pan.baidu.com/s/1T5XeFJ7WE2ASbylHE2sRMA 提取码:8888


六、更多源码

HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

影视热点影视热点

联系我们

联系我们

0898-88881688

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部