bootstrap实现—个⼈简介实现：bootstrap
效果图：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个⼈简介</title>
<title>个⼈简介</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="/jquery/3.2.1/jquery.min.js"></script>
<script src="/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
#bg {
background-image: url("images/head.jpg");
background-size: cover;
}
#end {
font-size: 18px;
text-align: center;
background-color: darkgray;
}
</style>
</head>
<body>
<div id="bg" class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Hello！欢迎进⼊⽆敌敏的个⼈信息界⾯</h1>
</div>
</div>
<div class="container">
<h2 class="text-primary">图⽚展⽰</h2>
<hr>
<div class="row">
<div class="col-md-4">
<img src="images/3.jpg" class="rounded img-fluid">
</div>
<div class="col-md-4">
<img src="images/5.jpg" class="rounded-circle img-fluid">
</div>
<div class="col-md-4">
<img src="images/4.jpg" class="rounded img-fluid">
</div>
</div>
</div>
<br><br>
<div class="container">
<h2 class="text-primary">基本信息</h2>
<hr>
<div class="col-md-9">
<ul class="list-group">
<li class="list-group-item">姓名：⽆敌敏</li>
<li class="list-group-item">星座：处⼥座</li>
<li class="list-group-item">爱好：追剧、跑步、看冷笑话</li>
<li class="list-group-item">专业：软件⼯程</li>
<li class="list-group-item">发展⽅向：Web APP⼯程师</li>
<li class="list-group-item">⼈⽣格⾔：其实我是⼀个天才，可惜天妒英才！</li>
</ul>
</div>
</div>
<br><br>
<div class="container">
<h2 class="text-primary">课程表</h2>
<hr>
<table class="table table-bordered">
<thead>
<tr>
<tr>
<th></th>
<th>周⼀</th>
<th>周⼆</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-2节</td>
<td>软件⼯程</td>
<td>没课</td>
<td>⾯向对象程序设计</td>
bootstrap项目<td>Web前端技术</td>
<td>计算机⽹络</td>
</tr>
<tr>
<td>3-4节</td>
<td>⾯向对象程序设计</td>
<td>UI设计综合实验</td>
<td>职场沟通</td>
<td>没课</td>
<td>计算机⽹络实验</td>
</tr>
<tr>
<td>5-6节</td>
<td>没课</td>
<td>MATLAB及应⽤</td>
<td>没课</td>
<td>没课</td>
<td>计算机⽹络实验</td>
</tr>
<tr>
<td>7-8节</td>
<td>没课</td>
<td>没课</td>
<td>软件⼯程实验</td>
<td>软件质量保证与测试</td>
<td>没课</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="container mt-3">
<h2 class="text-primary">学习园地</h2>
<hr>
<div class="row">
<div class="col-md-4">
<h4 class="text-secondary">
专业课程
</h4>
<ul class="list-group">
<li class="list-group-item">数据结构</li>
<li class="list-group-item">JAVA程序设计</li> <li class="list-group-item">Web技术</li>
<li class="list-group-item">数据库系统管理</li> <li class="list-group-item">软件⼯程</li>
</ul>
</div>
<div class="col-md-4">
<div class="col-md-4">
<h4 class="text-secondary">
喜欢阅读的书
</h4>
<ul class="list-group">
<li class="list-group-item">活着</li>
<li class="list-group-item">⽩夜⾏</li>
<li class="list-group-item">⼩王⼦</li>
<li class="list-group-item">⼈性的弱点</li>
<li class="list-group-item">偷影⼦的⼈</li>
</ul>
</div>
<div class="col-md-4">
<h4 class="text-secondary">
推荐的⽂章
</h4>
<ul class="list-group">
<li class="list-group-item"><a href="#">中国⼤学MOOC</a></li>
<li class="list-group-item"><a href="#">⽜客⽹</a></li>
<li class="list-group-item"><a href="#">58同城</a></li>
<li class="list-group-item"><a href="#">⼈民⽇报</a></li>
<li class="list-group-item"><a href="#">去哪⼉</a></li>
</ul>
</div>
</div>
</div>
<br /><br />
<div class="container mt-3">
<h2 class="text-primary">我的⼤学</h2>
<hr>
<div class="row">
<div class="col-md-9">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播（Carousel）指标 -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ul>
<!-- 轮播（Carousel）项⽬ -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images\校园3.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img src="images\校园2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img src="images\校园1.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img src="images\校园4.jpg" alt="forth slide">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="col-md-3">
<h2 class="text-secondary">
学校简介
</h2>
<p >
郑州升达经贸管理学院始建于1993年，前⾝是由豫籍台湾教育家王⼴亚博⼠为董事长的台北⼴兴⽂教基⾦会与郑州⼤学合作兴办的郑州⼤学升达经贸管理 </p>
</div>
</div>
</div>
<br>
<footer id="end" class="mt-3 p-3">
<p class="text-white">联系我QQ12345678 <a href="interface.html">返回⾸页</a></p>
</footer>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论