HTML5简单个人主页设计

Root2021

墨衍会员 · AI 创作全网分发码龄6年

关注

原创最新推荐文章于 2025-05-26 12:03:50 发布 4.2k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

类似QQ空间的效果，因为没过多要求就不再美化了，各个图片链接和主页什么的链接需要留言
效果图：
在这里插入图片描述

html文件：

**
<!doctype html>

🔥 ข่าวด่วน: Root/article/details/ - ประเด็นร้อน

welcom to my个人主页

wzy的个人主页

	WZY		好友音乐日志个人档更多

<table class="main">
<tr><img src="images/NCU.jpg" class="NCU" height="50px" width="1200px" ></tr><tr><th><a href="personal.html" target="main"><li class="first"><img src="images/personal.png">个人主页</li></a><a href="info.html" target="main"><li><img src="images/per_show.png">个人简介</li></a><a href="example.html" target="main"><li><img src="images/picture.png">我的相册</li></a><a href="info.html" target="main"><li><img src="images/felling.png">心情日志</li></a><a href="contact.html" target="main"><li class="last"><img src="images/phone.png">与我联系</li></a></th></tr>

</div>

CSS文件：

**
@charset “utf-8”;
/* CSS Document */
body{
margin-top:0;
margin-left:0;
margin-right:0;
background-image:url(…/images/backgroundpic.jfif);
background-position:top;
background-repeat:repeat-x;
background-size:cover
}
.top{
width:100%;
height:50px;
background:#1f1f1f;
color:white;
border:none;
-position:absolute;
-padding:0;
-margin:0 auto;
}
li{
list-style:none;
font-size:25px;
font-weight:normal;
-border-left:1px solid black;
-border-right:1px solid black;
//border-width:medium;
-padding-left:100px;
padding-right:100px;
padding-bottom:20px;
padding-top:20px;
background:#fff;
text-decoration:none;
height:50px;
-float:right;
border-top:1px solid #CCC;
width:160px;
}
.first{
border:none;
}
.head{
padding-left:500px;
}
.headshot{
-padding-left:500px;
border:4px solid #dedede;
margin:0 auto;
}
.main{
padding-left:500px;
-background-color:#FFF;
}
a.one{
-padding-bottom:50px;
-padding-top:0px;
text-align:center;
color:#fff;
line-height:20px;
}
.topic{
padding-left:493px;
padding-bottom:50px;
padding-top:50px;
font-weight:900;
font-size:36px;
color:#2961ad;
}
.name{
font-weight:bolder;
font-size:16px;
padding-bottom:130px;
padding-left:25px;
color:#2961ad;
}
.first{
-border-top:1px solid black;
}
.last{
-border-bottom:1px solid black;
}
a{
text-decoration:none;
color:black;
}
.NCU{
padding-left:500px;
}
.rightmain{
float:right;

}
.saysth{
border:0;
outline:none;
width:600px;
height:74px;
margin-top:25px;
margin-right:0;
}
.textfieldbtn{
background-image:url(…/images/textfield.PNG);
width:100px;
height:74px;
margin-top:25px;
margin-right:400px;
border:0;
padding:0;

}
div input{
vertical-align:middle;
}
.my{
-padding-left:200px;
padding-top:125px;
float:right;
width:300px;
height:500px;
-overflow:hidden;
margin-left:-300px;

}
.show{margin-left:301px;
width:600px;
height:100%;
border:none;
background:#FFF;

}
.lable{
-float:right;
-padding-right:1151px;
-padding-bottom:150px;
padding-top:150px;
height:100px;
margin-top:-115px;
margin-bottom:-106px;
margin-left:64px;

}
.lablea{
letter-spacing:3px;
padding-right:30px;
}
#time{
padding-left:500px;
padding-bottom:100px;
text-align:center;
}