简历首页的制作
本次的代码如下：
shouye.html
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="简历制作神器：在线简历制作平台，免登录直接可用，可导出简历pdf">
<meta name="keywords" content="简历制作,写简历,做简历,个人简历,在线制作简历,简历模板,简历制作神器">
<link rel="stylesheet" href="./css/bootstrap.min.css"/>
<link rel="stylesheet" href="./css/reset.css"/>
<script type="application/javascript" src="./js/bootstrap.bundle.min.js"></script>
<!--通用js-->
<script type="application/javascript">
</script>
<link rel="stylesheet" href="./css/home.css">
<title>智能简历系统</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="/">花园简历</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">花园简历</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="zhuce.jsp">制作简历</a>
</li>
<li class="nav-item">
<a class="nav-link" href="zjr.jsp">简历分析</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<section class="big">
<h2 class="text-center">年轻人都在用的简历制作平台</h2>
<br>
<h6 class="text-center">
<strong class="strong1">在线制作</strong>
<span>·</span>
<strong class="strong2">无需登录</strong>
<span>·</span>
<strong class="strong3">一键导出</strong>
</h6>
<a class="go" href="zhuce.jsp">开始制作</a>
<a class="go" href="zjr.jsp">分析简历</a>
<div class="subTitle text-center">
永远不收集任何用户信息！请放心使用！
</div>
<div class="row menu d-xxl-flex d-xl-flex d-lg-flex d-md-none d-sm-none d-none">
<div class="col-lg-3">
<p>简单易用</p>
<p>输入内容，自动生成简历</p>
</div>
<div class="col-lg-3">
<p>定制颜色</p>
<p>自定义简历肤色</p>
</div>
<div class="col-lg-3">
<p>简历分析</p>
<p>大数据分析您的简历</p>
</div>
<div class="col-lg-3">
<p>精准预算</p>
<p>智能结果免费提供</p>
</div>
</div>
</section>
<script type="application/javascript">
function setFooterYear() {
var dom = document.getElementById('copyrightYear');
if (!dom) return;
dom.innerText = new Date().getFullYear();
}
window.addEventListener('load', setFooterYear);
</script>
</body>
</html>
reset.css
body {
background: #f4f5f6;
}
a {
text-decoration: none;
}
.navbar {
--bs-navbar-brand-margin-end: 2rem;
--bs-navbar-nav-link-padding-x: 1rem;
--bs-navbar-brand-font-size: 1.5rem;
background: white;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}
footer {
padding: 1rem 0;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
background: #39394d;
line-height: 2;
}
footer a {
color: rgba(255, 255, 255, 0.7);
}
footer a:hover {
color: #0078FF;
}
home.css
.big {
overflow: hidden;
background-image: linear-gradient(180deg, #2fa3f6, #0249a1);
color: white;
padding-top: 8rem;
padding-bottom: 8rem;
position: relative;
box-sizing: border-box;
letter-spacing: 0.1rem;
}
@keyframes shoot {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(6deg);
}
100% {
transform: rotate(0deg);
}
}
.big h6 {
color: rgba(255, 255, 255, 0.7);
}
.big strong {
display: inline-block;
transform-origin: right bottom;
}
.big .strong1 {
animation: shoot .4s ease-out 0s normal 1 forwards;
}
.big .strong2 {
animation: shoot .4s ease-out .1s normal 1 forwards;
}
.big .strong3 {
animation: shoot .4s ease-out .2s normal 1 forwards;
}
.go {
box-sizing: border-box;
margin: 1.5em auto 1.5em auto;
width: 9em;
height: 3em;
border-radius: 3em;
display: block;
line-height: 3em;
font-size: 1.5em;
text-align: center;
background-color: #0078FF;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all ease-out .2s;
color: white;
text-decoration: none;
}
.go:hover {
color: white;
border-radius: 0.8em;
}
.go:visited, .go:active {
color: white;
}
.subTitle {
color: rgba(255, 255, 255, 0.7);
}
.big .menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.2);
height: 6em;
left: 0;
right: 0;
bottom: 0;
}
.big .menu > div {
display: flex;
flex-direction: column;
justify-content: center;
}
.big .menu > div > p {
margin: 0;
text-align: center;
color: white;
opacity: 0.9;
}
.big .menu > div > p:nth-last-child(1) {
margin-top: 0.5em;
opacity: 0.7;
font-size: 0.8rem ;
}
bootstrap.bundle.min.js和bootstrap.min.css两个文件的代码太多，不再展示。
标签：简历,background,color,big,冲刺,第六天,rgba,团队,255 From： https://www.cnblogs.com/5418baga/p/17437964.html