html5手机微博模板-网站模板-锦华智联科技

响应式设计: 使用 Meta Viewport 标签确保在所有手机设备上都能完美显示。
现代化 UI: 采用简洁、卡片式布局,符合当前主流移动应用的设计风格。
核心功能: 包含发布微博、点赞、评论、转发等核心交互。
HTML5 语义化标签: 使用 <header>, <main>, <article>, <footer> 等标签,使结构更清晰。
CSS3 动画: 为点赞、评论等操作添加平滑的过渡效果,提升用户体验。
可扩展性: 代码结构清晰，方便你后续添加更多功能，如搜索、关注、私信等。

最终效果预览

想象一下一个手机微博 App 的界面，顶部是导航栏，中间是微博信息流，底部是发布按钮，每条微博都是一个独立的卡片，包含用户头像、昵称、发布时间、微博内容、图片、以及底部的互动按钮（点赞、评论、转发）。

第一步：HTML 代码 (`index.html`)

这是整个模板的骨架，使用了 HTML5 的语义化标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">手机微博</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入一个简单的图标库，这里使用 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="main-header">
        <div class="logo">
            <i class="fab fa-weibo"></i> 微博
        </div>
        <nav class="header-nav">
            <a href="#" class="active"><i class="fas fa-home"></i></a>
            <a href="#"><i class="fas fa-compass"></i></a>
            <a href="#"><i class="fas fa-comment-dots"></i></a>
            <a href="#"><i class="fas fa-user"></i></a>
        </nav>
    </header>
    <!-- 主要内容区域 -->
    <main class="feed-container">
        <!-- 发布框 -->
        <section class="post-box">
            <textarea placeholder="分享新鲜事..." id="postContent"></textarea>
            <button id="postBtn" class="post-btn">发布</button>
        </section>
        <!-- 微博信息流 -->
        <section class="feed-list" id="feedList">
            <!-- 微博卡片 1 -->
            <article class="feed-card">
                <div class="user-info">
                    <img src="https://via.placeholder.com/50" alt="用户头像" class="avatar">
                    <div class="user-meta">
                        <span class="username">前端小王</span>
                        <span class="post-time">5分钟前</span>
                    </div>
                </div>
                <div class="feed-content">
                    <p>刚刚完成了一个手机微博模板的开发，使用纯 HTML5, CSS3 和原生 JavaScript，感觉响应式设计真的太重要了！</p>
                    <div class="feed-images">
                        <img src="https://via.placeholder.com/300/007bff/ffffff?text=Image1" alt="微博配图">
                    </div>
                </div>
                <div class="feed-actions">
                    <button class="action-btn like-btn" data-liked="false">
                        <i class="far fa-heart"></i> <span class="like-count">128</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i> <span>32</span>
                    </button>
                    <button class="action-btn repost-btn">
                        <i class="fas fa-retweet"></i> <span>15</span>
                    </button>
                </div>
            </article>
            <!-- 微博卡片 2 -->
            <article class="feed-card">
                <div class="user-info">
                    <img src="https://via.placeholder.com/50" alt="用户头像" class="avatar">
                    <div class="user-meta">
                        <span class="username">设计师小李</span>
                        <span class="post-time">1小时前</span>
                    </div>
                </div>
                <div class="feed-content">
                    <p>今天天气真好，适合出去走走，分享一张随手拍的照片。</p>
                    <div class="feed-images">
                        <img src="https://via.placeholder.com/300/28a745/ffffff?text=Image2" alt="微博配图">
                        <img src="https://via.placeholder.com/300/ffc107/000000?text=Image3" alt="微博配图">
                    </div>
                </div>
                <div class="feed-actions">
                    <button class="action-btn like-btn" data-liked="false">
                        <i class="far fa-heart"></i> <span class="like-count">256</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i> <span>64</span>
                    </button>
                    <button class="action-btn repost-btn">
                        <i class="fas fa-retweet"></i> <span>42</span>
                    </button>
                </div>
            </article>
            <!-- 更多微博卡片可以在这里动态添加... -->
        </section>
    </main>
    <!-- 底部发布按钮 -->
    <footer class="post-footer">
        <button id="fabBtn" class="fab">
            <i class="fas fa-plus"></i>
        </button>
    </footer>
    <script src="script.js"></script>
