<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生个人网页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #333;
}
nav a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
nav a:hover {
background-color: #ddd;
color: black;
}
section {
padding: 20px;
margin: 20px;
background-color: white;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的个人网页</h1>
</header>
<nav>
<a href="#about">关于我</a>
<a href="#projects">项目</a>
<a href="#contact">联系我</a>
</nav>
<section id="about">
<h2>关于我</h2>
<p>你好!我是XXX,一名热爱编程的学生。在这里你可以了解我的学习经历和兴趣爱好。</p>
</section>
<section id="projects">
<h2>我的项目</h2>
<p>这里展示了一些我参与的项目:</p>
<ul>
<li>项目1:描述项目1的内容</li>
<li>项目2:描述项目2的内容</li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<p>如果你有任何问题或合作意向,请通过以下方式联系我:</p>
<ul>
<li>Email: example@example.com</li>
<li>电话: 123-456-7890</li>
</ul>
</section>
<footer>
<p>© 2023 学生个人网页</p>
</footer>
</body>
</html>
HTML结构:
<!DOCTYPE html>
声明文档类型为HTML5。<html>
标签是HTML文档的根元素。<head>
包含元数据(如字符编码、视口设置、标题等)。<body>
包含网页的主要内容。头部 (<header>
) 和导航栏 (<nav>
)
<nav>
标签,并且包含了三个链接(关于我、项目、联系我),这些链接可以跳转到页面的不同部分。主要内容区 (<section>
)
<section>
标签代表一个独立的内容块,例如“关于我”、“我的项目”和“联系我”。样式 (<style>
)
页脚 (<footer>
)
这个示例代码可以帮助你快速创建一个简单的学生个人网页。你可以根据需要进一步修改和完善内容和样式。
上一篇:html换行标签
下一篇:html 换行
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站