个人介绍网页效果
代码实现
图片可以放在本地，也可以使用托管网站，这里我是用的托管网站。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chris</title>
<style>
body {
margin: 0;
padding: 0;
background: url(https://cdn2.pandaimg.com/2022/09/23/632dc1d7b9d92.jpg) no-repeat;
background-size: cover;
}
.box {
color: rgb(6, 173, 151);
width: 450px;
background: rgba(0, 0, 0, 0.4);
padding: 40px;
text-align: center;
margin: auto;
margin-top: 5%;
font-family: 'Century Gothic', sans-serif;
}
.box .box-img {
width: 200px;
height: 200px;
border-radius: 50%;
}
.box h1 {
font-size: 50px;
letter-spacing: 4px;
font-weight: 400;
}
.box h2 {
font-size: 30px;
letter-spacing: 3px;
font-weight: 300;
}
.one {
text-decoration: none;
font-size: 20px;
font-weight: 600;
color: grey;
}
.one:hover {
color: rgb(6, 173, 151);
}
</style>
</head>
<body>
<div class="box">
<img src="https://cdn2.pandaimg.com/2022/09/23/632dc1d42677a.png" alt="" class="box-img">
<h1 class="name">welt</h1>
<h2><b>02年 天秤座 男</b></h2>
<h3>喜欢编程和打游戏</h3>
<h3>曾经玩无人机,现在正在攒钱买DJI Avata</h3>
<h3>就不展示自己的照片了,展示一个我喜欢看的动漫里面我喜欢的组织</h3>
<h3><font color=Gray>最喜欢的歌:Viva La Vida!</font></h3>
<a href="https://www.cnblogs.com/tangjielin/" class="one">我的博客: welt(可以点)</a>
</div>
</body>
</html>