web期末大作业--网页设计 HTML+CSS+JS（附源码）

嚴華  金牌会员 | 2024-6-25 10:52:02 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 915|帖子 915|积分 2745

目次

一，作品介绍
二.运用知识
三.作品详情
四.部分作品效果图
我的：​编辑 五.部分源代码
六.文件目次
 七.源码

一，作品介绍

作品介绍：该作品是一个是一个关于影视作品的网页，一共有五个页面，主页，最新，排行，我的，接洽我们
二.运用知识

1.HTML是超文本标记语言，是为欣赏器设计的语言，用于在Web上传输信息。HTML的编写比较简单，只要记着根本的语法就可以。
2.CSS是由W3C构造制定的一种用来定义样式规则(如字体、颜色和位置)的语言，能让网页制作者有效地定制、改善网页的表现效果。
3.JavaScript是一种轻型的脚本语言，它与HTML相联合，可以增强功能，提高与用户之间的交互性。重要使用的是Java来进行编写。JSP全称Java Server Page，是由HTML语句和嵌套在其中的Java代码构成的文件，文件扩展名为jsp。欣赏器访问JSP页面时，Web容器把HTML原封不动地发送给欣赏器，嵌套在<%>之间的Java代码被表明实验，其中outprint(或println)语句输出的内容则被按次序插入到该对<%>在JSP文件中的出现位置处，同HTML-同输出给欣赏器。

三.作品详情

1.首页：主打影视内容的网站，有导航栏，通过导航栏可进入差别的页面，还有搜索框，可搜索本身想要寻找的内容，接着分为两部分，一部分是热播剧，一部分是影戏，影戏也有分类，可根据本身的爱好去选择。
2.我的：点击进去之后可以登录页面，一旁有一个跳转到注册页面的按钮，如果你没有账号，就可以点击这个按钮跳转到注册页面，跳转到注册页面后，就可以注册，注册乐成后也会跳转到登录页面，注册页面旁边也有一个可以跳转到登录页面，如果你已经注册了，可以直接跳转到登录页面登录，登录乐成后就可以跳转到首页。
3.接洽我们：这个页面有一些表格，你可以写下本身的信息和意见，如果你对于这个网页的内容有感到不满足的地方可以填写意见，侧栏还有一些关于内容的提示。
4.最新：里面的内容是最新更新的一些影视剧，有最新的更新日期和排行在前的更新剧。
5.排行：里面是一些各人热爱的剧，根据热度排行。
四.部分作品效果图

首页：

排行：
 
我的：
 五.部分源代码

