个人主页

介绍

一个非常简易的个人主页,也是入门的一个作品,由HTML+CSS编写

也没什么好介绍的尽可能地注释了

项目地址

演示:www.duskpay.top

代码部分

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   下载

一些话

希望大家能喜欢吧,我也会继续学习,为大家带来更好的作品!

版权声明

作者:Kisou
本文链接:https://www.kisou.cn/front/personal-page/
共享协议: CC BY-NC-SA 4.0 协议
引用规则:非商业转载及引用请注明出处(作者、原文链接)

评论

  1. hjg
    Windows
    1月前
    2024-6-07 22:42:09

    123

  2. Windows
    1月前
    2024-6-04 18:46:11

    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111dddddddddddddddddddsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

  3. Windows
    10月前
    2023-9-22 20:01:09

    挺漂亮的

    • 博主
      keze
      Windows
      10月前
      2023-9-23 1:30:37

      感谢支持

      • Kisou
        Windows
        1月前
        2024-6-04 18:45:07

        测试

        • Windows
          1月前
          2024-6-04 18:45:28

          测试测试

          • Windows
            1月前
            2024-6-04 18:45:47

            测试测试是

          • Windows
            1月前
            2024-6-04 18:46:50

            111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111dddddddddddddddddddsdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

          • Windows
            1月前
            2024-6-04 18:47:20

            fgfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