创建一个html文件This is your personal website about yourself The website should have a minimum of 5 pages The website will have a horizontal or a vertical menu or both menu that will link to your pages The
<!DOCTYPE html>
<html>
<head>
<title>Personal Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
<pre><code> .container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.menu {
display: flex;
justify-content: space-between;
background-color: #333;
color: #fff;
padding: 10px;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 5px;
}
.page {
margin-top: 20px;
}
.content {
margin-bottom: 20px;
}
.contact-form {
display: flex;
flex-direction: column;
max-width: 500px;
}
.contact-form label {
margin-bottom: 5px;
}
.contact-form input, .contact-form textarea {
margin-bottom: 10px;
padding: 5px;
}
.contact-form button {
padding: 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<div class="menu">
<a href="index.html">Home</a>
<a href="about.html">About Me</a>
<a href="study.html">Study/Work</a>
<a href="hobbies.html">Hobbies</a>
</div>
<pre><code> <div class="page">
<div class="content">
<h1>Welcome to my Personal Website!</h1>
<p>Feel free to explore the different pages and learn more about me.</p>
</div>
<div class="content">
<h2>About Me</h2>
<p>I was born in the beautiful city of [City]. Here are some pictures of my city:</p>
<img src="city1.jpg" alt="City 1">
<img src="city2.jpg" alt="City 2">
<img src="city3.jpg" alt="City 3">
</div>
<div class="content">
<h2>Study/Work</h2>
<p>I have studied at various institutions and currently attending [University]. Here are some pictures:</p>
<img src="school1.jpg" alt="School 1">
<img src="school2.jpg" alt="School 2">
<img src="university.jpg" alt="University">
</div>
<div class="content">
<h2>Hobbies</h2>
<p>Here are some of my hobbies:</p>
<img src="hobby1.jpg" alt="Hobby 1">
<img src="hobby2.jpg" alt="Hobby 2">
<img src="hobby3.jpg" alt="Hobby 3">
</div>
<div class="content">
<h2>Contact Me</h2>
<form class="contact-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hBEn 著作权归作者所有。请勿转载和采集!