HTML5期末大作业：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码

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

1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？
2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

​​​1.网页作品简介​​​ ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。包含：​​主页、关于我们、登录、注册，​​总共4个页面。

​​​2.网页作品编辑​​​：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

​​​3.网页作品布局​​​：网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

​​​4.网页作品技术​​​：使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言，并使用JavaScript制作了表单判断(提交时表单不能为空)。

文章目录

  • ​​HTML5期末大作业：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码​​
  • ​​作品介绍​​
  • ​​一、作品展示​​
  • ​​二、文件目录​​
  • ​​三、代码实现​​
  • ​​四、web前端(学习资料)​​

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>电影网站</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/icofont.css" />
    <link rel="stylesheet" href="css/mian_style.css" />
  </head>
  <body>
    <!--头部开始  -->
    <header class="header">
      <div class="container">
        <div class="header_area">
          <div class="logo">
            <a href="index.html">
              <img src="picture/logo.png" alt="logo"/>
            </a>
          </div>  
          <div class="meau">
            <ul>
              <li>
                <a class="active" href="index.html">首页</a>
              </li>
              <li>
                <a href="movies.html">电影</a>
              </li>
              <li>
                <a href="celebrities.html">明星</a>
              </li>
              <li>
                <a href="hot.html">热点</a>
              </li>
              <li>
                <a href="news.html">新闻</a>
              </li>
              <li style="width: 120px;">
                <a href="###" class="theme-btn">
                  <i class="icofont icofont-ticket"></i>
                  &nbsp;&nbsp;订票                  
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--头部结束-->     
    </header>
    <!--内容部分开始-->
      <section id="content">
        <!--banner开始-->
        <div class="banner">
          <ul class="list">
            <li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li>
            <li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li>
            <li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li>
            <li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li>
          </ul>
          <ul class="btn">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>

          <a href="javascript:;" class="arrow left">&lt</a>
          <a href="javascript:;" class="arrow right">&gt</a>
        </div>
        <!--近期热播-->
        <div class="con_area">
          <div class="container">
            <div class="recent_con">
              <div class="con_top">
                <h1>
                  <i class="icofont icofont-movie" ></i>
                  近期热播
                </h1>
                <a href="index.html" class="more">
                  MORE>>
                </a>
              </div>
              <div class="con_main">
                <ul style="overflow:hidden;margin-bottom: 20px;">
                  <li class="img_right">
                    <img src="picture/portfolio1.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <div class="portfolio-content">
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </div>
                  </li>

                  <li  class="img_right">
                    <img src="picture/portfolio2.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </li>
                  <li  class="img_right">
                    <img src="picture/portfolio3.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </li>
                  <li>
                    <img src="picture/portfolio4.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </li>                                   
                </ul>
                <ul>
                  <li class="img_right">
                    <img src="picture/portfolio5.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </li>
                  <li  class="img_right">
                    <img src="picture/portfolio6.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </li>
                  <li  class="img_right">
                    <img src="picture/portfolio3.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </li>
                  <li>
                    <img src="picture/portfolio4.png" alt="1" />
                    <a>
                      <i class="icofont icofont-ui-play"></i>
                    </a>
                    <h2>Boyz II Men</h2>
                    <div class="review">
                      <div class="author-review">
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>
                        <b class="icofont icofont-star"></b>

                      </div>
                      <h4>180k voters</h4>
                    </div>
                  </li>                                   
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!--经典电影-->
        <div class="con_area">
          <div class="container">
            <div class="jd_con">
              <div class="con_top">
                <h1>
                  <i class="icofont icofont-film" ></i>
                  经典电影
                </h1>
                <a href="index.html" class="more">
                  MORE>>
                </a>
              </div>
        <div class="row" style="overflow: hidden; width: 100%;">
                    <div class="col-md-9">
            <div class="video-area">
              <img src="picture/video1.png" alt="video" />
              <a href="###" class="popup-youtube">
                <i class="icofont icofont-ui-play"></i>
              </a>
              <div class="video-text">
                <h2>Angle of Death</h2>
                <div class="review">
                  <div class="author-review">
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                  </div>
                  <h4>180k voters</h4>
                </div>
              </div>
            </div>
            <div class="video-area">
              <img src="picture/video1.png" alt="video" />
              <a href="###" class="popup-youtube">
                <i class="icofont icofont-ui-play"></i>
              </a>
              <div class="video-text">
                <h2>Angle of Death</h2>
                <div class="review">
                  <div class="author-review">
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                  </div>
                  <h4>180k voters</h4>
                </div>
              </div>
            </div>
            <div class="video-area">
              <img src="picture/video1.png" alt="video" />
              <a href="###" class="popup-youtube">
                <i class="icofont icofont-ui-play"></i>
              </a>
              <div class="video-text">
                <h2>Angle of Death</h2>
                <div class="review">
                  <div class="author-review">
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                  </div>
                  <h4>180k voters</h4>
                </div>
              </div>
            </div>
            <div class="video-area">
              <img src="picture/video1.png" alt="video" />
              <a href="###" class="popup-youtube">
                <i class="icofont icofont-ui-play"></i>
              </a>
              <div class="video-text">
                <h2>Angle of Death</h2>
                <div class="review">
                  <div class="author-review">
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                    <i class="icofont icofont-star"></i>
                  </div>
                  <h4>180k voters</h4>
                </div>
              </div>
            </div>
                    </div>
        </div>
            </div>
          </div>
        </div>
      <!--  最新电影-->
        <div class="con_area">
          <div class="container">
            <div class="jd_con">
              <div class="con_top">
                <h1>
                  <i class="icofont icofont-coffee-cup" ></i>
                  最新电影
                </h1>
                <a href="index.html" class="more">
                  MORE>>
                </a>
              </div>
      </div>
      <div class="news-slide-area">
        <div class="news-slider">
          <div class="single-news">
            <div class="news-bg-1"></div>
            <div class="news-date">
              <h2><span>NOV</span> 25</h2>
              <h1>2017</h1>
            </div>
            <div class="news-content">
              <h2>The Witch Queen</h2>
              <p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
            </div>
            <a href="#">Read More</a>
          </div>
          <div class="single-news">
            <div class="news-bg-2"></div>
            <div class="news-date">
              <h2><span>NOV</span> 25</h2>
              <h1>2017</h1>
            </div>
            <div class="news-content">
              <h2>The Witch Queen</h2>
              <p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
            </div>
            <a href="#">Read More</a>
          </div>
          <div class="single-news">
            <div class="news-bg-3"></div>
            <div class="news-date">
              <h2><span>NOV</span> 25</h2>
              <h1>2017</h1>
            </div>
            <div class="news-content">
              <h2>The Witch Queen</h2>
              <p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
            </div>
            <a href="#">Read More</a>
          </div>
        </div>
      </div>
          </div>
        </div>

      </section>
      <!--end start-->
    <footer id="end">
      <div class="container">
        <span class="company">
          北京时代国际影业有限公司
        </span>
      </div>
    </footer>
  </body>
  <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
  <script type="text/javascript" src="js/main.js"></script>
</html>

四、web前端(学习资料)

​​​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​​​

​适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​​​

更多推荐

HTML5期末大作业：电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 we