一、实验目的与要求：
目的：使用HTML，构思并设计、实现个人主页（或品牌、事件主页）
要求: 1. 综合应用各种HTML标签
2. 页面内容设计合理
方法、步骤：
要完成本实验，依据实验要求进行分解，需要完成的实验步骤是：
1. 综合应用各种HTML标签
假设现在是2023年下半年，你参加了一个夏令营。夏令营主办方在收集各人的主页链接，以便让同学们能更快、更好互相了解。那么，你计划如何设计、实现你的个人主页？或者你打算设计的是某个品牌或物品、事件等的主页，那么也请给出你的动机说明。或者，你调研作业调研了某个网站，那么，请使用HTML，仿照设计该网站
2. 页面内容设计合理
针对前述主题构思，你的实现设计思路是什么，请简要说明网页的主要结构。不要贴源码，连续的代码行不能超过20行。
二、实验过程及内容
1. 页面主题构思
我选择实现我的个人主页。既然是个人主页，那么肯定会有我自己的照片（头像）以及关于我的东西（联络方式、座右铭、自我介绍等等）。
2. 主页内容设计
1) 头像
① 设计灵感
作为个人主页，我第一个想到的就是头像，现在不同的社交软件上，通常我们认识别人都会看到对方的头像，因此我认为这是不可或缺的一个元素。
② 设计思路
大多数的头像都是圆形的，但是普通的<img>只能呈现一个矩形的图片，用来当作头像并不美观，因此我使用了border-radius属性来实现圆形头像的效果。
③ 核心代码
④ 效果展示
2) 鼠标文字显示图片
① 设计灵感
回想起浏览过的网页，我发现有时候只需要用鼠标指在文字上就会有图片显示出来，我觉得这用在展示自己的社交code会是一个不错的主意。
② 设计思路
在上网查找资料的时候发现这顶功能用到了javascript，其主要是用到了 onMouseOver 与 onMouseOut 的事件属性，通过判断鼠标是否在文字上来改变图片的display属性，从而达到效果。
③ 核心代码
④ 效果展示
3) 鼠标文字变色
① 设计灵感
在浏览一个网页的时候，如果所有文字与背景千篇一律都是同一种颜色，不免会让人觉得少了一点色彩，因此我想添加鼠标停在文字上变色的效果，在配合鼠标文字显示图片的时候能让访问者更清晰当前图片是指什么。
② 设计思路
鼠标文字变色主要用到了hover这个属性，配合span标签能让特定文字变色。
③ 核心代码
④ 效果展示
4) 横向排列的导航栏
① 设计灵感
在一个个人主页上，要想向访问者展示你的所有资讯显然是不太可能的。我在浏览一些网页的时候，发现有一些横向排列的导航栏，我认为这用在给访问者浏览更多其他的资讯是一个不错的主意。
② 设计思路
实现的方法不止一种，我选择了自己比较熟悉的无序列表<ul>，但列表一般都是纵向的，要想让它变成横向，主要就是把<ul>的主要样式变为display:block与<li>的主要样式变为display:inline-block。
美观上，我采用了border-radius属性来实现圆边框，并利用border属性为边框上色；当访问者鼠标停在导航栏时，利用hover属性变换背景色。
③ 核心代码
④ 效果展示
5) 点击拷贝
① 设计灵感
在我们需要输入别人的帐号或邮箱时，为了避免输入有误，通常会直接拷贝粘贴，而在一些网页上，为了让访问者更方便的拷贝文字，会有点击拷贝的功能，因此我选择把这项功能实现在我的主页上。
② 设计思路
这顶功能同样用到了javascript，其主要是用到了 onclick 的事件属性，通过判断鼠标是否点击文字来自动完成拷贝的操作，从而达到效果。
③ 核心代码
④ 效果展示
3. 最终效果
三、实验结论
1) 完成实验后，当你看到自己刚做完的这个网页，你有何感想？
作为第一个我自己从零开始构思到完成的网页，也是我继学习Web一个月后的第一个作品，我认为肯定谈不上优秀，但也足够让我自己感到满意，其中也有很多的进步与改进空间。
四、心得体会
主要说明你对HTML的理解和整体感受。
通过这一次实验，我了解到原来要写一个网页是很不容易的，那怕是这次的实验，我也花了不少时间与心思去完成。我充分意识到要想写一个优秀的网页，一定要熟悉HTML三件套，缺一不可，不少我所想到的功能其实都用到了javascript，奈何课程还没讲到那里，我只好现学现用自己上网查找资料，这整个过程其实挺有意思的，也更有利于我往后的学习。总的来说，这次实验让我学到了不少写网页的知识，我也期待未来能够写出优秀的作品。
附上源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JiaQi的个人主页</title>
<style type="text/css">
body {
background-image: url("bg2.PNG");
background-size:cover;
background-repeat: no-repeat;}
img{display:inline-block}
.icon{/*头像*/
width:134px;
height:134px;
margin: 40px 5px 5px 0;
position: relative;
border-radius: 70px;
border:2px solid white; /* 加上分隔线 */}
h1{
text-align:center;
color:white;
margin: 10px;
font-family: "Microsoft JhengHei";}
h4{
text-align:center;
color: #c0bcbc;
margin: 5px;
font-family: "Microsoft JhengHei";}
p{
text-align:center;
color: #c0bcbc;
margin: 0px;
font-family: "Microsoft JhengHei";
font-weight:bold;}
.light_text:hover{color:yellow;}
.light_text2:hover{color:lime;}
.light_text3:hover{color:cyan;}
#menu {
font:12px "Microsoft JhengHei",verdana, arial; /* 设置文字大小和字体样式 */
position: relative;
left:50%;
float:left;}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:6px;
margin-top:10px;
float: left;
display: block;
position: relative;
right:50%;}
#menu li a {
display:inline-block;
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#2D194A; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border:1px solid white; /* 加上分隔框 */
border-radius: 70px;}
#menu li a:hover {background:#146C9C; /* 变换背景色 */}
#img_1{height:150px;}
#img_2{height:150px;}
.top{margin-top: 20px;}
.bottom{margin-bottom: 20px;}
</style>
<script language="javascript">
function show_img()//显示图片函数，鼠标移到链接触发
{
document.getElementById("img_1").style.display = "inline-block";
}
function hide_img()//隐藏图片函数，鼠标离开链接触发
{
document.getElementById("img_1").style.display = "none";
}
function show_img2()//显示图片函数，鼠标移到链接触发
{
document.getElementById("img_2").style.display = "inline-block";
}
function hide_img2()//隐藏图片函数，鼠标离开链接触发
{
document.getElementById("img_2").style.display = "none";
}
copyInnerTextOfCell = (event) => {
let innerText = event.target.innerText;
var tmpInput = document.createElement("input");
document.body.appendChild(tmpInput);
tmpInput.value = innerText;
tmpInput.select();
document.execCommand("cut"); // copy
tmpInput.remove();
alert("复制成功！" + innerText);}
</script>
</head>
<body>
<div align="center">
<img class="icon" src="icon2.jpg" alt="头像">
</div>
<h1>JiaQi的个人主页</h1>
<hr color="#404040" width="20%" size="1px">
<div class="top">
<h4>My motto</h4>
</div>
<div class="bottom">
<h4><span class="light_text">零星地变得优秀，也能拼凑出星河！</span></h4>
</div>
<hr color="#404040" width="20%" size="1px">
<div class="top">
<h4>欢迎来到我的主页！</h4>
</div>
<div align="center">
<h4 style="display:inline;" onMouseOver="show_img()" onMouseOut="hide_img()"><span class="light_text2">微信 </span></h4>
<h4 style="display:inline;" onMouseOver="show_img2()" onMouseOut="hide_img2()"><span class="light_text3"> QQ</span></h4>
</div>
<div align="center">
<img id="img_1" src="wechat.jpg" style="display:none"/>
<img id="img_2" src="QQ.png" style="display:none"/>
</div>
<nav>
<ul id="menu">
<li><a href="link" title="JiaQi的博客">JiaQi的博客</a></li>
<li><a href="link" title="JiaQi的文章">JiaQi的文章</a></li>
<li><a href="link" title="JiaQi的爱好">JiaQi的爱好</a></li>
<li><a href="link" title="JiaQi的官网">JiaQi的官网</a></li>
</ul>
</nav>
<br><br><br><br><br>
<div align="center">
<p style="display:inline;">Email: </p>
<p style="display:inline;" onclick="copyInnerTextOfCell(event)"><i><span class="light_text">XXXX123@qq.com</span></i></p>
</div>
</body>
</html>喜欢可以点个赞支持一下作者！
3101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
