d:\wwwroot\wuchunhua\blog\index.html
001:
<!DOCTYPE html>
002:
<html lang="zh-CN">
003:
<head>
004:
<meta charset="UTF-8">
005:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
006:
<title>个人博客</title>
007:
<style>
008:
* {
009:
margin: 0;
010:
padding: 0;
011:
box-sizing: border-box;
012:
}
013:
014:
body {
015:
font-family: Arial, sans-serif;
016:
background-color: #f8f9fa;
017:
padding: 0;
018:
margin: 0;
019:
}
020:
021:
.container {
022:
display: flex;
023:
margin-top: 2.5vh;
024:
padding: 0 5vw;
025:
min-height: 100vh;
026:
}
027:
028:
.left-column {
029:
width: 15%;
030:
background-color: white;
031:
border-right: none;
032:
border-left: 3px solid #E1BE97;
033:
}
034:
035:
.right-column {
036:
width: 85%;
037:
background-color: white;
038:
padding: 20px;
039:
}
040:
041:
.blog-title {
042:
background-color: white;
043:
border-right: 1px solid #F9F4E9;
044:
padding-left: 20%;
045:
padding-top: 15%;
046:
padding-bottom: 15%;
047:
}
048:
049:
.blog-title h1 {
050:
font-size: 2vh;
051:
color: #664401;
052:
text-align: center;
053:
padding-left: 20%;
054:
}
055:
056:
.nav-menu {
057:
padding: 30px 20% 20px 20%;
058:
}
059:
060:
.nav-item {
061:
display: block;
062:
font-size: 1.8vh;
063:
color: #666;
064:
margin-bottom: 20px;
065:
text-decoration: none;
066:
cursor: pointer;
067:
}
068:
069:
.nav-item:hover {
070:
color: #664401;
071:
font-weight: bold;
072:
}
073:
074:
.section-title {
075:
font-size: 2.5vh;
076:
color: black;
077:
margin-bottom: 20px;
078:
}
079:
080:
.notes-container {
081:
display: flex;
082:
flex-wrap: wrap;
083:
gap: 40px;
084:
margin-bottom: 40px;
085:
}
086:
087:
.note-card {
088:
background-color: #F9F4E9;
089:
border-radius: 10px;
090:
padding: 15px;
091:
width: calc(33.333% - 40px);
092:
min-width: 200px;
093:
transition: border 0.3s;
094:
}
095:
096:
.note-card:hover {
097:
border: 1px solid #E1BE97;
098:
}
099:
100:
.note-title {
101:
font-size: 1.5vh;
102:
color: black;
103:
margin-bottom: 5px;
104:
}
105:
106:
.note-date {
107:
font-size: 1vh;
108:
color: gray;
109:
}
110:
111:
.blog-item {
112:
display: flex;
113:
margin-bottom: 30px;
114:
align-items: center;
115:
}
116:
117:
.blog-image {
118:
width: 500px;
119:
height: 120px;
120:
object-fit: cover;
121:
border-radius: 5px;
122:
margin-right: 20px;
123:
}
124:
125:
.blog-content {
126:
flex: 1;
127:
}
128:
129:
.blog-content h3 {
130:
font-size: 2.5vh;
131:
color: black;
132:
margin-bottom: 10px;
133:
}
134:
135:
.blog-content p {
136:
font-size: 1.5vh;
137:
color: #555;
138:
line-height: 1.5;
139:
}
140:
</style>
141:
</head>
142:
<body>
143:
<div class="container">
144:
<div class="left-column">
145:
<div class="blog-title">
146:
<h1>个人博客</h1>
147:
</div>
148:
<div class="nav-menu">
149:
<div class="nav-item">主页</div>
150:
<div class="nav-item">关于?/div>
151:
<div class="nav-item">博客</div>
152:
<div class="nav-item">笔记</div>
153:
<div class="nav-item">知识?/div>
154:
<div class="nav-item">智能?/div>
155:
</div>
156:
</div>
157:
158:
<div class="right-column">
159:
<h2 class="section-title">我的笔记</h2>
160:
<div class="notes-container">
161:
<div class="note-card">
162:
<div class="note-title">生活中的无形画布</div>
163:
<div class="note-date">2024.10.5</div>
164:
</div>
165:
<div class="note-card">
166:
<div class="note-title">塑€AI的魔?/div>
167:
<div class="note-date">2024.10.10</div>
168:
</div>
169:
<div class="note-card">
170:
<div class="note-title">园艺中生命哲学的呼吸?/div>
171:
<div class="note-date">2024.10.15</div>
172:
</div>
173:
</div>
174:
175:
<h2 class="section-title">€近博?/h2>
176:
<div class="blog-item">
177:
<img src="https://img.alicdn.com/imgextra/i2/O1CN01VjWLAB21Zb4eAatD8_!!6000000006999-2-tps-928-1232.png" alt="活力的源泉：健康生活的艺术与科学" class="blog-image">
178:
<div class="blog-content">
179:
<h3>活力的源泉：健康生活的艺术与科学</h3>
180:
<p>健康生活不仅仅是关于身体的活力，它是€种全面的生活方式，涉及到身体、心灵和精神的和谐统€。在这个快节奏的世界中，我们如何找到保持活力的秘€？首先，我们€要理解健康生活的艺术—€这包括了营养均衡的饮食、规律的运动...</p>
181:
</div>
182:
</div>
183:
<div class="blog-item">
184:
<img src="https://img.alicdn.com/imgextra/i1/O1CN01n5bYVC1LISOAf9gSM_!!6000000001276-2-tps-1232-928.png" alt="在风景与人群中寻找内心的宁静角落" class="blog-image">
185:
<div class="blog-content">
186:
<h3>在风景与人群中寻找内心的宁静角落</h3>
187:
<p>在喧嚣的城市中，我们常常感到内心的喧哗和不安。然而，即使在最繁忙的街道和€拥挤的人群中，我们也能找到一片属于自己的宁静角落。这€要我们获得一种内在的力量，这是一种能够在外部世界的纷扰中保持内心平静的能?..</p>
188:
</div>
189:
</div>
190:
<div class="blog-item">
191:
<img src="https://img.alicdn.com/imgextra/i2/O1CN01Fi9JNQ1e59aJxBRji_!!6000000003819-2-tps-1232-928.png" alt="记录艺术中时间与记忆的交? class="blog-image">
192:
<div class="blog-content">
193:
<h3>记录艺术中时间与记忆的交?/h3>
194:
<p>艺术是时间的容器，它捕捉并保存了特定时刻的情感和体验。每€件艺术作品都是艺术家与时间对话的结果，是过去、现在和未来交汇的点。在艺术中记录时间与记忆的交汇，是一种深刻的文化实践，它让我们得以窥见历史的深度和人性的复杂?..</p>
195:
</div>
196:
</div>
197:
</div>
198:
</div>
199:
</body>
200:
</html>