菜鸟教程
教程 css tutorial

响应式个人主页

响应式个人主页通过灵活的布局和媒体查询，确保页面在手机、平板、电脑等不同设备上均有良好展示效果。

主要内容

  • 头像与姓名
  • 个人简介
  • 联系方式
  • 技能展示
  • 自适应布局

示例代码

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>响应式个人主页示例</title>
<style>
* {
box-sizing: border-box;
}


body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 1rem;
  background-color: #f0f2f5;
  color: #333;
}

.container {
  max-width: 900px;
  margin: 30px auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

header {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

header img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

header h1 {
  margin: 15px 0 5px;
  font-size: 2rem;
}

header p {
  font-size: 1rem;
  color: #666;
}

.content {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 20px;
}

.section {
  flex: 1 1 300px;
  background: #fafafa;
  padding: 15px;
  border-radius: 6px;
}

.section h2 {
  margin-top: 0;
  font-size: 1.2rem;
  border-bottom: 2px solid #3498db;
  padding-bottom: 5px;
  color: #3498db;
}

ul.skills {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.skills li {
  background-color: #3498db;
  color: white;
  display: inline-block;
  padding: 6px 12px;
  margin: 5px 5px 0 0;
  border-radius: 12px;
  font-size: 0.9rem;
}

@media (max-width: 600px) {
  .content {
    flex-direction: column;
  }
}



</style>
</head>


<body>
<div class="container">
<header>
<img src="https://i.pravatar.cc/120&quot; alt="头像" />
<h1>张三</h1>
<p>前端开发工程师 | 热爱 CSS 与响应式设计</p>
</header>
<div class="content">
<section class="section">
<h2>联系方式</h2>
<p>邮箱: [email protected]</p>
<p>电话: 123-4567-8901</p>
<p>GitHub: <a href="https://github.com/zhangsan&quot; target="_blank">zhangsan</a></p>
</section>
<section class="section">
<h2>技能</h2>
<ul class="skills">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Vue.js</li>
<li>React</li>
<li>Sass</li>
</ul>
</section>
</div>
</div>
</body>


</html>

相关内容