给我一份完整的免费开源的前端个人页面源码,直接在这个窗口写源码不要给克隆仓库链接
时间: 2024-02-03 17:12:17 浏览: 81
好的,以下是一个简单的个人页面的前端源码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Personal Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<h1>My Name</h1>
<nav class="nav">
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel justo ac velit blandit cursus. Praesent sit amet sapien a elit imperdiet placerat. Etiam in mi eget nisl ornare iaculis vel eget mauris. Sed vel augue ac nisi dictum sodales at et odio. Fusce euismod ligula nec augue eleifend lobortis. Fusce vel purus in diam gravida hendrerit.</p>
</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 Me</h2>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="Send">
</form>
</section>
</main>
<footer class="footer">
<p>Copyright © My Name</p>
</footer>
</body>
</html>
```
同时,还需要一个名为 `styles.css` 的样式文件,代码如下:
```css
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #f7f7f7;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav ul {
display: flex;
}
.nav li {
margin-left: 20px;
}
.nav a {
text-decoration: none;
color: #333;
}
.nav a:hover {
color: #007bff;
}
.main {
padding: 40px 0;
}
.section {
margin-bottom: 40px;
}
.section h2 {
margin-bottom: 20px;
font-size: 36px;
font-weight: bold;
}
.section p {
margin-bottom: 20px;
font-size: 18px;
line-height: 1.5;
}
.section ul {
list-style: none;
}
.section li {
margin-bottom: 10px;
font-size: 18px;
line-height: 1.5;
}
.form label {
display: block;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
.form input,
.form textarea {
display: block;
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 18px;
line-height: 1.5;
}
.form input:focus,
.form textarea:focus {
outline: none;
border-color: #007bff;
}
.form input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 18px;
line-height: 1.5;
cursor: pointer;
}
.form input[type="submit"]:hover {
background-color: #0069d9;
}
```
这个页面包含了一个简单的导航栏,一些关于自己的信息,项目列表和联系表单。希望这个源码对您有所帮助!
阅读全文