⽤HTML制作简单的个⼈介绍主页详情请看代码及其注释，下有效果图!
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta 单标签⽤来引⼊或声明⼀些内容-->
<meta charset="UTF-8">
<!--title 标题标签-->
<title>个⼈主页</title>
<style>
body{
/*边界看宽度默认为8，在这⾥初始值设为零*/
margin: 0;
font-family: 楷体;
simotion教程}
nav{
width: 100%;
height: 64px;
/*定位⽅式: 固定位置*/
position: fixed;
top: 0;
background-color: white;
z-index: 1000;
}
/*到nav标签下 div标签后代选择器，可以到nav下的所有的div标签*/
nav div{
width: 1000px;
height: 64px;
/*块元素居中*/
margin:0 auto;
}
#logo{
width: 216px;
/*相对定位，位置微调*/
position: relative;
top: 7px;
left: 15px;
}
ul{
float: right;
margin: 0;
/*左内边距设为零*/
padding-left: 0;
}
li{
float: left;
/*设置列表项的前缀为none*/
list-style: none;
margin-right: 30px;
}
li a{
line-height: 64px;
/*去除超链接下划线*/
text-decoration: none;
color: black;
}
li a:hover{
color: brown;
}
#header{
/*图⽚宽度设为100%*/
width: 100%;
width: 100%;
}
main {
width: 1000px;
margin:0 auto;
}
/*只到⽗⼦关系的标签到section下img标签，不会到孙级标签*/
section > img {substrate技术
width: 1000px;
}
p {
color: brown;
table tennis汉语谐音/*⽂本⾸⾏缩进2个字符*/
text-indent: 2em;
}
h2 {
color: brown;
}
#myclassmate {
width: 1000px;
height: 630px;
background-image: url('personage/classmates.jpg');
background-size: 1000px 630px;
/*relative 相对的相对定位 */
/*1. 相对⾃⼰原来的位置做位置的微调
2.让该标签下的⼦标签做绝对定位时，以该标签为参考物调整，⽽不再是以浏览器边框为参考物*/            position: relative;
}
#myclassmate img{
border:2px white solid;
border-radius: 50%;
/*absolute1.绝对定位的元素会被浮起来，原来的位置会被后⾯的元素侵占*/
position: absolute;
}
/*到div下的第1个⼦标签*/
#myclassmate img:nth-child(1){
width: 200px;
top: 100px;
left: 100px;
}
/*到div下的第2个⼦标签*/
#myclassmate img:nth-child(2){
width: 270px;
top: 260px;
left: 360px;
}
/*到div下的第3个⼦标签*/
#myclassmate img:nth-child(3){
width: 230px;
top: 100px;
鼠标光标图案个性化
right: 60px;
}
</style>
</head>
<body>
<!--加载⾳频⽂件-->
<audio src="葫芦娃.mp3" autoplay></audio>
<!--加载视频⽂件-->
<video src=""></video>
<!--navigation 导航标记⽹页中的导航条块元素-->
<nav>
<div>
<img id="logo" src="personage/logo.png" alt="两座⼭峰">
<!--ul⽆序列表 li 列表元素-->
<ul>
<ul>
<!--实现点击⾸页标签跳转到指定界⾯-->
<!--a标签超链接标签-->
<li><a href="#header">⾸页</a></li>
<li><a href="#html5">HTML5</a></li>
<li><a href="#classmates">我的同学</a></li>
<li><a href="#hometown">我的家乡</a></li>
<li><a href="#myschool">我的学校</a></li>
<li><a href="#myself">关于我</a></li>
</ul>
</div>
</nav>
<img id="header" src="personage/header.jpg" alt="晨曦">
<!--main 元素标记⽹页中的主要部分内容-->
<main>
<!--p标签，⽤来标记⽹页中的段落内容！-->
<p>“学好⼀门技术的唯⼀⽅法是使⽤它，在使⽤它的过程中才能真正学会它。如果能够在使⽤它的过程中体会到乐趣，就是学习的最佳"状态。希望⼤家在学习HTML        <!--section 组件、模块, 块元素-->
学生个人网页html代码
<section id="html5">
<img src="personage/html5.jpg" alt="html5.jpg">
<p>“从⼩就喜欢学习，感觉⾃⼰的⾃学能⼒超强，也喜欢把⾃⼰学会的知识分享给⼤家。我希望⾃⼰能够成为⼀个好⽼师，把每⼀个同学·都教好，让他们都能有所成        </section>
<section id="classmates">
<h2>我的同学</h2>
<div id="myclassmate">
<img src="personage/wf.png" alt="">
<img src="personage/lry.jpg" alt="">
维他派克斯英文<img src="personage/ldh.jpg" alt="">
</div>
<p>“王菲、刘若英、刘德华都是我的同学。”</p>
</section>
<section id="hometown">
<h2>我的家乡</h2>
<img src="personage/hometown.JPG" alt="hometown.jpg">
<p>我的家乡是个美丽的城市。</p>
</section>
<section id="myschool">
<h2>我的学校</h2>
<img src="personage/lzu.jpg" alt="lzu.jpg">
<p>我的学校是⼀所很好的学校。</p>
</section>
</main>
<hr>
<!--声明个⼈版权-->
<p id="myself" >©⽊之易，版权所有。</p>
</body>
</html>
结果如下:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。