零基础5分钟搞定用纯HTMLCSS手搓一个简约风个人主页附完整源码最近有个朋友问我想做个个人主页展示自己但完全不懂编程怎么办其实用最基础的HTMLCSS就能快速实现。今天我们就来手把手教你无需任何框架5分钟内打造一个简约又专业的个人主页。这个方案特别适合编程新手、自由职业者或想建立个人品牌的朋友。1. 准备工作认识HTML和CSS在开始之前我们先简单了解下这两个核心技术HTML网页的骨架负责内容结构CSS网页的皮肤负责样式美化不需要安装任何软件只需一个文本编辑器记事本、VS Code等和浏览器就能开始。下面是我们的项目文件结构my-website/ ├── index.html # 主页面文件 ├── style.css # 样式文件 └── images/ # 存放图片素材2. 基础HTML结构搭建我们先创建一个最简单的HTML5文档框架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title link relstylesheet hrefstyle.css /head body !-- 页面内容将放在这里 -- /body /html这个基础结构包含了文档类型声明语言设置字符编码视口设置确保移动端适配标题CSS文件链接3. 设计个人主页布局我们采用经典的卡片式布局包含以下元素个人头像姓名/头衔简短自我介绍社交链接对应的HTML代码如下div classprofile-card img srcimages/avatar.jpg alt个人头像 classavatar h1张三/h1 h2前端开发者 设计师/h2 p热爱创造美观实用的网页体验专注于HTML/CSS/JavaScript开发。/p div classsocial-links a href# classgithubGitHub/a a href# classtwitterTwitter/a a href# classlinkedinLinkedIn/a /div /div4. 用CSS美化页面现在我们来添加样式创建一个简约现代的外观。以下是核心CSS代码/* 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Segoe UI, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .profile-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 40px; text-align: center; max-width: 400px; width: 100%; transition: transform 0.3s ease; } .profile-card:hover { transform: translateY(-5px); } .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 5px solid #f0f0f0; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } h2 { color: #666; font-size: 18px; font-weight: normal; margin-bottom: 20px; } p { color: #777; line-height: 1.6; margin-bottom: 30px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { padding: 10px 20px; border-radius: 5px; color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s; } .social-links a:hover { opacity: 0.8; } .github { background: #333; } .twitter { background: #1DA1F2; } .linkedin { background: #0077B5; }5. 个性化定制指南现在你已经有了基础代码接下来是如何快速定制成你自己的主页5.1 更换头像准备一张正方形头像图片建议至少400×400像素将图片放入images文件夹修改HTML中的图片路径img srcimages/your-photo.jpg alt你的名字 classavatar5.2 修改文字内容直接编辑HTML中的这些部分h1你的名字/h1 h2你的职业/头衔/h2 p你的个人简介.../p5.3 更新社交链接找到social-links部分替换href值为你的真实社交账号链接div classsocial-links a hrefhttps://github.com/yourname classgithubGitHub/a a hrefhttps://twitter.com/yourname classtwitterTwitter/a a hrefhttps://linkedin.com/in/yourname classlinkedinLinkedIn/a /div5.4 调整配色方案要更改整体配色只需修改CSS中的颜色值/* 主色调调整 */ .profile-card { background: #你的颜色; } /* 按钮颜色 */ .github { background: #你的颜色; } .twitter { background: #你的颜色; } .linkedin { background: #你的颜色; }6. 进阶优化技巧想让你的主页更专业试试这些增强功能6.1 添加响应式设计确保在各种设备上都能良好显示media (max-width: 480px) { .profile-card { padding: 30px 20px; } .avatar { width: 120px; height: 120px; } .social-links { flex-direction: column; gap: 10px; } }6.2 添加动画效果让页面更有活力keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .profile-card { animation: fadeIn 0.6s ease-out; }6.3 添加暗黑模式支持适应系统偏好设置media (prefers-color-scheme: dark) { body { background: #121212; } .profile-card { background: #1e1e1e; color: white; } h1, h2, p { color: #e0e0e0; } }7. 完整源码与部署这是完整的HTML文件代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Segoe UI, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .profile-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 40px; text-align: center; max-width: 400px; width: 100%; transition: transform 0.3s ease; animation: fadeIn 0.6s ease-out; } .profile-card:hover { transform: translateY(-5px); } .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 5px solid #f0f0f0; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } h2 { color: #666; font-size: 18px; font-weight: normal; margin-bottom: 20px; } p { color: #777; line-height: 1.6; margin-bottom: 30px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { padding: 10px 20px; border-radius: 5px; color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s; } .social-links a:hover { opacity: 0.8; } .github { background: #333; } .twitter { background: #1DA1F2; } .linkedin { background: #0077B5; } keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } media (max-width: 480px) { .profile-card { padding: 30px 20px; } .avatar { width: 120px; height: 120px; } .social-links { flex-direction: column; gap: 10px; } } media (prefers-color-scheme: dark) { body { background: #121212; } .profile-card { background: #1e1e1e; color: white; } h1, h2, p { color: #e0e0e0; } } /style /head body div classprofile-card img srcimages/avatar.jpg alt个人头像 classavatar h1你的名字/h1 h2你的职业/头衔/h2 p你的个人简介.../p div classsocial-links a hrefhttps://github.com/yourname classgithubGitHub/a a hrefhttps://twitter.com/yourname classtwitterTwitter/a a hrefhttps://linkedin.com/in/yourname classlinkedinLinkedIn/a /div /div /body /html要部署这个页面你有几个简单选择本地使用直接双击HTML文件在浏览器中打开GitHub Pages免费托管静态网站Netlify Drop拖放上传即时发布提示GitHub Pages是最推荐的免费方案只需将文件上传到GitHub仓库并启用Pages功能即可获得yourusername.github.io的专属网址。
零基础5分钟搞定！用纯HTML+CSS手搓一个简约风个人主页（附完整源码）
发布时间：2026/6/8 4:50:40
零基础5分钟搞定用纯HTMLCSS手搓一个简约风个人主页附完整源码最近有个朋友问我想做个个人主页展示自己但完全不懂编程怎么办其实用最基础的HTMLCSS就能快速实现。今天我们就来手把手教你无需任何框架5分钟内打造一个简约又专业的个人主页。这个方案特别适合编程新手、自由职业者或想建立个人品牌的朋友。1. 准备工作认识HTML和CSS在开始之前我们先简单了解下这两个核心技术HTML网页的骨架负责内容结构CSS网页的皮肤负责样式美化不需要安装任何软件只需一个文本编辑器记事本、VS Code等和浏览器就能开始。下面是我们的项目文件结构my-website/ ├── index.html # 主页面文件 ├── style.css # 样式文件 └── images/ # 存放图片素材2. 基础HTML结构搭建我们先创建一个最简单的HTML5文档框架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title link relstylesheet hrefstyle.css /head body !-- 页面内容将放在这里 -- /body /html这个基础结构包含了文档类型声明语言设置字符编码视口设置确保移动端适配标题CSS文件链接3. 设计个人主页布局我们采用经典的卡片式布局包含以下元素个人头像姓名/头衔简短自我介绍社交链接对应的HTML代码如下div classprofile-card img srcimages/avatar.jpg alt个人头像 classavatar h1张三/h1 h2前端开发者 设计师/h2 p热爱创造美观实用的网页体验专注于HTML/CSS/JavaScript开发。/p div classsocial-links a href# classgithubGitHub/a a href# classtwitterTwitter/a a href# classlinkedinLinkedIn/a /div /div4. 用CSS美化页面现在我们来添加样式创建一个简约现代的外观。以下是核心CSS代码/* 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Segoe UI, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .profile-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 40px; text-align: center; max-width: 400px; width: 100%; transition: transform 0.3s ease; } .profile-card:hover { transform: translateY(-5px); } .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 5px solid #f0f0f0; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } h2 { color: #666; font-size: 18px; font-weight: normal; margin-bottom: 20px; } p { color: #777; line-height: 1.6; margin-bottom: 30px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { padding: 10px 20px; border-radius: 5px; color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s; } .social-links a:hover { opacity: 0.8; } .github { background: #333; } .twitter { background: #1DA1F2; } .linkedin { background: #0077B5; }5. 个性化定制指南现在你已经有了基础代码接下来是如何快速定制成你自己的主页5.1 更换头像准备一张正方形头像图片建议至少400×400像素将图片放入images文件夹修改HTML中的图片路径img srcimages/your-photo.jpg alt你的名字 classavatar5.2 修改文字内容直接编辑HTML中的这些部分h1你的名字/h1 h2你的职业/头衔/h2 p你的个人简介.../p5.3 更新社交链接找到social-links部分替换href值为你的真实社交账号链接div classsocial-links a hrefhttps://github.com/yourname classgithubGitHub/a a hrefhttps://twitter.com/yourname classtwitterTwitter/a a hrefhttps://linkedin.com/in/yourname classlinkedinLinkedIn/a /div5.4 调整配色方案要更改整体配色只需修改CSS中的颜色值/* 主色调调整 */ .profile-card { background: #你的颜色; } /* 按钮颜色 */ .github { background: #你的颜色; } .twitter { background: #你的颜色; } .linkedin { background: #你的颜色; }6. 进阶优化技巧想让你的主页更专业试试这些增强功能6.1 添加响应式设计确保在各种设备上都能良好显示media (max-width: 480px) { .profile-card { padding: 30px 20px; } .avatar { width: 120px; height: 120px; } .social-links { flex-direction: column; gap: 10px; } }6.2 添加动画效果让页面更有活力keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .profile-card { animation: fadeIn 0.6s ease-out; }6.3 添加暗黑模式支持适应系统偏好设置media (prefers-color-scheme: dark) { body { background: #121212; } .profile-card { background: #1e1e1e; color: white; } h1, h2, p { color: #e0e0e0; } }7. 完整源码与部署这是完整的HTML文件代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Segoe UI, sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .profile-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 40px; text-align: center; max-width: 400px; width: 100%; transition: transform 0.3s ease; animation: fadeIn 0.6s ease-out; } .profile-card:hover { transform: translateY(-5px); } .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 5px solid #f0f0f0; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } h2 { color: #666; font-size: 18px; font-weight: normal; margin-bottom: 20px; } p { color: #777; line-height: 1.6; margin-bottom: 30px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { padding: 10px 20px; border-radius: 5px; color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s; } .social-links a:hover { opacity: 0.8; } .github { background: #333; } .twitter { background: #1DA1F2; } .linkedin { background: #0077B5; } keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } media (max-width: 480px) { .profile-card { padding: 30px 20px; } .avatar { width: 120px; height: 120px; } .social-links { flex-direction: column; gap: 10px; } } media (prefers-color-scheme: dark) { body { background: #121212; } .profile-card { background: #1e1e1e; color: white; } h1, h2, p { color: #e0e0e0; } } /style /head body div classprofile-card img srcimages/avatar.jpg alt个人头像 classavatar h1你的名字/h1 h2你的职业/头衔/h2 p你的个人简介.../p div classsocial-links a hrefhttps://github.com/yourname classgithubGitHub/a a hrefhttps://twitter.com/yourname classtwitterTwitter/a a hrefhttps://linkedin.com/in/yourname classlinkedinLinkedIn/a /div /div /body /html要部署这个页面你有几个简单选择本地使用直接双击HTML文件在浏览器中打开GitHub Pages免费托管静态网站Netlify Drop拖放上传即时发布提示GitHub Pages是最推荐的免费方案只需将文件上传到GitHub仓库并启用Pages功能即可获得yourusername.github.io的专属网址。
和setCursor()怎么用)
