文章目录
- 文件结构
- 下载 [https://api.hongbin.xyz:3002/downloadSource/code.zip](https://api.hongbin.xyz:3002/downloadSource/code.zip)
- 代码
文件结构
下载 https://api.hongbin.xyz:3002/downloadSource/code.zip
代码
jianjie.css
body {
min-height: 140vh;
}
header {
background: var(--primary);
height: 12vh;
width: 100%;
letter-spacing: 5px;
}
header img {
width: 7vh;
height: 7vh;
}
nav {
background: var(--second);
width: 100%;
height: 4vh;
}
nav > a {
margin-left: 2vw;
color: var(--light-color);
font-weight: bold;
}
nav > a[data-current] {
font-size: 1.1em;
}
main {
flex-wrap: wrap;
width: 96vw;
min-height: 80vh;
position: relative;
background: url(../images/bg.svg);
background-size: cover;
border-radius: 1vw;
box-shadow: 1vw 1vw 2vw 0.3vw #ccc, -1vw -1vw 2vw 0.3vw #ccc;
}
main > .bg {
position: absolute;
z-index: -1;
width: 100%;
}
main > aside {
width: 20vw;
height: 20vw;
min-width: 200px;
min-height: 200px;
background: url(../images/headPortairGg.svg);
}
main > aside > img {
width: 10vw;
height: 10vw;
min-width: 100px;
min-height: 100px;
}
main section {
min-width: 200px;
color: #fff;
margin: 2vw;
}
main section li {
margin-top: 1vw;
}
main section li span {
display: inline-block;
width: 5em;
}
footer {
flex: 1;
margin: 1vw;
background: #000;
box-shadow: -1vw -1vw 10vw 0.3vw #444;
border-radius: 1vw;
letter-spacing: 1vw;
font-size: 10vw;
}index.css
div,
p,
body,
span,
a,
li,
ul,
ol,
nav,
header,
section,
article,
aside,
main,
footer,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
:root {
--primary: #51f;
--second: rgb(139, 96, 248);
--shadow-ms: 2px 1px 10px 3px rgb(85, 83, 83);
--radius-ms: 7px;
--radius-sm: 12px;
--dark-color: #000;
--light-color: #fff;
}
.centerItems {
display: flex;
justify-content: center;
align-items: center;
}
.columnItems {
display: flex;
flex-direction: column;
}
.radiusBox {
border-radius: var(--radius-ms, 10px);
box-shadow: var(--shadow-ms);
}
.lightColor {
color: var(--light-color);
}
.darkColor {
color: var(--dark-color);
}
.m-1 {
margin: 1vw;
}
.m-2 {
margin: 2vw;
}
.m-l-1 {
margin-left: 1vw;
}
.m-t-1 {
margin-top: 1vw;
}
.m-r-1 {
margin-right: 1vw;
}
.m-b-1 {
margin-bottom: 1vw;
}
.m-l-2 {
margin-left: 2vw;
}
.m-t-2 {
margin-top: 2vw;
}
.m-r-2 {
margin-right: 2vw;
}
.m-b-2 {
margin-bottom: 2vw;
}
.m0 {
margin: 0;
}
.p-1 {
margin: 1vw;
}
.p-2 {
margin: 2vw;
}
.p-l-1 {
margin-left: 1vw;
}
.p-t-1 {
margin-top: 1vw;
}
.p-r-1 {
margin-right: 1vw;
}
.p-b-1 {
margin-bottom: 1vw;
}
.p-l-2 {
margin-left: 2vw;
}
.p-t-2 {
margin-top: 2vw;
}
.p-r-2 {
margin-right: 2vw;
}
.p-b-2 {
margin-bottom: 2vw;
}
.p0 {
margin: 0;
}
::-webkit-scrollbar {
width: 0.2vw;
height: 4px;
background-color: rgb(114, 61, 248);
}
::-webkit-scrollbar-thumb {
background: rgb(79, 23, 219);
border-radius: 4px;
}jianjie.html
<!DOCTYPE html>
<html lang="zh-cn">
<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>宏斌的个人简介</title>
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/jianjie.css">
</head>
<body class="columnItems">
<header class="centerItems columnItems">
<article class="centerItems">
<img src="../images/健身.svg" alt="logo">
<h1 class="lightColor m-l-1">WELCOME</h1>
</article>
<h4 class="lightColor">遗 珠 弃 璧 , 吉 光 片 裘</h4>
</header>
<nav class="centerItems ">
<a data-current href="#">简介</a>
<a href="#">追番</a>
<a href="#">更多</a>
</nav>
<main class="m-2 centerItems">
<aside class="radiusBox centerItems">
<img src="../images//avatar.svg" alt="avatar">
</aside>
<section>
<h1>
基本信息
</h1>
<ul>
<li> <span>姓名</span> 刘宏斌</li>
<li> <span>出生年月</span> 2000-08-20</li>
<li> <span>地区</span> 中国
标签：web,课堂作业,--,个人简介,width,2vw,1vw,margin,color
From： https://blog.51cto.com/u_15964288/6318785