時間：2023-09-29 11:42:01 | 來源：網站運營
時間：2023-09-29 11:42:01 來源：網站運營
大一新生HTML期末作業(yè) 學生個人網頁設計作業(yè) HTML5響應式個人簡歷網站模板 web前端網頁制作課作業(yè)：精彩專欄推薦 ?? 作者簡介: 一個熱愛把邏輯思維轉變?yōu)榇a的技術博主 作者主頁: 【主頁—— 獲取更多優(yōu)質源碼】 web前端期末大作業(yè)： 【 畢設項目精品實戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 echarts大屏展示大數據平臺可視化(150套) 】 免費且實用的WEB前端學習指南： 【 web前端零基礎到高級學習視頻教程 120G干貨分享】 關于作者: 歷任研發(fā)工程師，技術組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級頁面； （2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3） js文件包含：js實現動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網頁中運用到js代碼）。<!--Author: W3layoutsAuthor URL: http://w3layouts.comLicense: Creative Commons Attribution 3.0 UnportedLicense URL: http://creativecommons.org/licenses/by/3.0/--><!DOCTYPE html><html><head><title>我的簡歷是一個引導響應式網站</title><!--mobile apps--><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="My Resume Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" /><script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script><!--mobile apps--><!--Custom Theme files--><link rel="shortcut icon" href="images/your_ico.ico" type="image/x-icon"><link rel="icon" href="images/your_ico.ico" type="image/x-icon"><link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all"><link href="css/style.css" type="text/css" rel="stylesheet" media="all"><link rel="stylesheet" href="css/swipebox.css"> <div id="projects" class="portfolio"> <div class="container"> <h3 class="title wow zoomInLeft animated" data-wow-delay=".5s">部分作品</h3> <div class="sap_tabs"> <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;"> <ul class="resp-tabs-list wow fadeInUp animated" data-wow-delay=".7s"> <li class="resp-tab-item"><span>All</span></li> <li class="resp-tab-item"><span>Html</span></li> <li class="resp-tab-item"><span> Photoshop</span></li> <li class="resp-tab-item"><span>Cinema 4D</span></li> <li class="resp-tab-item"><span>LOGO/VI</span></li> </ul> <div class="clearfix"> </div> <div class="resp-tabs-container"> <div class="tab-1 resp-tab-content"> <div class="tab_img"> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g1.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g1.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>蘋果酒廣告，莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid effect-sarah"> <a href="images/g2.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g2.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g3.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g3.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g4.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g4.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g11.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g11.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g6.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g6.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g7.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g7.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g8.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g8.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g9.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g9.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g10.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g10.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g5.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g5.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g12.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g12.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="clearfix"> </div> </div> </div> <div class="tab-1 resp-tab-content"> <div class="tab_img"> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g5.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g5.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g6.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g6.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g7.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g7.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="clearfix"> </div> </div> </div> <div class="tab-1 resp-tab-content"> <div class="tab_img"> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g3.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g3.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g1.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g1.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g9.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g9.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="clearfix"> </div> </div> </div> <div class="tab-1 resp-tab-content"> <div class="tab_img"> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g2.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g2.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g4.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g4.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g8.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g8.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="clearfix"> </div> </div> </div> <div class="tab-1 resp-tab-content"> <div class="tab_img"> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g10.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g10.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g11.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g11.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="col-md-4 portfolio-grids"> <div class="grid"> <a href="images/g12.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non"> <img src="images/g12.jpg" alt="" class="img-responsive" /> <div class="figcaption"> <h3>My<span> Project</span></h3> <p>莎拉喜歡看云。她很沮喪。</p> </div> </a> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div> </div> <!--ResponsiveTabs--> <script src="js/easyResponsiveTabs.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#horizontalTab').easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true // 100% fit in a container }); }); </script> <!--//ResponsiveTabs--> <!-- swipe box js --> <script src="js/jquery.swipebox.min.js"></script> <script type="text/javascript"> jQuery(function($) { $(".swipebox").swipebox(); }); </script> <!-- //swipe box js --> </div> </div> <!--//portfolio--> <!--contact --> <div class="welcome contact" id="contact"> <div class="container"> <h3 class="title">聯系我們</h3> <div class="contact-row"> <div class="col-md-6 contact-left"> <iframe src="http://map.baidu.com/#panoid=09002200011706171137054909Z&panotype=street&heading=0&pitch=0&l=19&tn=B_NORMAL_MAP&sc=0&newmap=1&shareurl=1&pid=09002200011706171137054909Z"></iframe> </div> <div class="col-md-6 contact-right"> <div class="address-left"> <p>杭州朝陽區(qū)趙九路風景線,中國 </p> </div> <div class="address-right"> <p>電話 : 1500008888</p> <p>E-mail : <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=OwoLDg0MAwgIDgJ7SkoVWFRW" target="_blank">fm185@sina.com</a></p> </div> <div class="clearfix"></div> <div class="contact-form"> <form action="#" method="post"> <input type="text" name="Name" placeholder="Name" required=""> <input class="email" name="Email" type="text" placeholder="Email" required=""> <input class="phone" name="phone" type="text" placeholder="Phone" required=""> <textarea name="Message" placeholder="Message" required=""></textarea> <input type="submit" value="提交" > </form> </div> </div> <div class="clearfix"></div> </div> </div> </div> <!--//contact --> <!--footer--> <div class="footer"> <div class="container"> <p>?2018我的簡歷。所有權利保留|設計的 更多模板：<a href="http://www.mycodes.net/" target="_blank">源碼之家</a></p> </div> </div> <!--//footer--> <!--smooth-scrolling-of-move-up--> <script type="text/javascript"> $(document).ready(function() { var defaults = { containerID: 'toTop', // fading element id containerHoverID: 'toTopHover', // fading element hover id scrollSpeed: 1200, easingType: 'linear' }; $().UItoTop({ easingType: 'easeOutQuart' }); }); </script> <!--//smooth-scrolling-of-move-up--> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/bootstrap.js"></script></body></html>body{ margin:0; font-family: 'Roboto Condensed', sans-serif; background: #fff;}body a{ transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; -ms-transition: 0.5s all; text-decoration:none;}h1,h2,h3,h4,h5,h6{ margin:0; font-family: 'Overlock', cursive;}p{ margin:0;}ul,label{ margin:0; padding:0;}body a:hover{ text-decoration:none;}/*--baner--*/.banner { background:url(../images/a.jpg)no-repeat center 0px; -webkit-background-size:cover; background-size:cover; -moz-background-size:cover; position: relative;}.banner-info{ background: url(../images/dott.png)repeat 0px 0px; padding: 4em 0;}.header-left img { width: 100%; border: 5px solid rgba(255, 255, 255, 0.68);}.header-right { padding-left: 3em;}.header-right h1 { font-size: 2.5em; color: #fff; margin: 0.5em 0 0;}.header-right h2 { font-size: 1.2em; color: #000; background: #F3E000; display: inline-block; padding: .5em 1.5em; position: relative;}.header-right h2:before { width: 0; height: 0; position: absolute; content: ''; bottom: -9px; left: 12px; border-style: solid; border-width: 10px 10px 0 10px; border-color: #F3E000 transparent transparent transparent;}請 “ 點贊” “??評論” “ 收藏”一鍵三連哦！ 【 關注我| 獲取更多源碼 | 優(yōu)質文章】帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！關鍵詞：作業(yè),響應,簡歷,模板,設計,學生,新生