HTML：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  8.     <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>   
  9.     <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  10.     <link rel="stylesheet" href="/CSS/common.css">
  11.     <link rel="stylesheet" href="/CSS/index.css">
  12.     <title>主页</title>
  13. </head>
  14. <body>
  15.     <div class="container">
  16.         <nav class="navbar navbar-expand-lg navbar-light bg-light">
  17.             <div class="container-fluid">
  18.             <a class="navbar-brand" href="index.html">主页</a>
  19.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation" data-toggle="dropdown">
  20.             <span class="navbar-toggler-icon" data-toggle="dropdown"></span>
  21.             </button>
  22.             <div class="collapse navbar-collapse" id="navbarSupportedContent">
  23.             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  24.               <li class="nav-item">
  25.                 <a class="nav-link active" aria-current="page" href="ranking.html">排行</a>
  26.               </li>
  27.               <li class="nav-item">
  28.                 <a class="nav-link" href="login.html">我的</a>
  29.               </li>
  30.               <li class="nav-item">
  31.                 <a class="nav-link" href="new.html">最新</a>
  32.               </li>
  33.               <li class="nav-item">
  34.                 <a class="nav-link" href="contact.html">联系我们</a>
  35.               </li>
  36.               <div class="pulldown-box">
  37.               <li class="nav-item dropdown">
  38.                 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="">
  39.                   全部
  40.                 </a>
  41.                 <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  42.                   <li><a class="dropdown-item" href="#">电视</a></li>
  43.                   <li><a class="dropdown-item" href="#">动漫</a></li>
  44.                   <li><hr class="dropdown-divider"></li>
  45.                   <li><a class="dropdown-item" href="#">Something else here</a></li>
  46.                 </ul>
  47.               </li>
  48.             </div>
  49.             </ul>
  50.             <form class="d-flex">
  51.               <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  52.               <button class="btn btn-outline-success" type="submit">Search</button>
  53.             </form>
  54.             </div>
  55.             </div>
  56.             </nav>
  57.         <div class="navigation_bar">
  58.             <p>Hit</p>
  59.             <p>Broadcast</p>
  60.         </div>
  61.         <div class="main">
  62.             <a  href="https://wujicloud.cn/voddetail/42265.html">
  63.                 <img src="/images/p1.png" alt="">
  64.                     <p>我们的歌</p>
  65.                 </img>
  66.             </a>
  67.             <a href="https://wujicloud.cn/voddetail/43534.html">
  68.                 <img src="/images/p2.png" alt="">
  69.                     <p>名侦探学院</p>
  70.                 </img>
  71.             </a>
  72.             <a href="https://wujicloud.cn/voddetail/42999.html">
  73.                 <img src="/images/p3.png" alt="">
  74.                     <p>我在你的未来吗</p>
  75.                 </img>
  76.             </a>
  77.             <a href="https://wujicloud.cn/voddetail/42950.html">
  78.                 <img src="/images/p4.png" alt="">
  79.                     <p>大湾仔的夜第二季</p>
  80.                 </img>
  81.             </a>
  82.             <a href="https://wujicloud.cn/voddetail/42847.html">
  83.                 <img src="/images/p5.png" alt="">
  84.                     <p>再见爱人第二季</p>
  85.                 </img>
  86.             </a>
  87.         </div>
  88.         <div class="navigation_bar1">
  89.             <p>Movie</p>
  90.             <p>Channel</p>
  91.             <div class="category">
  92.                 <a href="https://wujicloud.cn/vodshow/6-----------.html">
  93.                     <p>动作片</p>
  94.                 </a>
  95.                 <a href="https://wujicloud.cn/vodshow/7-----------.html">
  96.                     <p>喜剧片</p>
  97.                 </a>
  98.                 <a href="https://wujicloud.cn/vodshow/8-----------.html">
  99.                     <p>爱情片</p>
  100.                 </a>
  101.                 <a href="https://wujicloud.cn/vodshow/9-----------.html">
  102.                     <p>科幻片</p>
  103.                 </a>
  104.                 <a href="https://wujicloud.cn/vodshow/10-----------.html">
  105.                     <p>恐怖片</p>
  106.                 </a>
  107.             </div>
  108.         </div>
  109.         <div class="main1">
  110.             <a href="https://wujicloud.cn/voddetail/43694.html">
  111.                 <img src="/images/p6.png" alt="">
  112.                     <p>世纪虫</p>
  113.                 </img>
  114.             </a><a href="https://wujicloud.cn/voddetail/43693.html">
  115.                 <img src="/images/p7.png" alt="">
  116.                     <p>我的遗憾和你有关</p>
  117.                 </img>
  118.             </a><a href="https://wujicloud.cn/voddetail/43690.html">
  119.                 <img src="/images/p8.png" alt="">
  120.                     <p>分贝</p>
  121.                 </img>
  122.             </a><a href="https://wujicloud.cn/voddetail/28589.html">
  123.                 <img src="/images/p9.png" alt="">
  124.                     <p>坏家伙们2019</p>
  125.                 </img>
  126.             </a><a href="https://wujicloud.cn/voddetail/28588.html">
  127.                 <img src="/images/p10.png" alt="">
  128.                     <p>白头山</p>
  129.                 </img>
  130.             </a>
  131.         </div>
  132.     </div>
  133. </body>
  134. </html>
