時間：2023-10-06 19:12:01 | 來源：網(wǎng)站運營
時間：2023-10-06 19:12:01 來源：網(wǎng)站運營
大三學生《web課程設計》HTML實例網(wǎng)頁代碼：精彩專欄推薦 ?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設項目精品實戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】 免費且實用的WEB前端學習指南： 【 web前端零基礎到高級學習視頻教程 120G干貨分享】 關于作者: 歷任研發(fā)工程師，技術組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級頁面； （2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3） js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到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;}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！ 【 關注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！關鍵詞：實例,設計,學生,課程
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
