編碼的世界 / 優質文選 / 生涯

HTML5+CSS大作業——程序員個人簡歷設計(5頁)

2022年5月09日
-   

HTML5+CSS大作業——程序員個人簡歷設計(5頁)
常見網頁設計作業題材有 個人、 美食、 公司、 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 軍事、 遊戲、 節日、 戒煙、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他 等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!
獲取更多源碼
🧡作者主頁-更多源碼🧡HTML期末大作業文章專欄 文章目錄

一、作品展示

二、文件目錄

三、代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>前端工程師簡歷</title>
 <meta name="description" content="本人英文名Baron，是一名前端工程師,對前端和編程技術非常熱愛，做過很多技術方面的東西，對我有意向的公司和獵頭可以QQ聯系我或者給我發郵件，謝謝！">
 <meta name="keywords" content="Baron簡歷，前端工程師，求職前端，前端博客" />
 <meta name="author" content="Baron，個人博客:http://blog.youzewang.com">
 <! Favicons
 ================================================== >
 <link rel="shortcut icon" href="img/favicon_jianli.ico" type="image/x-icon">
 <! Bootstrap >
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
 <! Slider
 ================================================== >
 <link href="css/owl.carousel.css" rel="stylesheet" media="screen">
 <link href="css/owl.theme.css" rel="stylesheet" media="screen">
 <! Stylesheet
 ================================================== >
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
 <link rel="stylesheet" type="text/css" href="fonts/sns_fonts/iconfont.css">
 <! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries >
 <! WARNING: Respond.js doesn't work if you view the page via file:// >
 <![if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
 <! Navigation >
 <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
 <i class="fa fa-bars"></i>
 </button>
 <a class="navbar-brand page-scroll" href="#page-top"><i class="fa fa-terminal"></i>前端工程師</a>
 </div>
 <! Collect the nav links, forms, and other content for toggling >
 <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
 <ul class="nav navbar-nav">
 <! Hidden li included to remove active class from about link when scrolled up past about section >
 <li class="hidden">
 <a href="#page-top"></a>
 </li>
 <li>
 <a class="page-scroll" href="#services">基本資料</a>
 </li>
 <li>
 <a class="page-scroll" href="#works">項目經驗</a>
 </li>
 <li>
 <a class="page-scroll" href="#about">專業技能</a>
 </li>
 <li>
 <a class="page-scroll" href="#team">工作經歷</a>
 </li>
 <li>
 <a class="page-scroll" href="#testimonials">自我評價</a>
 </li>
 <li>
 <a class="page-scroll" href="#contact">聯系方式</a>
 </li>
 </ul>
 </div>
 <! /.navbar-collapse >
 </div>
 <! /.container >
 </nav>
 <! Header >
 <header class="intro">
 <div class="intro-body">
 <div class="container">
 <div class="row">
 <div class="col-md-8 col-md-offset-2">
 <h1>簡歷<span class="brand-heading">-前端工程師</span></h1>
 <p class="intro-text">喜歡技術，熱愛挑戰</p>
 <a href="#services" class="btn btn-circle page-scroll">
 <i class="fa fa-angle-double-down animated"></i>
 </a>
 </div>
 </div>
 </div>
 </div>
 </header>
 <div class="copyrights">Baron簡歷 <a href="http://blog.youzewang.com/jianli">前端工程師</a></div>
 <! Services Section >
 <div id="services" class="text-center">
 <div class="container">
 <div class="section-title center">
 <h2>基本 <strong>資料</strong></h2>
 <hr>
 </div>
 <div class="space"></div>
 <div class="row">
 <div class="col-md-3 col-sm-6 service"> <i class="fa fa-laptop"></i>
 <h4><strong>個人信息</strong></h4>
 <p>
 英文名: Baron &nbsp;性別：男</br>
 年齡: 25歲 籍貫：湖南
 </p>
 </div>
 <div class="col-md-3 col-sm-6 service"> <i class="fa fa-code"></i>
 <h4><strong>專業學歷</strong></h4>
 <p>
 專業：電子信息工程</br>
 學歷：大學本科</br>
 </p>
 </div>
 <div class="col-md-3 col-sm-6 service"> <i class="fa fa-rocket"></i>
 <h4><strong>畢業學校</strong></h4>
 <p>
 畢業學校：浙江理工大學</br>
 學習技能：編程
 </p>
 </div>
 <div class="col-md-3 col-sm-6 service"> <i class="fa fa-bullseye"></i>
 <h4><strong>聯系方式</strong></h4>
 <p>QQ：2194737655</br>
 郵箱：2194737655@qq.com</p>
 </div>
 </div>
 </div>
 </div>
 <! Portfolio Section >
 <div id="works">
 <div class="container">
 <! Container >
 <div class="section-title text-center center">
 <h2>項目 <strong>經驗</strong></h2>
 <hr>
 <div class="clearfix"></div>
 <p>主要涉及電商，金融，家裝領域，包括PC端，手機端，微信端，移動APP端等等，主要技術是HTML+CSS+JS</p>
 </div>
 <div class="categories">
 <ul class="cat">
 <li>
 <ol class="type">
 <li><a href="#" data-filter="*" class="active">所有</a></li>
 <li><a href="#" data-filter=".web">PC端</a></li>
 <li><a href="#" data-filter=".app">移動端</a></li>
 <li><a href="#" data-filter=".branding">響應式</a></li>
 </ol>
 </li>
 </ul>
 <div class="clearfix"></div>
 </div>
 <div class="row">
 <div class="portfolio-items">
 <div class="col-sm-6 col-md-3 col-lg-3 web">
 <div class="portfo<i class="fa fa-map-marker fa-2x"></i>
 <p>上海市閔行區申濱路1058弄57號</p>
 </div>
 <div class="col-md-4"> <i class="fa fa-envelope-o fa-2x"></i>
 <p>2194737655@qq.com</p>
 </div>
 <div class="col-md-4"> <i class="fa fa-phone fa-2x"></i>
 <p>QQ:2194737655</p>
 </div>
 <hr>





 <div class="clearfix"></div>
 </div>
 <div class="col-md-8 col-md-offset-2">
 <hr>
 <h3>給我發郵件</h3>
 <form name="sentMessage" id="contactForm" novalidate>
 <div class="row">
 <div class="col-md-6">
 <div class="form-group">
 <input type="text" id="name" class="form-control" placeholder="姓名" required="required">
 <p class="help-block text-danger"></p>
 </div>
 </div>
 <div class="col-md-6">
 <div class="form-group">
 <input type="email" id="email" class="form-control" placeholder="郵箱" required="required">
 <p class="help-block text-danger"></p>
 </div>
 </div>
 </div>
 <div class="form-group">
 <textarea name="message" id="message" class="form-control" rows="4" placeholder="內容" required></textarea>
 <p class="help-block text-danger"></p>
 </div>
 <div id="success"></div>
 <button type="submit" class="btn btn-default">確認發送</button>
 </form>
 </div>
 </div>
 </div>
 </div>
 <nav id="footer">
 <div class="container">
 <div class="pull-left fnav">
 <p>Copyright &copy; 2016 作者：Baron. 前端工程師
 <script src="http://s11.cnzz.com/z_stat.php?id=1257641755&web_id=1257641755" language="JavaScript"></script>
 <a style='color:#F4D03F' href="http://blog.youzewang.com/" target="_blank" title="前端博客">個人博客</a> </p>
 </div>
 <div class="pull-right fnav">
 <ul class="footer-social">
 <li><a href="http://v.t.sina.com.cn/share/share.php?url=http://blog.youzewang.com/jianli&title=Baron簡歷"><i class="icon iconfont">&#xe66e;</i></a></li>
 <li><a href="http://connect.qq.com/widget/shareqq/index.html?url=http://blog.youzewang.com/jianli=&title=Baron簡歷"> <i class="icon iconfont">&#xe629;</i></a></li>
 <li><a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://blog.youzewang.com/jianli&title=Baron簡歷"> <i class="icon iconfont">&#xe616;</i></a></li>
 <li><a href="http://share.renren.com/share/buttonshare.do?link=http://blog.youzewang.com/jianli&title=Baron簡歷"><i class="icon iconfont">&#xe66b;</i></a></li>
 </ul>
 </div>
 </div>
 </nav>
 <! jQuery (necessary for Bootstrap's JavaScript plugins) >
 <script type="text/javascript" src="js/jquery.1.11.1.js"></script>
 <! Include all compiled plugins (below), or include individual files as needed >
 <script type="text/javascript" src="js/bootstrap.js"></script>
 <script type="text/javascript" src="js/SmoothScroll.js"></script>
 <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
 <script type="text/javascript" src="js/jquery.isotope.js"></script>
 <script type="text/javascript" src="js/jquery.counterup.js"></script>
 <script type="text/javascript" src="js/waypoints.js"></script>
 <script type="text/javascript" src="js/jqBootstrapValidation.js"></script>
 <script type="text/javascript" src="js/contact_me.js"></script>
 <script src="js/owl.carousel.js"></script>
 <! Javascripts
 ================================================== >
 <script type="text/javascript" src="js/main.js"></script>
 <script>
 $(function() {
 var u = navigator.userAgent;
 if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf('iPhone') > -1 || u.indexOf('Windows Phone') > -1 || navigator.userAgent.indexOf("iPad") > -1) {
 $(".hover-bg .hover-text").css({
 'opacity': '1'
 });
 $(".hover-bg .hover-text>h4").css({
 'opacity': '1',
 '-webkit-transform': 'translateY(0)',
 'transform': 'translateY(0)'
 });
 $(".hover-bg .hover-text>i").css({
 'opacity': '1'
 });
 }
 });
 </script>
</body>
</html>

五、學習資料
web前端 零基礎-入門到高級 (視頻+源碼+開發軟件+學習資料+面試題) 一整套 (教程) 適合入門到高級的童鞋們入手~送1000套HTML+CSS+JavaScript模板網站
HTML5期末考核大作業源碼* 包含 個人、 美食、 公司、 學校、 旅遊、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 體育、 化妝品、 物流、 環保、 書籍、 婚紗、 軍事、 遊戲、 節日、 戒煙、 電影、 攝影、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他 可滿足大學生網頁大作業網頁設計需求, 喜歡的可以下載!

熱門文章