用ai写一个类百度贴吧首页

原创于 2025-08-26 06:06:56 发布 · 645 阅读

CC 4.0 BY-SA版权

文章标签：

用html5，写一个类百度贴吧的index，高质感，低运行资源

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>轻贴吧 Lite</title>

<style>
:root{
--brand:#2d7fff;
--bg:#f5f6fa;
--card:#fff;
--text:#333;
--sub:#666;
--border:#e8e8e8;
--radius:6px;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;}
body{background:var(--bg);color:var(--text);}
a{color:var(--text);text-decoration:none}
ul{list-style:none}
header{height:50px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:9;}
.logo{font-size:18px;font-weight:700;color:var(--brand)}
.search{display:flex;align-items:center;border:1px solid var(--border);border-radius:20px;padding-left:12px}
.search input{border:none;outline:none;width:180px;font-size:14px}
.search button{background:var(--brand);color:#fff;border:none;border-radius:20px;padding:4px 10px;margin:2px;cursor:pointer;font-size:12px}
.container{max-width:980px;margin:16px auto;display:grid;grid-template-columns:160px 1fr 220px;gap:16px;padding:0 8px}
aside{background:var(--card);border-radius:var(--radius);padding:12px;font-size:14px;position:sticky;top:70px}
aside ul li{line-height:30px;cursor:pointer;padding:0 6px;border-radius:var(--radius)}
aside ul li.active{background:var(--bg);color:var(--brand);font-weight:600}
main{background:var(--card);border-radius:var(--radius);overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--border);}
.tabs li{flex:1;text-align:center;padding:10px 0;font-size:14px;cursor:pointer}
.tabs li.active{color:var(--brand);border-bottom:2px solid var(--brand)}
.post{padding:12px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}
.post:last-child{border:none}
.post img{width:70px;height:50px;border-radius:var(--radius);object-fit:cover;background:#eee}
.post .info{flex:1}
.post .title{font-size:15px;font-weight:600;margin-bottom:4px}
.post .meta{font-size:12px;color:var(--sub)}
.right h3{font-size:14px;margin-bottom:8px}
.right ul li{line-height:26px;font-size:13px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer{text-align:center;font-size:12px;color:var(--sub);padding:20px 0}
@media(max-width:768px){
.container{grid-template-columns:1fr}
aside,.right{display:none}
}
</style>
</head>

<main>
<ul class="tabs">
<li class="active">推荐</li>
<li>最新</li>
<li>热门</li>
</ul>

<div id="list">


<div class="post">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Crect width='100%25' height='100%25' fill='%23e8e8e8'/%3E%3C/svg%3E">
<div class="info">
<div class="title">用纯HTML5写高质感“轻贴吧”，只要7 KB！</div>
<div class="meta">前端吧 · 轻贴君 · 1小时前 · 回复 36</div>
</div>
</div>

<div class="post">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Crect width='100%25' height='100%25' fill='%23e8e8e8'/%3E%3C/svg%3E">
<div class="info">
<div class="title">求助：为什么 flex 子元素不换行？</div>
<div class="meta">CSS吧 · 萌新 · 3小时前 · 回复 18</div>
</div>
</div>

<div class="post">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Crect width='100%25' height='100%25' fill='%23e8e8e8'/%3E%3C/svg%3E">
<div class="info">
<div class="title">2025 最新前端面试题汇总（持续更新）</div>
<div class="meta">求职吧 · 面霸 · 5小时前 · 回复 128</div>
</div>
</div>

<div class="post">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Crect width='100%25' height='100%25' fill='%23e8e8e8'/%3E%3C/svg%3E">
<div class="info">
<div class="title">【讨论】React vs Vue，2025 你选谁？</div>
<div class="meta">前端交流 · 框架党 · 昨天 · 回复 312</div>
</div>
</div>

<div class="post">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Crect width='100%25' height='100%25' fill='%23e8e8e8'/%3E%3C/svg%3E">
<div class="info">
<div class="title">分享：一行 CSS 让滚动条瞬间隐形</div>
<div class="meta">CSS技巧 · 老司机 · 昨天 · 回复 99</div>
</div>
</div>

<div class="post">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Crect width='100%25' height='100%25' fill='%23e8e8e8'/%3E%3C/svg%3E">
<div class="info">
<div class="title">如何优雅地减少首屏加载体积？</div>
<div class="meta">性能优化 · 优化酱 · 2天前 · 回复 256</div>
</div>
</div>
</div>
</main>

<aside class="right">
<h3>贴吧热搜</h3>
<ul>
<li>1. HTML5轻贴吧源码</li>
<li>2. 前端面试题2025</li>
<li>3. 一行CSS滚动条隐藏</li>
<li>4. React VS Vue2025</li>
<li>5. 性能优化技巧</li>
</ul>
</aside>
</div>