本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(2)

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

发布于2024-11-02 12:18     阅读(1008)     评论(0)     点赞(27)     收藏(0)


目录

 

一,作品介绍

二.运用知识

三.作品详情

四.部分作品效果图

我的:​编辑 五.部分源代码

六.文件目录

 七.源码


 

一,作品介绍

作品介绍:该作品是一个是一个关于影视作品的网页,一共有五个页面,主页,最新,排行,我的,联系我们

二.运用知识

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.排行:里面是一些大家热爱的剧,根据热度排行。

四.部分作品效果图

首页:7bf187a01b3f4c9cbc9296028616a40a.png

排行:bafe315c529745c7af62d74d7edb8c6c.png 

我的:ce9a3ea697bf4eddad3be968d07e34da.png 五.部分源代码

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;
  4. }
  5. a.navbar-brand{
  6. background-color: green;
  7. }
  8. .navigation_bar {
  9. height: 40px;
  10. }
  11. .navigation_bar p {
  12. padding: 5px;
  13. display: inline-block;
  14. margin-left: 30px;
  15. font-size: 40px;
  16. }
  17. .navigation_bar p:first-letter{
  18. color:#9ACD32 ;
  19. }
  20. .main{
  21. padding-top: 10px;
  22. margin: 30px;
  23. height: 260px;
  24. transition: all 3s;
  25. display: flex;
  26. justify-content: space-around;
  27. }
  28. .main a{
  29. text-decoration: none;
  30. }
  31. .main a:hover{
  32. box-shadow: 0 16px 32px 0 rgba(67, 23, 154, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
  33. transform: translate(0, 5px);
  34. }
  35. .main img{
  36. width:200px;
  37. height: 260px;
  38. }
  39. .main p{
  40. font-size: 20px;
  41. color: #9ACD32;
  42. }
  43. .navigation_bar1 {
  44. height: 50px;
  45. display: flex;
  46. }
  47. .navigation_bar1 p {
  48. padding: 8px;
  49. display: inline-block;
  50. margin-left: 30px;
  51. font-size: 40px;
  52. }
  53. .navigation_bar1 p:first-letter{
  54. color:#9ACD32 ;
  55. }
  56. .category{
  57. padding: 15px;
  58. }
  59. .category a{
  60. text-decoration: none;
  61. }
  62. .category p{
  63. font-size: 20px;
  64. color: #9ACD32;
  65. border: 2px #151515 solid;
  66. border-radius: 15px;
  67. }
  68. .main1{
  69. padding-top: 10px;
  70. margin: 30px;
  71. height: 260px;
  72. transition: all 3s;
  73. display: flex;
  74. justify-content: space-around;
  75. }
  76. .main1 a{
  77. text-decoration: none;
  78. }
  79. .main1 a:hover{
  80. box-shadow: 0 16px 32px 0 rgba(67, 23, 154, 0.15);/* 鼠标悬浮时盒子出现的阴影 */
  81. transform: translate(0, 5px);
  82. }
  83. .main1 img{
  84. width:200px;
  85. height: 260px;
  86. }
  87. .main1 p{
  88. font-size: 20px;
  89. color: #9ACD32;
  90. }
  91. @media (max-width: 480px){
  92. .displayNone{
  93. display: none}
  94. .navigation_bar p{
  95. font-size: 30px;
  96. }
  97. .navigation_bar1 p{
  98. font-size: 30px;
  99. }
  100. .category{
  101. display: none;
  102. }
  103. .main{
  104. display: inline-block;
  105. width: 100%;
  106. justify-content: space-around;
  107. text-align: center;
  108. }
  109. .navigation_bar{
  110. height: 20px;
  111. }
  112. .main1{
  113. display: inline-block;
  114. width:100% ;
  115. justify-content: space-around;
  116. text-align: center;
  117. }
  118. }

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. }
'
运行

六.文件目录

7e644d1c05b64ff6aff53cf6c526e137.png

 七.源码

百度网盘:

链接:https://pan.baidu.com/s/1xADvNBBKL6avRlZrskXbug 
提取码:6463

 

原文链接:https://blog.csdn.net/qq_63644501/article/details/130180056




所属网站分类: 技术文章 > 博客

作者:Bhbvhbbgg

链接:http://www.qianduanheidong.com/blog/article/534423/9d38af014de647b7eb0c/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

27 0
收藏该文
已收藏

评论内容:(最多支持255个字符)