复制代码
CSS:：
  1. .container{
  2.     max-width: 100%;
  3.     min-height: 500px;
  5. }
  6. a.navbar-brand{
  7.     background-color: green;
  8. }
  9. .navigation_bar {
  10.     height: 40px;
  11.    
  12. }
  13. .navigation_bar p {
  14.     padding: 5px;
  15.     display: inline-block;
  16.     margin-left: 30px;
  17.     font-size: 40px;
  18. }
  19. .navigation_bar p:first-letter{
  20.     color:#9ACD32 ;
  21. }
  22. .main{
  23.     padding-top: 10px;
  24.     margin: 30px;
  25.     height: 260px;
  26.     transition: all 3s;
  27.     display: flex;
  28.     justify-content: space-around;
  29. }
  30. .main a{
  31.     text-decoration: none;
  32. }
  33. .main a:hover{
  34.     box-shadow: 0 16px 32px 0 rgba(67, 23, 154, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
  35.         transform: translate(0, 5px);
  36. }
  37. .main img{
  38.     width:200px;
  39.     height: 260px;
  40. }
  41. .main p{
  42.     font-size: 20px;
  43.     color: #9ACD32;
  44. }
  46. .navigation_bar1 {
  47.     height: 50px;
  48.     display: flex;
  49.    
  50. }
  51. .navigation_bar1 p {
  52.     padding: 8px;
  53.     display: inline-block;
  54.     margin-left: 30px;
  55.     font-size: 40px;
  56. }
  57. .navigation_bar1 p:first-letter{
  58.     color:#9ACD32 ;
  59. }
  60. .category{
  61.     padding: 15px;
  62. }
  63. .category a{
  64.     text-decoration: none;
  65. }
  66. .category p{
  67.     font-size: 20px;
  68.     color: #9ACD32;
  69.     border: 2px #151515 solid;
  70.     border-radius: 15px;
  72. }
  73. .main1{
  74.     padding-top: 10px;
  75.     margin: 30px;
  76.     height: 260px;
  77.     transition: all 3s;
  78.     display: flex;
  79.     justify-content: space-around;
  80. }
  81. .main1 a{
  82.     text-decoration: none;
  83. }
  84. .main1 a:hover{
  85.     box-shadow: 0 16px 32px 0 rgba(67, 23, 154, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
  86.         transform: translate(0, 5px);
  87. }
  88. .main1 img{
  89.     width:200px;
  90.     height: 260px;
  91. }
  92. .main1 p{
  93.     font-size: 20px;
  94.     color: #9ACD32;
  95. }
  96. @media (max-width: 480px){
  97.     .displayNone{
  98.         display: none}
  99.     .navigation_bar p{
  100.         font-size: 30px;
  101.     }
  102.     .navigation_bar1 p{
  103.         font-size: 30px;
  104.     }
  105.     .category{
  106.         display: none;
  107.     }
  108.     .main{
  109.         display: inline-block;
  110.         width: 100%;
  111.         justify-content: space-around;
  112.         text-align: center;
  113.     }
  114.     .navigation_bar{
  115.         height: 20px;
  116.     }
  117.     .main1{
  118.         display: inline-block;
  119.         width:100% ;
  120.         justify-content: space-around;
  121.         text-align: center;
  122.     }
  123. }
复制代码
JS：
  1. function getStorage(){
  2.     let name=document.getElementById("name").value;
  3.     let str =localStorage.getItem(name);
  4.     let data =JSON.parse(str);
  5.     if(!data){
  6.         //alert("请你先注册");
  7.         document.getElementById('msg').innerHTML="请先+<a href='register.html'>注册!</a>";
  8.     return false;
  9.         }else{
  10.             let pw=document.getElementById('password').value;
  11.             if(data.password==pw){
  12.                 document.location.href="index.html";
  13.                 return false;
  14.             }else{
  15.                 document.getElementById('msg').innerHTML="密码错误";
  16.                 return false;
  17.             }
  18.         }
  19.         }
复制代码
六.文件目次


 七.源码

百度网盘：
链接：https://pan.baidu.com/s/1xADvNBBKL6avRlZrskXbug 
提取码：6463

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

嚴華

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表