自我介绍的前端页面

最新推荐文章于 2024-10-16 10:27:58 发布

五月天的小迷弟

最新推荐文章于 2024-10-16 10:27:58 发布

阅读量261

点赞数 1

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/mayday555525/article/details/130909993

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目说明

最近接到了一个前端的单子，做了四个页面：
在这里插入图片描述
可以通过首页上的“兴趣爱好”，“项目经历”，“梦想愿望”点击进去分别有一个相关页面。

项目各个部分的代码

代码结构：

} 在这里插入图片描述
css代码：

body {
	margin: 0;
	padding: 0;
	background: url(../img/1.jpg) no-repeat;
	background-size: cover;
}

.box {
	color: rgb(6, 173, 151);
	width: 450px;
	background: rgba(0, 0, 0, 0.4);
	padding: 40px;
	text-align: center;
	margin: auto;
	margin-top: 5%;
	font-family: 'Century Gothic', sans-serif;
}

.box .box-img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
}

.box h1 {
	font-size: 50px;
	letter-spacing: 4px;
	font-weight: 400;
}

.box h2 {
	font-size: 30px;
	letter-spacing: 3px;
	font-weight: 300;
}

.one {
	text-decoration: none;
	font-size: 20px;
	font-weight: 600;
	color: grey;
}

.one:hover {
	color: rgb(6, 173, 151);
}

ul {
	list-style-type: none;
}

li {
	float: left;
	margin-left: 50px;
}

a {
	text-decoration: none;
	font-size: 13px;
	color: rgb(6, 173, 151);
}

p {
	color: rgb(6, 173, 151);
}

img图片各位可以自己设置

index.html：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Chris</title>
		<link href="css/css.css" type="text/css" rel="stylesheet" />
	</head>

	<body>
		<div class="box">
			<img src="img/1.jpg" alt="" class="box-img">
			<h1 class="name">Chris</h1>
			<h2>Web Designer</h2>
			<h3>Welcome to my personal website!</h3>
			<h3>If you want to know more about me,please click above</h3>
			<ul>
				<li>
					<a href="hobby.html">兴趣爱好</a>
				</li>
				<li>
					<a href="experience.html">项目经历</a>
				</li>
				<li>
					<a href="dream.html">梦想愿望</a>
				</li>
			</ul>
		</div>
		<footer>
			<p>Posted by: W3School</p>
			<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
		</footer>
	</body>

</html>

experience.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Experience</title>
		<link href="css/css.css" type="text/css" rel="stylesheet" />
		<style>
			li{
				float: left;
				margin-left: 150px;
			}
		</style>
		<title></title>
	</head>

	<body>
	</body>
	<div class="box">
		<img src="img/3.jpg" alt="" class="box-img">
		<h3 style="font-family: '宋体';">2020.3-2020.6：网易后端开发实习</h3>
		<h3 style="font-family: '宋体';">2020.6-2020.9：字节前端开发实习</h3>
		<h3 style="font-family: '宋体';">2020.9-2020.12：bilibili大数据开发实习</h3>
		<ul>
			<li>
				<a href="index.html">返回主页</a>
			</li>
		</ul>
	</div>

</html>

hobby.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Hobby</title>
		<link href="css/css.css" type="text/css" rel="stylesheet" />
		<style>
			li{
				float: left;
				margin-left: 150px;
			}
		</style>
		<title></title>
	</head>

	<body>
	</body>
	<div class="box">
		<img src="img/2.jpg" alt="" class="box-img">
		<h3 style="font-family: '宋体';">我最喜欢的明星：五月天</h3>
		<h3 style="font-family: '宋体';">我最喜欢的乐器：吉他</h3>
		<h3 style="font-family: '宋体';">我最喜欢的填词人：五月天阿信</h3>
		<ul>
			<li>
				<a href="index.html">返回主页</a>
			</li>
		</ul>
	</div>

</html>

dream.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Dream</title>
		<link href="css/css.css" type="text/css" rel="stylesheet" />
		<style>
			li{
				float: left;
				margin-left: 150px;
			}
		</style>
		<title></title>
	</head>

	<body>
	</body>
	<div class="box">
		<img src="img/4.jpg" alt="" class="box-img">
		<h1 style="font-family: '宋体';">财务自由</h3>
		<h2 style="font-family: '宋体';">学习化妆</h3>
		<h3 style="font-family: '宋体';">做个有用的人</h3>
		<ul>
			<li>
				<a href="index.html">返回主页</a>
			</li>
		</ul>
	</div>

</html>