Skip to content

Commit 7655a35

Browse files
FfeixingFfeixing
authored
Add files via upload
1 parent 97df498 commit 7655a35

1 file changed

Lines changed: 223 additions & 0 deletions

File tree

‎free.html‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>合集页面</title>
7+
<style>
8+
/* CSS 样式 */
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: Arial, sans-serif;
17+
background-color: #f5f5f5;
18+
}
19+
20+
.header {
21+
text-align: center;
22+
padding: 20px;
23+
background-color: #0073e6;
24+
color: white;
25+
}
26+
27+
.banner {
28+
width: 100%;
29+
height: auto;
30+
max-height: 200px;
31+
}
32+
33+
.category {
34+
display: flex;
35+
justify-content: space-around;
36+
padding: 10px;
37+
background-color: #fff;
38+
border-top: 1px solid #ddd;
39+
border-bottom: 1px solid #ddd;
40+
}
41+
42+
.category span {
43+
font-weight: bold;
44+
color: #0073e6;
45+
}
46+
47+
.article-list {
48+
display: flex;
49+
flex-direction: column;
50+
margin: 10px;
51+
}
52+
53+
.article-item {
54+
display: flex;
55+
align-items: center;
56+
padding: 10px;
57+
background-color: white;
58+
margin-bottom: 10px;
59+
border-radius: 8px;
60+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
61+
text-decoration: none;
62+
color: black;
63+
cursor: pointer;
64+
}
65+
66+
.article-image {
67+
width: 80px;
68+
height: 80px;
69+
border-radius: 5px;
70+
margin-right: 10px;
71+
}
72+
73+
.article-info h2 {
74+
font-size: 16px;
75+
margin-bottom: 5px;
76+
}
77+
78+
.date, .views {
79+
font-size: 12px;
80+
color: #777;
81+
}
82+
83+
/* 隐藏文章内容部分 */
84+
#article {
85+
display: none;
86+
padding: 20px;
87+
}
88+
89+
#article h1 {
90+
font-size: 22px;
91+
color: #0073e6;
92+
margin-bottom: 10px;
93+
}
94+
95+
#article .date {
96+
font-size: 12px;
97+
color: #777;
98+
}
99+
100+
#article .content {
101+
margin-top: 10px;
102+
line-height: 1.6;
103+
}
104+
105+
#article .content img {
106+
max-width: 100%;
107+
height: auto;
108+
margin: 10px 0;
109+
border-radius: 8px;
110+
}
111+
112+
#back-button {
113+
margin-top: 20px;
114+
padding: 10px;
115+
background-color: #0073e6;
116+
color: white;
117+
border: none;
118+
border-radius: 5px;
119+
cursor: pointer;
120+
}
121+
</style>
122+
</head>
123+
<body>
124+
<div class="header">
125+
<img src="https://static.codemao.cn/pickduck/rkTUE7x71l.png?hash=FqieR_WVdDpclRxBjEZQmaN9STKB" alt="横幅" class="banner">
126+
<h1>影视音乐类合集</h1>
127+
</div>
128+
129+
<div class="category">
130+
<span>全部</span>
131+
<span>最热</span>
132+
</div>
133+
134+
135+
136+
137+
138+
139+
140+
141+
<div class="article-list">
142+
<div class="article-item" onclick="showArticle(1)">
143+
<img src="https://static.codemao.cn/pickduck/rk2T0mg7yx.jpeg?hash=Fv4YGZWqeiOKtc51TbR2rBi0Z3a9" alt="文章图片" class="article-image">
144+
<div class="article-info">
145+
146+
<h2><a href="https://tools.liumingye.cn/music"style='text-decoration:none;color:black;'>免费音乐｜myfreemp3</a></h2>
147+
<p class="date">10-31</p>
148+
<p class="views">-- 次浏览</p>
149+
</div>
150+
</div>
151+
<div class="article-item" onclick="showArticle(2)">
152+
<img src="https://static.codemao.cn/pickduck/rJYcCmlXye.jpeg?hash=Fpcae8G_Ee07M60u_QI-S2C0pEHG" alt="文章图片" class="article-image">
153+
<div class="article-info">
154+
<h2><a href="https://www.ncat21.com"style='text-decoration:none;color:black;'>免费影视｜网飞猫&可可影视</a></h2>
155+
<p class="date">10-31</p>
156+
<p class="views">-- 次浏览</p>
157+
</div>
158+
</div>
159+
<div class="article-item" onclick="showArticle(3)">
160+
<img src="https://miaosou.fun/static/img/logo.3174f89.png" alt="文章图片" class="article-image">
161+
<div class="article-info">
162+
<h2><a href="https://miaosou.fun/info?searchKey="style='text-decoration:none;color:black;'>免费搜索｜秒搜</a></h2>
163+
<p class="date">10-31</p>
164+
<p class="views">-- 次浏览</p>
165+
</div>
166+
</div>
167+
</div>
168+
169+
<!-- 模拟文章页面内容，用 JavaScript 动态填充 -->
170+
<div id="article">
171+
<h1 id="article-title"></h1>
172+
<p class="date" id="article-date"></p>
173+
<div class="content" id="article-content"></div>
174+
<button id="back-button" onclick="goBack()">返回</button>
175+
</div>
176+
177+
<script>
178+
// 定义每篇文章的内容
179+
const articles = {
180+
1: {
181+
title: "免费音乐 | myfreemp3在线免费音乐",
182+
date: "2024-10-31",
183+
content: "https://tools.liumingye.cn/music/ 【myfreemp3音乐软件】；支持免费畅听全网音乐；<br>同类产品：趣加音乐（趣味加倍科技自行开发）强烈推荐下载App来使用，支持安卓10+、鸿蒙<br><img src='https://static.codemao.cn/pickduck/ByV9oXlQJx.jpeg?hash=FhajzNBdm1k13PtCHawxfhpx61g8' alt='文章配图'>"
184+
},
185+
2: {
186+
title: "免费影视 | 网飞猫&可可影视",
187+
date: "2024-10-31",
188+
content: "网飞猫：https://www.ncat21.com<br>可可影视：https://www.keke1.app<br><img src='https://static.codemao.cn/pickduck/HJSXn7xXkg.jpeg?hash=FnjnWqW7zkS716W0aSyzy2bh61dF' alt='文章配图'>在线观看全网影视"
189+
},
190+
3: {
191+
title: "免费搜索 | 秒搜",
192+
date: "2024-10-31",
193+
content: "秒搜--坚持做最好用的网盘资源搜索引擎！<br>https://miaosou.fun/info?searchKey=#<br><img src='https://static.codemao.cn/pickduck/rk0fAmemyx.jpeg?hash=FrjA8QB5LhNA6Rffh5qEwHo_HGvT' alt='文章配图'>"
194+
}
195+
};
196+
197+
// 显示文章内容
198+
function showArticle(articleId) {
199+
// 获取文章内容
200+
const article = articles[articleId];
201+
if (article) {
202+
document.getElementById('article-title').innerText = article.title;
203+
document.getElementById('article-date').innerText = article.date;
204+
document.getElementById('article-content').innerHTML = article.content; // 使用 innerHTML 支持图片和换行
205+
206+
// 隐藏主页，显示文章内容
207+
document.querySelector('.header').style.display = 'none';
208+
document.querySelector('.category').style.display = 'none';
209+
document.querySelector('.article-list').style.display = 'none';
210+
document.getElementById('article').style.display = 'block';
211+
}
212+
}
213+
214+
// 返回到主页
215+
function goBack() {
216+
document.querySelector('.header').style.display = 'block';
217+
document.querySelector('.category').style.display = 'flex';
218+
document.querySelector('.article-list').style.display = 'flex';
219+
document.getElementById('article').style.display = 'none';
220+
}
221+
</script>
222+
</body>
223+
</html>

0 commit comments

Comments
 (0)