<!--
* @Descripttion: 个人网页模板
* @version: 1.00
* @Author: wenlong
* @LastEditors: 文龙
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XXX</title>
<!-- <link rel="stylesheet" href="./common.css" />
<link rel="stylesheet" href="./style.css" /> -->
<style>
:root {
--primary: #abc4ff;
--secondary: #4ecdc4;
--red: #c44536;
--pink: #ff8fab;
--text-large: 1.8rem;
--text-small: 1.2rem;
--text-middle: 1.5rem;
--dark: #192a51;
}
.text-large {
font-size: var(--text-large);
color: var(--dark);
}
.text-dark {
font-size: var(--text-middle);
color: var(--dark);
font-weight: bold;
}
.text-strong {
font-size: var(--text-small);
font-weight: bold;
animation: text-strong 0.2s forwards ease-in-out;
}
.text-strong::first-letter {
color: var(--dark);
font-size: var(--text-large);
}
.program-card,
.link-card {
padding: 0.5rem;
color: var(--dark);
border-left: 5px solid var(--dark);
margin: 0.5rem 0;
animation: card 0.5s forwards ease-in-out;
animation-delay: 0.2s;
opacity: 0;
}
.program-card span::before,
.link-card span::before {
content: "";
border-bottom: 2px solid;
transition: all 0.5s;
position: absolute;
bottom: -3px;
width: 0;
left: 0;
}
.program-card span,
.link-card span {
position: relative;
cursor: pointer;
padding-bottom: 0.1rem;
padding: 0 .5rem;
}
.program-card span:hover::before,
.link-card span:hover::before {
width: 100%;
color: var(--primary);
}
.link-card {
position: relative;
}
.link-card:after {
content: "链接";
font-size: 12px;
opacity: 0.2;
position: absolute;
left: 50%;
}
.link-card span::after {
content: attr(data-tip);
position: absolute;
top: -10px;
right: -2rem;
width: fit-content;
color: var(--secondary);
font-size: 12px;
}
.item .techn-list {
padding-bottom: 20px;
}
.wrap .item .techn-list span {
border: 1px solid var(--secondary);
border-radius: 5px;
padding: 2px 10px;
font-size: 0.8rem;
cursor: pointer;
}
@keyframes card {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
*:not(summary) {
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
list-style: none;
color: var(--dark);
}
*::selection {
color: var(--pink);
}
*::-webkit-scrollbar {
display: none;
}
.wrap a {
position: relative;
}
.wrap a::before {
content: "";
width: 5px;
height: 5px;
border-top: 2px solid var(--primary);
border-left: 2px solid var(--pink);
left: -10px;
position: absolute;
top: -2px;
}
.wrap a::after {
content: "";
width: 5px;
height: 5px;
border-bottom: 2px solid var(--dark);
border-right: 2px solid var(--secondary);
right: -10px;
position: absolute;
bottom: -2px;
}
a:hover {
color: var(--pink);
}
body,
html {
background-color: rgba(245, 245, 245, 0.151);
}
@keyframes text-strong {
0% {
transform: translateY(-200px);
}
100% {
transform: translateY(0);
color: var(--primary);
}
}
div.wrap {
padding: 50px 200px;
}
div.wrap .body {
columns: 2;
}
div.wrap .body .item {
page-break-inside: avoid;
page-break-before: avoid;
page-break-after: avoid;
}
div.wrap .body .item hr {
margin: 1rem 0;
width: clamp(10rem, 30%, 10vw);
}
div.wrap .intro {
padding: 1.5rem 1.5rem 0 1.5rem;
}
@media screen and (max-width: 720px) {
div.wrap {
padding: 5px 20px;
}
div.wrap .body {
columns: 1;
}
}
</style>
</head>
<body>
<div class="wrap">
<nav class="text-large ">在线XX</nav>
<br />
<div class="body">
<div class="item">
<div>
<div class="text-strong">名字</div>
<hr />
<ul>
<li class="program-card"><span>xxxxxx专业</span></li>
<li class="program-card"><span>xxxxxx666</span></li>
<li class="program-card"><span>xxxxxxxxxx@qq.com</span></li>
</ul>
</div>
<br />
<div>
<div class="text-strong">工作经验</div>
<hr />
<ul>
<li class="program-card">
<details open>
<summary>xxxxxxxxxx集团</summary>
<div class="intro">时间:[2020.9-至今]</div>
<div class="intro">职责:xxxxxxxxxx</div>
</details>
</li>
<li class="program-card">
<details>
<summary>xxxxx公司</summary>
<div class="intro">时间:[2019.10-2020.8]</div>
<div class="intro">职责:xxxxxxxxxx</div>
</details>
</li>
</ul>
</div>
</div>
<div class="item">
<div>
<div class="text-strong">技术栈</div>
<hr />
<div class="techn-list">
<span>js</span>
<span>css</span>
<span>vue</span>
</div>
</div>
</div>
<div class="item">
<div>
<div class="text-strong">个人项目</div>
<hr />
<ul>
<li class="link-card"><span data-tip="个人">xxxxx网址</span></li>
<li class="link-card"><span data-tip="个人">xxxxx网址</span></li>
<li class="link-card"><span data-tip="个人">xxxxx网址</span></li>
</ul>
</div>
</div>
<div class="item">
<div>
<div class="text-strong">在线项目</div>
<hr />
<ul>
<li class="link-card"><span data-tip="企业">xxxxx网址</span></li>
<li class="link-card"><span data-tip="企业">xxxxx网址</span></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>原文：https://www.cnblogs.com/venlong/p/15145427.html