个人介绍网页效果
代码
注：图片大家可以选择自己喜欢的，不在另外附加喽
<!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(photo.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="QQ图片20200914221312.jpg" alt="" class="box-img">
<h1 class="name">Chris</h1>
<h2>Web Designer</h2>
<h3>Welcome to my personal website!</h3>
<h3>If you want to know more about me,please click this</h3>
<a href="Chris2.html" class="one">Chris</a>
</div>
</body>
</html>
如果想了解更多的话可以看—>简单的个人介绍网页-主页面【附代码】
简单的个人介绍网页-开场特效（HTML+CSS）【附代码】
简单的个人介绍网页-开场特效2（HTML+CSS）【附代码】
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/199720.html
