效果图
源码
<!DOCTYPE html>
<html lang="en">
<head>
<title>王宇东的个人简历</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
<script src="./wmbq.js" type="text/javascript" charset="utf-8"></script>
<style>
#wmbq{
position:relative;height:190px;margin:10px auto 10px;}
#wmbq a{
position:absolute;color:#FFFFFF;text-decoration: none;text-align:center;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;padding:3px 5px;border:0;transition:none;}
#wmbq a:hover{
background: none; display:block;}
#wmbq a:nth-child(n){
display:inline-block;line-height:18px;text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red;}
#wmbq a:nth-child(2n){
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177;}
#wmbq a:nth-child(3n){
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF;}
#wmbq a:nth-child(4n){
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000;}
#wmbq a:nth-child(5n){
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc;}
#wmbq a:nth-child(6n){
text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de;}
</style>
<style>
body{
min-height: 100%; background: linear-gradient(#ffffff,#FFFAD0); }
.fakeimg {
height: 380px;
background: #aaa;
}
#grad1 {
height: 400px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(16,33,106,1));
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="jumbotron text-center" style="margin-bottom:0" id="grad1">
<br/>
<h1>王宇东 21岁</h1>
<h2>☾JavaWeb☆软件技术☆CSDN Lv4☽</h2>
<br/>
<p>软件设计有两种方式:一种方式是,使软件过于简单,明显没有缺陷;另一种方式是,使软件过于复杂,没有明显的缺陷。—C.A.R. Hoare</p>
<h3>想应聘的岗位:钱多就行</h3>
<br/>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3235483746,549061446&fm=26&gp=0.jpg" alt="logo" style="width:40px;">xyecy1314@qq.com</th>
<th><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=507605381,3084649466&fm=26&gp=0.jpg" alt="logo" style="width:40px;">156-1963-2607</th>
</tr>
</thead>
</table>
</div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">
<img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/edca5131cdf6336989582c5d44af5652_222_222.jpg" alt="logo" style="width:40px;">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">专业技能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">项目经验</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">自我展示</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
教育经历
</a>