您现在的位置是：首页 > 技术教程 正文

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

admin 阅读： 2024-03-26
后台-插件-广告管理-内容页头部广告（手机）

目录

一，作品介绍

二.运用知识

三.作品详情

四.部分作品效果图

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

六.文件目录

 七.源码

一，作品介绍

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

二.运用知识

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. 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 herea>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">Searchbutton>
  53. form>
  54. div>
  55. div>
  56. nav>
  57. <div class="navigation_bar">
  58. <p>Hitp>
  59. <p>Broadcastp>
  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>Moviep>
  90. <p>Channelp>
  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>坏家伙们2019p>
  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;
  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;
  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="请先+注册!";
  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

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表