File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change 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 >
You can’t perform that action at this time.
0 commit comments