在HTML中创建个人微博页面，需设计用户信息区、微博发布表单和动态流，使用“划分模块，结合CSS美化界面，通过JavaScript实现交互功能如发布、点赞和评论，核心结构包括头部个人信息展示、中部微博列表展示及底部导航栏。
个人微博页面设计与实现
下面是一个符合现代网页设计标准的个人微博页面HTML实现,注重用户体验、响应式设计和SEO优化：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="个人微博分享平台，分享生活点滴、技术见解和行业观察">
<meta name="keywords" content="个人微博,生活分享,技术博客,社交媒体">
<meta name="author" content="微博博主">我的个人微博 | 分享生活与思考</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
:root {
--primary: #1da1f2;
--secondary: #14171a;
--light: #f5f8fa;
--dark: #657786;
--border: #e1e8ed;
--card-bg: #ffffff;
--shadow: rgba(101, 119, 134, 0.2);
}
body {
background-color: var(--light);
color: var(--secondary);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: linear-gradient(135deg, #1da1f2, #0066cc);
color: white;
padding: 1.5rem 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo i {
font-size: 2.5rem;
}
.logo h1 {
font-size: 1.8rem;
font-weight: 700;
}
nav ul {
display: flex;
list-style: none;
gap: 2rem;
}
nav a {
color: white;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
padding: 8px 12px;
border-radius: 20px;
}
nav a:hover, nav a.active {
background-color: rgba(255, 255, 255, 0.2);
}
/* 个人简介区域 */
.profile-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 0;
background-color: var(--card-bg);
margin: 2rem 0;
border-radius: 15px;
box-shadow: 0 5px 15px var(--shadow);
position: relative;
overflow: hidden;
}
.profile-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px;
background: linear-gradient(135deg, #1da1f2, #0066cc);
z-index: 0;
}
.profile-pic {
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid white;
object-fit: cover;
z-index: 1;
margin-bottom: 20px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.profile-info {
text-align: center;
padding: 0 20px;
z-index: 1;
}
.profile-info h2 {
font-size: 2rem;
margin-bottom: 10px;
color: var(--secondary);
}
.profile-info .bio {
font-size: 1.1rem;
color: var(--dark);
max-width: 700px;
margin: 0 auto 20px;
}
.stats {
display: flex;
gap: 2rem;
margin: 20px 0;
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
}
.stat-label {
font-size: 0.9rem;
color: var(--dark);
}
/* 微博内容区域 */
.content-container {
display: grid;
grid-template-columns: 1fr 350px;
gap: 30px;
margin-bottom: 3rem;
}
.weibo-feed {
display: flex;
flex-direction: column;
gap: 25px;
}
.weibo-card {
background-color: var(--card-bg);
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px var(--shadow);
transition: transform 0.3s ease;
}
.weibo-card:hover {
transform: translateY(-5px);
}
.weibo-header {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
}
.user-info {
flex-grow: 1;
}
.username {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 3px;
}
.post-time {
color: var(--dark);
font-size: 0.9rem;
}
.weibo-content {
margin-bottom: 20px;
font-size: 1.05rem;
line-height: 1.7;
}
.weibo-image {
width: 100%;
border-radius: 12px;
margin-bottom: 15px;
max-height: 500px;
object-fit: cover;
}
.weibo-actions {
display: flex;
justify-content: space-around;
border-top: 1px solid var(--border);
padding-top: 15px;
}
.action-btn {
display: flex;
align-items: center;
gap: 8px;
color: var(--dark);
cursor: pointer;
transition: color 0.3s ease;
font-weight: 600;
}
.action-btn:hover {
color: var(--primary);
}
/* 侧边栏 */
.sidebar {
display: flex;
flex-direction: column;
gap: 25px;
}
.sidebar-card {
background-color: var(--card-bg);
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px var(--shadow);
}
.sidebar-title {
font-size: 1.3rem;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary);
color: var(--secondary);
}
.trending-list {
list-style: none;
}
.trending-item {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.trending-item:last-child {
border-bottom: none;
}
.trending-tag {
font-weight: 600;
color: var(--primary);
display: block;
margin-bottom: 5px;
}
.trending-count {
color: var(--dark);
font-size: 0.9rem;
}
.follow-suggestions {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
.suggestion {
display: flex;
align-items: center;
gap: 12px;
}
.suggestion-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
.suggestion-info {
flex-grow: 1;
}
.suggestion-name {
font-weight: 600;
margin-bottom: 3px;
}
.suggestion-bio {
font-size: 0.9rem;
color: var(--dark);
}
.follow-btn {
background-color: var(--primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.follow-btn:hover {
background-color: #0d8bd9;
}
/* 页脚 */
footer {
background-color: var(--secondary);
color: white;
padding: 3rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.footer-column h3 {
font-size: 1.2rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-column h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background-color: var(--primary);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #aab8c2;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(--primary);
}
.copyright {
text-align: center;
padding-top: 2rem;
margin-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #aab8c2;
font-size: 0.9rem;
}
.social-icons {
display: flex;
gap: 15px;
margin-top: 15px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.social-icon:hover {
background-color: var(--primary);
transform: translateY(-3px);
}
/* 响应式设计 */
@media (max-width: 992px) {
.content-container {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 15px;
}
nav ul {
gap: 1rem;
}
.stats {
flex-wrap: wrap;
justify-content: center;
}
.footer-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
nav ul {
flex-wrap: wrap;
justify-content: center;
}
.profile-section {
padding: 2rem 0;
}
.weibo-card {
padding: 20px;
}
.weibo-actions {
flex-wrap: wrap;
gap: 15px;
}
}
</style>
</head>
<body>
<!-- 头部导航 -->
<header>
<div class="container header-content">
<div class="logo">
<i class="fab fa-weibo"></i>
<h1>我的个人微博</h1>
</div>
<nav>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">热门</a></li>
<li><a href="#">发现</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">关于我</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<!-- 个人简介区域 -->
<section class="profile-section">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="博主头像" class="profile-pic">
<div class="profile-info">
<h2>张明</h2>
<p class="bio">前端开发工程师 | 技术博主 | 旅行爱好者 | 分享编程技巧、生活感悟和旅行见闻，相信技术改变生活，代码书写未来。</p>
<div class="stats">
<div class="stat-item">
<div class="stat-value">1,258</div>
<div class="stat-label">关注</div>
</div>
<div class="stat-item">
<div class="stat-value">8.9K</div>
<div class="stat-label">粉丝</div>
</div>
<div class="stat-item">
<div class="stat-value">1,024</div>
<div class="stat-label">微博</div>
</div>
<div class="stat-item">
<div class="stat-value">12.5K</div>
<div class="stat-label">点赞</div>
</div>
</div>
</div>
</section>
<!-- 主要内容区域 -->
<div class="content-container">
<!-- 微博内容 -->
<main class="weibo-feed">
<article class="weibo-card">
<div class="weibo-header">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="用户头像" class="avatar">
<div class="user-info">
<div class="username">张明</div>
<div class="post-time">2025年8月15日 · 14:30 · <i class="fas fa-globe-asia"></i></div>
</div>
</div>
<div class="weibo-content">
<p>刚刚完成了新项目的上线，这次我们团队使用Vue3 + TypeScript重构了整个前端架构，新版本在性能上有显著提升，首屏加载时间减少了40%！🚀</p>
<p>特别感谢团队成员的辛勤付出，连续几周的加班终于有了回报，技术栈升级虽然痛苦，但看到最终成果还是值得的！💻</p>
<p>#前端开发 #Vue3 #TypeScript #性能优化</p>
</div>
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="代码截图" class="weibo-image">
<div class="weibo-actions">
<div class="action-btn"><i class="far fa-comment"></i> 128</div>
<div class="action-btn"><i class="fas fa-retweet"></i> 56</div>
<div class="action-btn"><i class="far fa-heart"></i> 324</div>
<div class="action-btn"><i class="far fa-bookmark"></i> 收藏</div>
<div class="action-btn"><i class="fas fa-share-alt"></i> 分享</div>
</div>
</article>
<article class="weibo-card">
<div class="weibo-header">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="用户头像" class="avatar">
<div class="user-info">
<div class="username">张明</div>
<div class="post-time">2025年8月12日 · 09:15 · <
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/20588.html
