HTML5+CSS大作业——程序员个人简历设计(5页)
常见网页设计作业题材有
个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
文章目录
- HTML5+CSS大作业——程序员个人简历设计(5页)
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
- 五、学习资料
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!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">
<!-- 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/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn/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/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 性别：男</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</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</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 © 2016 作者：Baron. 前端工程师
<script src="http://s11zz/z_stat.php?id=1257641755&web_id=1257641755" language="JavaScript"></script>
<a style='color:#F4D03F' href="http://blog.youzewang/" target="_blank" title="前端博客">个人博客</a> </p>
</div>
<div class="pull-right fnav">
<ul class="footer-social">
<li><a href="http://v.t.sina/share/share.php?url=http://blog.youzewang/jianli&title=Baron简历"><i class="icon iconfont"></i></a></li>
<li><a href="http://connect.qq/widget/shareqq/index.html?url=http://blog.youzewang/jianli=&title=Baron简历"> <i class="icon iconfont"></i></a></li>
<li><a href="http://sns.qzone.qq/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://blog.youzewang/jianli&title=Baron简历"> <i class="icon iconfont"></i></a></li>
<li><a href="http://share.renren/share/buttonshare.do?link=http://blog.youzewang/jianli&title=Baron简历"><i class="icon iconfont"></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>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
更多推荐
html简单个人网页制作 HTML5+CSS大作业——程序员个人简历设计(5页)
发布评论