个人主页 HTML 代码模板 - 简洁美观
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Personal Homepage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
header {
background-color: #2c3e50;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin-top: 0;
}
nav {
background-color: #fff;
border-bottom: 1px solid #ddd;
overflow: hidden;
padding: 20px;
}
nav a {
float: left;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
nav a:hover {
color: #2c3e50;
background-color: #ddd;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
margin-top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 10px;
}
li:last-child {
margin-bottom: 0;
}
footer {
background-color: #2c3e50;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>My Personal Homepage</h1>
</header>
<nav>
<a href="#about">About Me</a>
<a href="#education">Education</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
<main>
<section id="about">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<section id="education">
<h2>Education</h2>
<ul>
<li>Bachelor's Degree in Computer Science, University of California, Los Angeles (UCLA)</li>
<li>Master's Degree in Information Technology, Massachusetts Institute of Technology (MIT)</li>
</ul>
</section>
<section id="skills">
<h2>Skills</h2>
<ul>
<li>Programming Languages: Java, Python, JavaScript, C++</li>
<li>Web Technologies: HTML, CSS, jQuery, React</li>
<li>Database Management: SQL, MongoDB, Oracle</li>
<li>Project Management: Agile, Scrum, JIRA</li>
</ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: example@example.com</p>
<p>Phone: 123-456-7890</p>
</section>
</main>
<footer>
<p>© 2021 My Personal Homepage. All rights reserved.</p>
</footer>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/lvBk 著作权归作者所有。请勿转载和采集!