时间：2023-10-06 19:12:01 | 来源：网站运营
时间：2023-10-06 19:12:01 来源：网站运营
大三学生《web课程设计》HTML实例网页代码：精彩专栏推荐 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 echarts大屏展示大数据平台可视化(150套) 】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!DOCTYPE HTML><html lang="en"> <head> <!--=============== basic ===============--> <meta charset="UTF-8"> <title>Endor Photography - Creative Responsive Photography Portfolio</title> <meta name="robots" content="index, follow"/> <meta name="keywords" content=""/> <meta name="description" content=""/> <!--=============== css ===============--> <link type="text/css" rel="stylesheet" href="css/plugins.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <!--=============== favicons ===============--> <link rel="shortcut icon" href="images/favicon.ico"> </head> <body> <!--main-loader --> <div class="main-loader"> <div class="ml-wrap"> <div class="ml-mask"></div> <img src="images/logo.png" alt=""> </div> </div> <!-- main-loader end --> <!-- main --> <div id="main"> <!-- logo --> <a href="index.html" class="ajax logo-holder"><img src="images/logo.png" alt=""></a> <!-- logo end --> <!-- navigation --> <div class="nav-holder main-menu"> <nav> <ul> <li> <a href="index.html" class="ajax">Works</a> </li> <li> <a href="about.html" class="ajax">About</a> </li> <li> <a href="blog.html" class="ajax">News</a> </li> <li> <a href="contacts.html" class="ajax">Contacts</a> </li> </ul> </nav> </div> <!-- navigation end --> <!-- share btn --> <div class="share-btn">Share</div> <!-- share btn end --> <div class="nav-button-wrap"> <div class="nav-button"><span></span><span></span><span></span></div> </div> <!-- navigation --> <!-- wrapper--> <div id="wrapper"> <!-- content-holder --> <div class="content-holder hide_footer2"> <div class="header-bg hb_mob"></div> <div class="filter-btn hid-filter"> <div class="filter-btn_container aside_anim"></div> <span class="filt-title">Filters</span> </div> <!-- gallery-filters-wrap--> <div class="gallery-filters-wrap"> <div class="gallery-filters"> <a href="#" class="gallery-filter gallery-filter-active" data-filter="*"><span>01.</span>All Albums</a> <a href="#" class="gallery-filter" data-filter=".nature"><span>02.</span>Nature</a> <a href="#" class="gallery-filter" data-filter=".models"> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item outdoor"> <div class="hov_box"> <img src="images/folio/14.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Happy Flashbacks</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item models outdoor"> <div class="hov_box"> <img src="images/folio/15.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Crazy, Cute Couple</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item outdoor"> <div class="hov_box"> <img src="images/folio/9.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Go Green Morning</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item couples"> <div class="hov_box"> <img src="images/folio/10.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Travelling is Fun</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item models"> <div class="hov_box"> <img src="images/folio/8.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Life, here I Come</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item nature"> <div class="hov_box"> <img src="images/folio/11.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">My Blooming Backyard</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item outdoor"> <div class="hov_box"> <img src="images/folio/12.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Just Happy</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item models"> <div class="hov_box"> <img src="images/folio/16.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Just Happy</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item nature"> <div class="hov_box"> <img src="images/folio/17.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Just Happy</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> <!-- gallery-item --> <div class="gallery-item outdoor"> <div class="hov_box"> <img src="images/folio/18.jpg" alt=""> <div class="overlay"></div> <div class="hov_box-title"> <a href="portfolio-single.html" class="ajax">Happy Flashbacks</a> <div class="cat_item">Models</div> </div> </div> </div> <!-- gallery-item end--> </div> </div> </div> </div> <!-- hero-showcase-wrap end --> <div class="mob-footer_gal mfg-2 fl-wrap"> <div class="to-top-btn"><i class="fal fa-angle-up"></i></div> </div> <!-- share-wrapper--> <div class="share-wrapper"> <div class="share-container isShare"></div> </div> <!-- share-wrapper end --> </div> <!-- content-holder end --> </div> <!-- wrapper end--> <!-- social_links --> <div class="social_links"> <div class="sc-links_clone"> <span>Follow:</span> <ul> <li><a href="#" target="_blank">Fb</a></li> <li><a href="#" target="_blank">Ins</a></li> <li><a href="#" target="_blank">Tw</a></li> <li><a href="#" target="_blank">Vk</a></li> </ul> </div> </div> <!-- social_links end --> <!-- policy-box --> <div class="policy-box"> <span>© Endor 2021 - All rights reserved. </span> </div> <!-- policy-box end--> <!-- cursor--> <div class="element"> <div class="element-item"></div> </div> <!-- cursor end--> </div> <!-- Main end --> <!--=============== scripts ===============--> <script src="js/jquery.min.js"></script> <script src="js/plugins.js"></script> <script src="js/scripts.js"></script> </body></html>body { margin: 0; padding: 0; font-weight: 400; font-size: 14px; height:100%; text-align: center; color: #fff; background: #000; font-family: 'Poppins', sans-serif;}@-o-viewport { width: device-width;}@-ms-viewport { width: device-width;}@viewport { width: device-width;}/* ------Cursor------------------------------------------------------------ */.main-loader { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 100; background: #000;}.ml-wrap { position: absolute; left: 50%; width: 90px; transform: translateY(-50%); margin-left: -45px; top: 50%;}.ml-wrap img { width: 90px; height: auto; position: relative; z-index: 1;}.ml-mask { position: absolute; top: -10%; right: 0; width: 200%; height: 120%; max-width: none; background-image: linear-gradient(to right, transparent, #000 50%, #000); z-index: 2;}/*--------------Typography--------*/p { font-size: 12px; line-height: 24px; padding-bottom: 10px; font-weight: 400; color: #fff;}blockquote { float: left; padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 8px solid #333; position: relative;}blockquote:before { font-family: Font Awesome/ 5 Pro; content: "/f10e"; position: absolute; color: #ccc; bottom: 3px; font-size: 33px; right: 6px; opacity: 0.2}blockquote p { font-style: italic; color: #ccc;}/*--------------General------------*/#main { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}.fl-wrap { float: left; width: 100%; position: relative;}.full-height { height:100%;}.hidden-item , .hov_zoom{ overflow:hidden;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：实例,设计,学生,课程
