这个是一个简单的个人网页，图片什么的都是网上找的，都可以自己替换的哦。下面是网页的效果图。
主页
这个是个人简介页面
这个是个人相册页面，照片都是可以旋转会动的哦
这个是音乐界面，都是可以听的哦
这个是留言界面文章来源：https://www.toymoban.com/news/detail-771175.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人网站</title>
<style>
* {
/* CSS样式重置 */
margin:0;
padding:0;
}
body {
background:url("other/image/14.jpg") 0 0 repeat;
padding:35px 0 0;
margin:auto;
text-align:center;
}
.ribbon {
display:inline-block;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #E6E6FA;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#E6E6FA;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
-moz-transition: background-color 0.2s, margin-top 0.2s;
-ms-transition: background-color 0.2s, margin-top 0.2s;
-o-transition: background-color 0.2s, margin-top 0.2s;
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.bdh{
width:900px;
height:600px;
margin:10px auto;
border:1px solid #fff;
background: url("other/image/17.jpg");
background-size:100% 100%;
border-radius: 50% 50%;
}
.bd{
width:400px;
height:400px;
margin:120px auto;
text-align: left;
position:relative;
}
p{
font-family: "隶书";
font-size:30px;
top:150px;
}
.footer {
height: 40px;
line-height: 40px;
position: relative;
bottom: 0;
width: 100%;
text-align: center;
color: #000;
font-family: Arial;
font-size: 20px;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class='ribbon'>
<a href='other/introduce.html'><span>个人简介</span></a>
<a href='other/photowall.html'><span>个人相册</span></a>
<a href='other/music.html'><span>酷音乐吧</span></a>
<a href='other/messageboard.html'><span>有事留言</span></a>
</div>
<div class="bdh">
<div class="bd">
<p> 我们总羡慕别人的幸福，却常常忽略自己生活中的美好。其实，幸福很平凡也很简单，它就藏在看似琐碎的生活中。幸福的人，并非拿到了世界上最好的东西，而是珍惜了生命中的点点滴滴，<span style="color:black">用感恩的心态看待生活，用乐观的态度闯过磨难。</span></p>
</div>
</div>
<div class="footer">
© XXX 版权所有
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有事留言</title>
<link rel="stylesheet" href="css/messageboard.css" media="screen" type="text/css" />
</head>
<body>
<input class="button" name="Submit " type="submit" value="返回" onclick="javascript:history.back()" />
<form>
<input name="name" placeholder="请留下您的姓名......" class="name" required />
<input name="emailaddress" placeholder="请留下您的邮件地址......" class="email" type="email" required />
<textarea rows="4" cols="50" name="subject" placeholder="请留言......" class="message" required></textarea>
<input name="submit" class="btn" type="submit" value="发送" />
</form>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>酷音乐吧</title>
<link rel="stylesheet" href="css/music.css">
</head>
<body>
<input class="button" name="Submit " type="submit" value="返回" onclick="javascript:history.back()" />
<div class="top">酷 音 乐 吧</div>
<div class="wrapper">
<div id="player">
<audio controls id="audio" src="./content/songs/na_ge.mp3">!Audio Not Support :(</audio>
</div>
<div id="playlist">
<ol>
<li>
<a href="javascript:void(0);" data-name="那年初夏">那年初夏 - 任然</a>
</li>
<li>
<a href="javascript:void(0);" data-name="过去">过去-于文文</a>
</li>
<li>
<a href="javascript:void(0);" data-name="老街">老街-李荣浩</a>
</li>
<li>
<a href="javascript:void(0);" data-name="讲真的">讲真的-曾惜</a>
</li>
<li>
<a href="javascript:void(0);" data-name="知足">知足-胡夏</a>
</li>
<li>
<a href="javascript:void(0);" data-name="安和桥">安和桥-宇西</a>
</li>
<li>
<a href="javascript:void(0);" data-name="羞答答的玫瑰静悄悄地开">羞答答的玫瑰静悄悄地开-胡夏</a>
</li>
</ol>
</div>
<!--歌词存放盒-->
<div id="lyricWrapper">
<div id="lyricContainer"></div>
</div>
</div>
<script src="js/music.js"></script>
</body>
</html>以上是一部分代码哦，有兴趣的有问题需要解答小伙伴可以留言评论哈，我都会看的文章来源地址https://www.toymoban.com/news/detail-771175.html
到了这里，关于个人网页（HTML+css）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
