web应用开发 -- 课堂作业个人简介-CFANZ编程社区

文章目录

文件结构
下载 [https://api.hongbin.xyz:3002/downloadSource/code.zip](https://api.hongbin.xyz:3002/downloadSource/code.zip)
代码

web应用开发 -- 课堂作业个人简介_前端

web应用开发 -- 课堂作业个人简介_ide_02

web应用开发 -- 课堂作业个人简介_ide_03

文件结构

web应用开发 -- 课堂作业个人简介_html_04

下载 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> 中国🇨🇳</li>
                <li> <span>爱好</span>追番 原神 运动</li>
            </ul>
        </section>
        <section>
            <h1>
                学习经历
            </h1>
            <ul>
                <li><span>2012</span> 蓝旗中学</li>
                <li><span>2015</span> 凤城二中</li>
                <li><span>2020</span> 辽宁金融</li>
                <li><span>2021</span> 辽东学院</li>
            </ul>
        </section>
        <section>
            <h1>
                人生经历
            </h1>
            <ul>
                <li><span>2000</span> 出生</li>
                <li><span>2021</span> 开始玩原神</li>
                <li><span>～</span> 一直玩原神</li>
            </ul>
        </section>
    </main>
    <footer class="lightColor centerItems">
        <h1>END</h1>
    </footer>
</body>

</html>

default.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">
    <meta http-equiv="refresh" content="0; url=html/jianjie.html">
    <title>Document</title>
</head>

<body>

</body>

</html>