當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

大二学生web期末大作业在线电影网站 HTML+CSS+JS

發布時間：2023/12/31 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了大二学生web期末大作业在线电影网站 HTML+CSS+JS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

🌩? 精彩專欄推薦👇🏻👇🏻👇🏻
💂 作者主頁: 【進入主頁—🚀獲取更多源碼】
🎓 web前端期末大作業：【📚HTML5網頁期末作業 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】

📂文章目錄

二、📚網站介紹
三、🔗網站效果
- ??1.視頻演示
- 🧩 2.圖片演示
四、💒 網站代碼
- 🧱HTML結構代碼
- 🏠CSS樣式代碼
五、🎁更多源碼

二、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。

📒網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。

三、🔗網站效果

??1.視頻演示

電影網頁設計

🧩 2.圖片演示

四、💒 網站代碼

🧱HTML結構代碼

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>叮當電影 - 搜羅全網好電影</title><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><link rel="stylesheet" type="text/css" href="./css/index.css"> </head> <body> <header class="header"><div class="container"><a href="index.html" class="logo"></a><div class="nav"><ul class="navbar"><li><a href="index.html" class="active">首頁</a></li><li><a href="movie.html">購票</a></li><li><a href="javascript:;">影院</a></li><li><a href="javascript:;">社區</a></li></ul></div><div class="headcart"><i class="cart-icon"></i><b class="card-num"></b><div class="card-tip"></div></div><div class="user"><div class="userout"><a href="login.html" class="login cur">登錄</a><a href="register.html" class="register cur">注冊</a></div><div class="userin"><a href="javascript:;" class="menu-item-user"><img class="user-face" src="./imgs/userface.jpg" alt="userface"><span class="user-name"></span></a><span class="caret"></span><ul class="dropdown-menu"><li><a href="javascript:;">個人中心</a></li><li><a href="javascript:;">退出登錄</a></li></ul></div></div><ul><li><table class="slidey-list-table"><tr><td rowspan="2" class="slidey-list-img"><div></div></td><td class="slidey-list-title"></td></tr><tr><td class="slidey-list-description"></td></tr></table></li><li><table class="slidey-list-table"><tr><td rowspan="2" class="slidey-list-img"><div></div></td><td class="slidey-list-title"></td></tr><tr><td class="slidey-list-description"></td></tr></table></li><li><table class="slidey-list-table"><tr><td rowspan="2" class="slidey-list-img"><div></div></td><td class="slidey-list-title"></td></tr><tr><td class="slidey-list-description"></td></tr></table></li><li><table class="slidey-list-table"><tr><td rowspan="2" class="slidey-list-img"><div></div></td><td class="slidey-list-title"></td></tr><tr><td class="slidey-list-description"></td></tr></table></li></ul></div></div><div class="movie-grid"><div class="panel"><div class="main"><div class="panel-header"><span class="panel-title">正在熱映（<span>20</span>部）</span><a href="javascript:;" class="panel-more">更多</a></div><div class="movie-list"><ul><li><a href="movie.html" class="movie-poster"><img src="./imgs/poster/bingxueqiyuan2.jpg" alt="" class="poster"><span class="movie-score">8.0</span></a><span class="movie-title">冰雪奇緣2</span><a href="movie.html" class="movie-ticket-buy">選座購票</a></li><li><a href="movie.html" class="movie-poster"><img src="./imgs/poster/chuixiaoren.jpg" alt="" class="poster"><span class="movie-score">8.5</span></a><span class="movie-title">吹哨人</span><a href="movie.html" class="movie-ticket-buy">選座購票</a></li><li><li><a href="javascript:;"><span class="movie-rank-num">4</span><p class="movie-rank-name">吹哨人</p><span class="box-office">900人想看</span></a></li><li><a href="javascript:;"><span class="movie-rank-num">5</span><p class="movie-rank-name">大約在冬季</p><span class="box-office">800人想看</span></a></li><li><a href="javascript:;"><span class="movie-rank-num">6</span><p class="movie-rank-name">吹哨人</p><span class="box-office">700人想看</span></a></li><li><a href="javascript:;"><span class="movie-rank-num">7</span><p class="movie-rank-name">天·火</p><span class="box-office">600人想看</span></a></li><li><a href="javascript:;"><span class="movie-rank-num">8</span><p class="movie-rank-name">一生有你</p><span class="box-office">550人想看</span></a></li><li><a href="javascript:;"><span class="movie-rank-num">9</span><p class="movie-rank-name">冰雪奇緣2</p><span class="box-office">450人想看</span></a></li></ul></div></div></div></div> </div><footer class="footer"><div class="container"><div class="link-nav"><ul><li><a href="javascript:;">關于叮當</a></li><li><a href="javascript:;">加入我們</a></li><li><a href="javascript:;">聯系我們</a></li><li><a href="javascript:;">隱私政策</a></li><li><a href="javascript:;">問題反饋</a></li></ul><div class="copyright">Copyright ? 2019 叮當電影</div></div><div class="sns"><a href="javascript:;" class="sina-icon icon"></a><a href="javascript:;" class="wechat-icon icon"></a><a href="javascript:;" class="rss-icon icon"></a></div></div> </footer> <div id="toTop"></div><script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/slidey.js"></script> <script type="text/javascript">window.onload = function () {setPage("index.html");initPublic();initScrollToTop();new initSlidey();}; </script> </body> </html>

🏠CSS樣式代碼

@charset "UTF-8";/*******************************************************************/ /* 底部 - 頁腳 */ .footer {height: 100px;width: 100%;overflow: hidden;background-color: #2d3237;color: #778088; }.footer a {color: #778088; }.footer .link-nav {float: left;margin: 20px 0; }.footer .link-nav a:hover {color: #FF8D1B; }.footer .sns {float: right;margin-top: 30px; }.footer .link-nav li {display: inline-block;margin-right: 20px; }.footer .copyright {margin-top: 10px; }.footer .sns a.icon {display: inline-block;width: 36px;height: 36px;margin-left: 10px;border-radius: 50%;background-repeat: no-repeat;background-size: contain;background-position: center;transition: all .2s ease; }.footer .sns a.icon:hover {width: 42px;height: 42px;background-color: #FF8D1B;border: 1px solid #FF8D1B; }.footer .sns .sina-icon {background-image: url("../imgs/icons/sina-icon.png"); }.footer .sns .wechat-icon {background-image: url("../imgs/icons/wechat_icon.png"); }.footer .sns .rss-icon {background-image: url("../imgs/icons/rss-icon.png"); }

五、🎁更多源碼

1.如果我的博客對你有幫助請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻🉑關注我| 獲取更多源碼】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學生畢業HTML模板、等!

📣以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻

總結

以上是生活随笔為你收集整理的大二学生web期末大作业在线电影网站 HTML+CSS+JS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。