</body>
</html>

第二步：CSS 代码 (`style.css`)

这是模板的样式，负责美化界面，使其看起来像一个真正的手机 App。

/* 全局重置和基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}
/* 顶部导航栏 */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    z-index: 1000;
}
.logo {
    font-size: 20px;
    font-weight: bold;
    color: #e6162d; /* 微博红 */
}
.logo i {
    margin-right: 5px;
}
.header-nav {
    display: flex;
    gap: 20px;
}
.header-nav a {
    color: #666;
    text-decoration: none;
    font-size: 18px;
}
.header-nav a.active {
    color: #e6162d;
}
区域 */
.feed-container {
    padding-top: 70px; /* 为固定头部留出空间 */
    padding-bottom: 80px; /* 为底部按钮留出空间 */
}
/* 发布框 */
.post-box {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
}
.post-box textarea {
    width: 100%;
    height: 80px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    resize: none;
    font-family: inherit;
}
.post-btn {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 10px;
    background-color: #e6162d;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.post-btn:hover {
    background-color: #c40e1f;
}
/* 微博卡片 */
.feed-card {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px;
}
.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}
.user-meta .username {
    font-weight: bold;
    font-size: 16px;
    display: block;
}
.post-time {
    font-size: 12px;
    color: #999;
}
.feed-content p {
    margin-bottom: 10px;
    font-size: 15px;
}
.feed-images {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}
.feed-images img {
    width: calc(50% - 5px);
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}
/* 互动按钮 */
.feed-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
}
.action-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    transition: color 0.3s;
}
.action-btn i {
    font-size: 16px;
}
.action-btn.liked {
    color: #e6162d;
}
.action-btn.liked i {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* 使用实心图标 */
}
/* 底部发布按钮 */
.post-footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}
.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #e6162d;
    color: white;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

第三步：JavaScript 代码 (`script.js`)

这是模板的交互逻辑，负责处理点赞、发布微博等用户操作。

