day6 vue学习

学习 HTML 和 CSS 基础的目标项目，可以是一个个人主页，这个项目涵盖了网页的基本结构、样式应用、布局以及简单的互动。实现后可以展示在本地或托管在 GitHub Pages 上。

目标是通过学习 HTML 和 CSS，从基础开始，逐步实现一个简约的个人展示网页。以下是一个 阶段性实例，你可以通过这个例子练习和巩固所学内容。

阶段性实例：简约个人简介网页

需求：

展示你的名字、照片、简介、技能和社交媒体链接。
使用 HTML 和 CSS 编写一个布局简单、样式清新的页面。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My Portfolio</h1>
    <p>Welcome to my personal webpage!</p>
  </header>

  <section class="profile">
    <img src="your-photo.jpg" alt="Your Photo" class="profile-pic">
    <h2>Your Name</h2>
    <p>Short introduction about yourself. Mention your profession, hobbies, or interests.</p>
  </section>

  <section class="skills">
    <h3>Skills</h3>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Responsive Design</li>
      <li>Version Control (Git)</li>
    </ul>
  </section>

  <footer>
    <p>Connect with me:</p>
    <a href="https://github.com/yourusername" target="_blank">GitHub</a> |
    <a href="https://linkedin.com/in/yourusername" target="_blank">LinkedIn</a>
  </footer>
</body>
</html>

CSS 代码

/* styles.css */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f4f4f4;
}

header {
  text-align: center;
  background-color: #007acc;
  color: white;
  padding: 20px 0;
}

header h1 {
  margin: 0;
  font-size: 2.5em;
}

.profile {
  text-align: center;
  padding: 20px;
  background-color: white;
  margin: 20px auto;
  width: 80%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.skills {
  text-align: center;
  background-color: #fff;
  margin: 20px auto;
  padding: 20px;
  width: 80%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
  text-align: center;
  padding: 10px 0;
  background-color: #333;
  color: white;
}
footer a {
  color: #66b2ff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

阶段性实例：简约个人简介网页

相关文章