自己设计一个美观的网页版介绍界面（HBuilder）

根据前三周的学习做了自我介绍和团队介绍的界面，其中的格式和颜色都可以通过代码调整（原谅我的直女审美和瘠薄的知识）这是第一个界面，点击文字链接即可进入不同的介绍界面（没啥图片好加，一起欣赏下皮卡丘的可爱吧）附上代码：<html><head><meta charset="utf-8"><title></title></head>&

土拨鼠本鼠

9894人浏览 · 2021-03-27 23:01:26

土拨鼠本鼠 · 2021-03-27 23:01:26 发布

根据前三周的学习做了自我介绍和团队介绍的界面，其中的格式和颜色都可以通过代码调整（原谅我的直女审美和瘠薄的知识）

这是第一个界面，点击文字链接即可进入不同的介绍界面（没啥图片好加，一起欣赏下皮卡丘的可爱吧）附上代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
	a:link {color:#55ffff;}      /* 未访问链接*/
	a:visited {color:#000000;}  /* 已访问链接 */
	a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
	a:active {color:#0000FF;}  /* 鼠标点击时 */
	.a{text-align:center;font-size:50pt;}
	img.normal{display: block;width: 50%; margin: 0 auto;height:auto;}
	img.big{display: block;width: 100%; margin: 0 auto;height:100px;}
	</style>
	<body>
		<head>
			<meta charset="utf-8">
			<title></title>
			<link rel="stylesheet" type=" text/css" href="style.css"
		</head>
		<p class="a"><a href="my1.html">点击查看我的介绍</a></p>
		<p class="a"><a href="my2.html">这是我的团队，还未完善</a></p>
		<img class="normal" src="../images/皮卡丘.jpg" width="70" height="50"><br>	
	</body>
</html>

这是网页结果截图：
在这里插入图片描述
1.点击第一行进入我的介绍（一些信息我就不泄露啦）：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			h1{color:red;text-align:center;}
			div{ text-align:center; font-size:15pt;}
			</style>
		<h1>自我介绍</h1>
		<div>
		<p>姓名：田饶</p>
		<p>性别：女</p>
		<p>学校：</p>
		<p>专业：</p>
		<p>爱好：小说、动漫二次元</p>
		<img src="../images/my2.png" width="200px">
		<p>上面是我的博客主页，通过之后的学习每周会一点一点完善的,欢迎进来看看，喜欢的话留下一个赞赞再走吧</p>
		<a href="https://blog.csdn.net/AXN567?spm=1001.2100.3001.5343">我的博客主页</a>
		<p><a href="index.html">返回主页</a></p></div>
	</body>
</html>

附上结果：
在这里插入图片描述
2. 点击第二个链接就能看到我们的团队啦，成员确定，有了一点点想法，还没完善，将就看看吧：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
			a:active {color:#0000FF;}  /* 鼠标点击时 */
		h1{color:orange;text-align:center;}
		.p{text-align:center;font-size:17pt;}
		#p{text-align:center;font-size:17pt;}
		.center{text-align:center;}
		</style>
		<h1>团队名（未定）</h1>
		<p></p>
		<p class="p">团队成员：</p>
		<p class="center">田饶</p>
		<p class="center">张</p>
		<p class="center">胡</p>
		<h1>项目名称（未定）</h1>
		<p id="p"><a href="my3.html">详情请看项目介绍</a></p>
		<p class="center"><a href="index.html">返回主页</a></p>
	</body>
</html>

例常打码：

3.详细介绍是从创新、创意、创业点三个方面来的，只有大概的框架，实在没经验想不出太多了。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
			a:active {color:#0000FF;}  /* 鼠标点击时 */
			h1{color:black;text-align:center;}
			.center{text-align:center;font-size:17pt;}
			</style>
		<div id="container" style="width:500px">
		<div id="header" style="background-color:#ffffff;">
		<h1 style="margin-bottom:0;">项目介绍</h1></div>
		<div id="menu" style="background-color:#ffaaff;height:700px;width:50px;float:left;">
		<b></b><br>
		创新<br>
		<p> <br>   </p>
		<p><br>    </p>
		<p><br>    </p>
		<p>创意<br></p><p><br> </p> <p><br> </p><p><br> </p><p><br> </p><p><br> </p><p><br> </p>
		创业</div>
		<div id="content" style="background-color:#00ffff;height:700px;width:450px;float:left;">
		<p>现如今</p>
		<p>知识。</p>
		<p>1.主要</p></div>
		<p class="center"><a href="index.html">返回主页</a></p>
	</body>
</html>