Skip to content

Commit 1ed4a5f

Browse files
Add files via upload
1 parent 0332a60 commit 1ed4a5f

1 file changed

Lines changed: 99 additions & 0 deletions

File tree

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>博客列表</title>
6+
<style>
7+
/* 搜索框样式 */
8+
.search-container {
9+
margin-bottom: 20px;
10+
text-align: center;
11+
}
12+
13+
.search-input {
14+
width: 400px;
15+
padding: 5px;
16+
margin-right: 10px;
17+
18+
}
19+
/* 返回按钮样式 */
20+
.return-button {
21+
padding: 5px;
22+
23+
}
24+
.search-button {
25+
padding: 5px;
26+
}
27+
28+
/* 外部容器样式 */
29+
.blog-list-container {
30+
display: flex;
31+
flex-wrap: wrap;
32+
justify-content: center;
33+
align-items: flex-start;
34+
}
35+
36+
/* 博客卡片样式 */
37+
.blog-card {
38+
width: calc(50% - 20px);
39+
margin: 10px;
40+
padding: 20px;
41+
background-color: #33B8EC;
42+
border-radius: 5px;
43+
display: flex;
44+
align-items: center;
45+
box-shadow: 0 0 5px 5px salmon;
46+
}
47+
48+
/* 左侧图标样式 */
49+
.blog-icon {
50+
float: left;
51+
margin-bottom: 20px;
52+
width: 120px;
53+
height: 120px;
54+
border-radius: 15px;
55+
}
56+
57+
/* 右侧内容样式 */
58+
.blog-content {
59+
flex-grow: 1;
60+
float: left;
61+
padding-left: 10px;
62+
63+
}
64+
65+
/* 标题样式 */
66+
.blog-title {
67+
font-size: 18px;
68+
font-weight: bold;
69+
margin-bottom: 10px;
70+
}
71+
72+
/* 内容样式 */
73+
.blog-description {
74+
font-size: 14px;
75+
color: black;
76+
font-weight: bolder;
77+
}
78+
79+
/* 关键字高亮样式 */
80+
.highlight {
81+
background-color: yellow;
82+
font-weight: bold;
83+
}
84+
body{
85+
background-image: linear-gradient(to right, whitesmoke, lightskyblue);
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
<div class="search-container">
91+
<input type="text" class="search-input" id="searchInput" placeholder="输入关键字搜索博客">
92+
<button class="search-button" id="searchButton">搜索</button>
93+
<button class="return-button" id="returnButton">返回</button>
94+
</div>
95+
<div class="blog-list-container" id="blogListContainer"></div>
96+
<script src="../../js/eff.js">
97+
</script>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)