document.addEventListener('DOMContentLoaded', () => {
    // 点赞功能
    const likeButtons = document.querySelectorAll('.like-btn');
    likeButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            const icon = this.querySelector('i');
            const countSpan = this.querySelector('span');
            let count = parseInt(countSpan.textContent);
            const isLiked = this.getAttribute('data-liked') === 'true';
            if (isLiked) {
                // 取消点赞
                this.classList.remove('liked');
                icon.classList.remove('fas');
                icon.classList.add('far');
                countSpan.textContent = count - 1;
                this.setAttribute('data-liked', 'false');
            } else {
                // 点赞
                this.classList.add('liked');
                icon.classList.remove('far');
                icon.classList.add('fas');
                countSpan.textContent = count + 1;
                this.setAttribute('data-liked', 'true');
            }
        });
    });
    // 发布微博功能
    const postBtn = document.getElementById('postBtn');
    const postContent = document.getElementById('postContent');
    const feedList = document.getElementById('feedList');
    postBtn.addEventListener('click', () => {
        const content = postContent.value.trim();
        if (!content) {
            alert('请输入微博内容！');
            return;
        }
        // 创建新的微博卡片
        const newCard = document.createElement('article');
        newCard.className = 'feed-card';
        newCard.style.opacity = '0'; // 用于淡入动画
        const now = new Date();
        const timeStr = '刚刚';
        newCard.innerHTML = `
            <div class="user-info">
                <img src="https://via.placeholder.com/50" alt="用户头像" class="avatar">
                <div class="user-meta">
                    <span class="username">我</span>
                    <span class="post-time">${timeStr}</span>
                </div>
            </div>
            <div class="feed-content">
                <p>${content}</p>
            </div>
            <div class="feed-actions">
                <button class="action-btn like-btn" data-liked="false">
                    <i class="far fa-heart"></i> <span class="like-count">0</span>
                </button>
                <button class="action-btn comment-btn">
                    <i class="far fa-comment"></i> <span>0</span>
                </button>
                <button class="action-btn repost-btn">
                    <i class="fas fa-retweet"></i> <span>0</span>
                </button>
            </div>
        `;
        // 将新微博插入到列表顶部
        feedList.prepend(newCard);
        // 添加淡入动画
        setTimeout(() => {
            newCard.style.transition = 'opacity 0.5s ease-in-out';
            newCard.style.opacity = '1';
        }, 10);
        // 清空输入框
        postContent.value = '';
        // 为新微博的点赞按钮绑定事件
        const newLikeBtn = newCard.querySelector('.like-btn');
        newLikeBtn.addEventListener('click', function() {
            const icon = this.querySelector('i');
            const countSpan = this.querySelector('span');
            let count = parseInt(countSpan.textContent);
            const isLiked = this.getAttribute('data-liked') === 'true';
            if (isLiked) {
                this.classList.remove('liked');
                icon.classList.remove('fas');
                icon.classList.add('far');
                countSpan.textContent = count - 1;
                this.setAttribute('data-liked', 'false');
            } else {
                this.classList.add('liked');
                icon.classList.remove('far');
                icon.classList.add('fas');
                countSpan.textContent = count + 1;
                this.setAttribute('data-liked', 'true');
            }
        });
    });
    // 底部悬浮按钮点击事件（可以扩展为弹出发布框）
    const fabBtn = document.getElementById('fabBtn');
    const postBox = document.querySelector('.post-box');
    let isPostBoxVisible = true;
    fabBtn.addEventListener('click', () => {
        if (isPostBoxVisible) {
            postBox.style.display = 'none';
            fabBtn.innerHTML = '<i class="fas fa-edit"></i>';
        } else {
            postBox.style.display = 'block';
            postBox.scrollIntoView({ behavior: 'smooth' });
            fabBtn.innerHTML = '<i class="fas fa-plus"></i>';
        }
        isPostBoxVisible = !isPostBoxVisible;
    });
});

如何使用

创建文件: 创建三个文件，分别命名为 index.html、style.css 和 script.js。
复制代码: 将上面提供的代码分别复制到对应的文件中。
打开文件: 在浏览器中直接打开 index.html 文件，为了获得最佳体验，建议使用 Chrome 或 Safari 等现代浏览器，或者使用浏览器的“设备模拟”功能来查看手机端效果。

如何扩展和优化

这个模板是一个非常好的起点,你可以基于它进行扩展：

动态加载数据: 使用 fetch API 从后端服务器获取微博数据，而不是写死在 HTML 中。
评论功能: 点击评论按钮时,可以动态展开一个评论输入框和评论列表。
用户登录/注册: 添加登录和注册页面,让用户可以发布自己的微博。
图片上传: 使用 <input type="file"> 让用户可以选择本地的图片上传。
搜索功能: 在顶部导航栏添加一个搜索框。
关注/粉丝: 添加关注按钮,实现关注和取关的逻辑。
优化性能: 对于大量的微博数据，可以使用“无限滚动”（Infinite Scroll）来代替分页,提升用户体验。

希望这个模板能帮助你快速开始你的手机微博项目！

html5手机微博模板

最终效果预览

第一步：HTML 代码 (index.html)

第二步：CSS 代码 (style.css)

第三步：JavaScript 代码 (script.js)

如何使用

如何扩展和优化

第一步：HTML 代码 (`index.html`)

第二步：CSS 代码 (`style.css`)

第三步：JavaScript 代码 (`script.js`)