个人主页的设计与开发,要求如下:站中至少包括两个页面 、页面的整体布局自行设计 、网站的风格统一 、尽量将所学的HTML5、CSS和JS的技术应用到网站 比较完整展示一个个人主页的框架和内容;在前者基础上添加一定的样式设置;页面丰富,内容丰富充实,样式多样并有互动用web代码书写
时间: 2024-03-07 15:48:26 浏览: 17
好的,以下是一个简单的个人主页代码示例,其中包括首页和作品展示页面的基本框架和内容,使用了HTML5、CSS和JS技术:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<header>
<h1>欢迎来到我的个人主页</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="works.html">作品展示</a></li>
</ul>
</nav>
</header>
<main>
<h2>个人简介</h2>
<p>我是一名前端开发工程师,具有多年的开发经验。</p>
<h2>技能</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
<h2>教育经历</h2>
<p>2010-2014年,本科就读于某某大学计算机系。</p>
</main>
<footer>
<p>班级:xxx,学号:xxx,姓名:xxx</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav li:last-child {
margin-right: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
h2 {
margin-top: 40px;
}
ul {
list-style: disc;
margin-left: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
JS代码:
```
console.log("欢迎来到我的个人主页!");
```
这是一个简单的个人主页示例,您可以根据自己的需求进行修改和扩展。同时,您可以参考一些成熟的网站模板或者网站设计作品,来获取更多的灵感和建议。