介绍
一个非常简易的个人主页，也是入门的一个作品，由HTML+CSS编写
也没什么好介绍的尽可能地注释了
项目地址
代码部分
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--站点名-->
<title>站点名</title>
<style>
/*千万不要改这个，这个是间距*/
.left {
width: 50%
}
.right {
width: 50%
}
</style>
<link rel="stylesheet" id="style-css" href="./style.css" type="text/css" media="all">
<!--站点logo图片地址-->
<link rel="icon" type="image/ico" href="站点logo图片地址">
</head>
<body>
<div class="wrapper">
<!--左侧图片地址-->
<section class="left" style="background-image: url('左侧图片地址');">
</section>
<section class="right">
<div class="index_box">
<div class="index_txt">
<div class="wrap">
<!--头像图片地址-->
<img src="头像图片地址" alt="1">
</div>
<!--昵称-->
<h1>-昵称-</h1>
<!--介绍-->
<p class="saying">-介绍-</p>
<div >
<nav>
<ul>
<!--跳转地址/跳转名称-->
<li><a href="跳转地址" target="_blank">跳转名称</a></li>
<li><a href="跳转地址" target="_blank"></a>跳转名称</li>
<li><a href="跳转地址" target="_blank"></a>跳转名称</li>
</ul>
</nav>
<!--网易云音乐id后面是歌单号-->
<!--如：7819784653-->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=530 height=110 src="//music.163.com/outchain/player?type=0&id=7819784653&auto=1&height=90"></iframe>
</div>
</div>
</div> <footer class="right_foot">
<div class="right_f_l">
<p>
<!--底部版权/备案-->
<span> <a href="备案链接" target="_blank">备案号</a></span>
<!--请勿删除作者信息-->
<span> <a href="https://www.kisou.cn/" target="_blank">©2023 Copyright Kisou.</a></span>
</p>
</div>
</footer>
</section>
</div>
</body>
</html>CSS
* {
box-sizing: border-box
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0;
padding: 0;
font-family: microsoft yahei;
color: #333;
font-size: 14px;
top: 0;
left: 0;
right: 0;
}
p {
margin: 0 0 10px
}
h1 {
font-size: 2em;
margin: .67em 0
}
img {
border: 0;
max-width: 100%;
height: auto
}
.wrapper {
position: relative
}
.left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
background-size: cover;
display: block;
background-position: 10% 0;
background-color: #000
}
.right {
float: right
}
@media(max-width:768px) {
.left {
display: none
}
.right {
width: 100%
}
}
.right_box {
padding: 80px 50px
}
.right_foot {
background: #f5f5f5;
padding: 20px 50px;
font-size: 12px;
color: #555;
display: table;
width: 100%
}
.right_foot a {
color: #555
}
.right_f_l {
width: 70%;
float: left
}
.right_f_l p {
margin: 0;
color: #555
}
.right_f_l p span {
margin-right: 5px
}
.index_box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffffff;
}
.index_txt {
text-align: center;
font-weight: 300
}
.index_txt img {
border-radius: 50%;
width: 140px;
height: 140px
}
.index_txt h1 {
font-size: 30px;
margin: 20px 0
}
.index_txt p {
font-size: 20px;
font-weight: inherit;
line-height: 30px;
letter-spacing: 1px;
text-shadow: 2px 2px 4px rgba(9, 129, 226, 0.5);
width: 70%;
margin: 20px auto
}
.index_txt .zuobiao {
color: #030303;
line-height: 1.8;
font-size: 15px
}
.index_txt .zuobiao i {
margin-right: 6px;
vertical-align: middle;
background-image: url(../images/map.svg);
background-size: 100%;
width: 16px;
height: 16px;
display: inline-block;
margin-top: -2px
}
.wrap {
position: relative;
top: 20%;
text-align: center;
}
.wrap img {
border-radius: 50%;
width: 128px;
height: 128px;
overflow: hidden;
box-shadow: 0 0 15px rgba(209, 59, 104, 0.3);
transition: transform 0.3s ease;
}
.wrap img:hover {
/* transform: rotate(360deg);
transition: transform .5s ease; */
transform: scale(1.2);
filter: brightness(100%);
}
#myCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav li {
display: inline-block;
margin: 20px 50px;
}
nav a {
color: #050505;
font-size: 18px;
text-decoration: none;
text-align: center;
font-weight: bold;
transition: transform 0.3s ease;
text-shadow: 2px 2px 4px #db5aca80;
}
nav a:hover {
transform: scale(1.2);
filter: brightness(110%);
}
.fontb {
/* 设置字体大小 */
font-size: 18px;
/* 设置字体粗细 */
font-weight: bold;
/* 设置文字颜色 */
/* color: #333; */
/* 设置文字背景颜色 */
/* background-color: #f1f1f1; */
/* 设置文字对齐方式 */
text-align: center;
/* 设置文字装饰，比如下划线、删除线等 */
text-decoration: none;
/* 设置文字间距 */
letter-spacing: 1px;
/* 设置行高 */
line-height: 1.5;
/* 设置文字阴影 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
下载地址
https://www.kisou.cn/个人主页.zip 下载
一些话
希望大家能喜欢吧，我也会继续学习，为大家带来更好的作品！
挺漂亮的
感谢支持