详情请看代码及其注释,下有效果图!
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta 单标签 用来引入或声明一些内容-->
<meta charset="UTF-8">
<!--title 标题标签-->
<title>个人主页</title>
<style>
body{
/*边界看宽度默认为8,在这里初始值设为零*/
margin: 0;
font-family: 楷体;
}
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%;
}
main {
width: 1000px;
margin:0 auto;
}
/*只找到父子关系的标签找到section下img标签，不会找到孙级标签*/
section > img {
width: 1000px;
}
p {
color: brown;
/*文本首行缩进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>
<!--实现点击首页标签跳转到指定界面-->
<!--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>“学好一门技术的唯一方法是使用它,在使用它的过程中才能真正学会它。如果能够在使用它的过程中体会到乐趣,就是学习的最佳"状态。希望大家在学习HTML5的过程中多多练习,多敲代码一定会有回报,意想不到的收获都会在使用的过程中进发出来。”</p>
<!--section 组件、模块, 块元素-->
<section id="html5">
<img src="personage/html5.jpg" alt="html5.jpg">
<p>“从小就喜欢学习,感觉自己的自学能力超强,也喜欢把自己学会的知识分享给大家。我希望自己能够成为一个好老师,把每一个同学·都教好,让他们都能有所成就。我认为一个好老师不仅要有较好的技术,也要对学生严格要求。放任不管只有部分同学能安心学习,严格要求才能保证绝大多数同学都能稳下心来好好学习。”</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" style="text-align: center;">©木之易，版权所有。</p>
</body>
</html>
结果如下:
