<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Resume</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 自定义样式 -->
<style>
.navbar {
background-color: #2196F3;
border-color: #1976D2;
}
.navbar-brand {
color: #ffffff;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #FFFFFF;
}
.navbar-nav > li > a {
color: #FFFFFF;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #FFFFFF;
background-color: #1976D2;
}
.project-img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.project-name {
text-align: center;
font-size: 24px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 左侧“我的个人简历” -->
<div class="navbar-header">
<a class="navbar-brand" href="#">我的个人简历</a>
</div>
<!-- 右侧按钮 -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">关于我</a></li>
<li><a href="#">联系我</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">我的项目 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">淘宝</a></li>
<li><a href="#">京东</a></li>
<li><a href="#">拼多多</a></li>
<li><a href="#">京东</a></li>
</ul>
</li>
<li><a href="#">教育背景</a></li>
</ul>
</div>
</div>
</nav>
<!-- 页面主体 -->
<div class="container">
<h1>我是来自于<b>湖南铁路科技职业技术学院</b></h1>
<p>熟练掌握<b style="color: red;">HTML5,BOOTSTRAP,JQUERY</b></p>
<p>爱好程序设计，喜欢开发自己的小型<b style="text-decoration: underline;">产品</b></p>
<p>有良好的编程习惯，以及程序错误控制和解决能力</p>
</div>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 左侧“我的项目” -->
<div class="navbar-header">
<a class="navbar-brand" href="#">我的项目</a>
</div>
</div>
</nav>
<!-- 页面主体 -->
<div class="container">
<!-- 图片和名称 -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="img/淘宝.jpg" alt="Project 1" class="project-img">
<div class="project-name">淘宝</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="img/京东.jpg" alt="Project 2" class="project-img">
<div class="project-name">京东</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="img/拼多多.jpg" alt="Project 3" class="project-img">
<div class="project-name">拼多多</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<img src="./img/当当.jpg" alt="Project 4" class="project-img">
<div class="project-name">当当</div>
</div>
</div>
</div>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 左侧“联系我” -->
<div class="navbar-header">
<a class="navbar-brand" href="#">联系我</a>
</div>
<!-- 右侧 -->
<ul class="nav navbar-nav navbar-right">
<!-- 时间 -->
<li>
<a href="#">时间</a>
</li>
<!-- 学校 -->
<li>
<a href="#">学校</a>
</li>
<!-- 学历 -->
<li>
<a href="#">学历</a>
</li>
</ul>
</div>
</nav>
<!-- 页面主体 -->
<div class="container-fluid">
<div class="row">
<!-- 左侧容器 -->
<div class="col-sm-6 left-container">
<!-- 联系信息 -->
<div class="contact-info">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="email">电子邮箱</label>
<input type="email" class="form-control" id="email" placeholder="请输入电子邮箱">
</div>
<div class="form-group">
<label for="location">企业地点</label>
<select class="form-control" id="location">
<option>请选择</option>
<option>北京市</option>
<option>上海市</option>
<option>广州市</option>
<option>深圳市</option>
</select>
</div>
<!-- 底部按钮 -->
<div style="display:flex; justify-content: space-between;">
<button class="btn btn-primary" id="sendBtn">发送</button>
<button class="btn btn-danger" id="clearBtn">清空</button>
</div>
</div>
<!-- 底部空白 -->
<div style="flex: 1;"></div>
</div>
<!-- 右侧容器 -->
<div class="col-sm-6 right-container">
<table class="table table-bordered">
<thead>
<tr>
<th>时间</th>
<th>学校</th>
<th>学历</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-2023</td>
<td>清华大学</td>
<td>硕士</td>
</tr>
<tr>
<td>2018-2021</td>
<td>北京大学</td>
<td>本科</td>
</tr>
<tr>
<td>2015-2018</td>
<td>南京大学</td>
<td>本科</td>
</tr>
<tr>
<td>2009-2015</td>
<td>南京市第一中学</td>
<td>高中</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
// 点击清空按钮
$("#clearBtn").click(function() {
$("#name").val(""); // 清空姓名输入框
$("#email").val(""); // 清空电子邮箱输入框
$("#location").val("请选择"); // 重置企业地点下拉框
});
// 点击发送按钮
$("#sendBtn").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var location = $("#location").val();
if (name === "" || email === "" || location === "请选择") {
alert("请填写完整的联系信息！");
} else {
alert("发送成功！");
}
});
</script>
</body>
</html>
缺陷报告文档+Excel文件
需积分: 4 185 浏览量
2022-11-04
08:32:41
上传
评论
收藏 1010KB RAR 举报
bootsrap测试卷杨睿.rar （26个子文件） 
bootsrap测试卷 js 
bootstrap.js 134KB bootstrap.bundle.js.map 393KB bootstrap.bundle.min.js.map 304KB bootstrap.min.js 61KB bootstrap.bundle.min.js 81KB bootstrap.bundle.js 225KB bootstrap.js.map 242KB jquery-3.4.1.min.js 86KB bootstrap.min.js.map 183KB img 
淘宝.jpg 103KB 当当.jpg 112KB 京东.jpg 126KB 拼多多.jpg 87KB css bootstrap-grid.css.map 160KB bootstrap.min.css 158KB bootstrap-grid.css 66KB bootstrap-grid.min.css.map 112KB bootstrap-reboot.min.css.map 32KB bootstrap.css.map 503KB bootstrap.css 195KB bootstrap-reboot.css 5KB bootstrap-reboot.css.map 76KB bootstrap-grid.min.css 49KB bootstrap.min.css.map 638KB bootstrap-reboot.min.css 4KB
index.html 7KB资源评论
