时间：2023-09-29 11:42:01 | 来源：网站运营
时间：2023-09-29 11:42:01 来源：网站运营
大一新生HTML期末作业 学生个人网页设计作业 HTML5响应式个人简历网站模板 web前端网页制作课作业：精彩专栏推荐 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 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代码）。<!--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>杭州朝阳区赵九路风景线,中国 </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;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：作业,响应,简历,模板,设计,学生,新生
