Skip to content

Commit 9c260a4

Browse files
MyCodeBattleMyCodeBattle
committed
修改样式
1 parent fee9926 commit 9c260a4

7 files changed

Lines changed: 99 additions & 39 deletions

File tree

‎.trae/documents/移除蓝色边框动画效果.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
## 移除蓝色边框渐进式动画效果
2+
3+
### 修改文件
4+
- `/Users/zhuolx/Documents/mycodebattle.github.io/css/default.css`
5+
6+
### 具体修改
7+
8+
**方案：将蓝色边框从 `.main` 元素中分离出来**
9+
10+
1. **移除 `.main` 元素的边框**（第20行）
11+
- 删除 `border: 1px solid #4A90E2;`
12+
13+
2. **创建新的边框容器元素样式**
14+
- 添加 `.main-border` 类，用于包裹 `.main` 元素
15+
- 设置 `.main-border` 的边框为 `border: 1px solid #4A90E2;`
16+
- 设置 `.main-border` 的 padding、margin 等布局属性
17+
- 确保 `.main-border` 不受动画影响（始终 opacity: 1, transform: none）
18+
19+
3. **调整 `.main` 元素的样式**
20+
- 移除边框相关属性
21+
- 保持现有的动画效果（仅应用于内容，不包括边框）
22+
23+
### 修改 HTML 布局文件
24+
- `/Users/zhuolx/Documents/mycodebattle.github.io/_layouts/default.html`
25+
- `/Users/zhuolx/Documents/mycodebattle.github.io/_layouts/post.html`
26+
- `/Users/zhuolx/Documents/mycodebattle.github.io/_layouts/page.html`
27+
- `/Users/zhuolx/Documents/mycodebattle.github.io/_layouts/wiki.html`
28+
29+
将：
30+
```html
31+
<div class="main">
32+
```
33+
改为：
34+
```html
35+
<div class="main-border">
36+
<div class="main">
37+
```
38+
39+
并添加对应的闭合标签。
40+
41+
### 效果
42+
- 蓝色边框在页面加载时立即显示，无任何动画效果
43+
- 页面内容仍然保持原有的淡入和位移动画效果
44+
- 边框在所有交互状态下保持静态显示
45+
- 兼容不同设备尺寸和浏览器环境

‎Gemfile.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,8 +217,8 @@ GEM
217217
jekyll-feed (~> 0.9)
218218
jekyll-seo-tag (~> 2.1)
219219
minitest (5.25.4)
220-
nokogiri (1.18.9)
221-
mini_portile2 (~> 2.8.2)
220+
nokogiri (1.13.10)
221+
mini_portile2 (~> 2.8.0)
222222
racc (~> 1.4)
223223
octokit (4.25.1)
224224
faraday (>= 1, < 3)

‎_layouts/default.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
{% include header.html %}
22
<div class="container">
33
{% include navigation.html %}
4-
<div class="main">
5-
<h2> {% if page.title %} {{ page.title }} {% else %} {{ site.title }} {% endif %} </h2>
6-
{{ content }}
4+
<div class="main-border">
5+
<div class="main">
6+
<h2> {% if page.title %} {{ page.title }} {% else %} {{ site.title }} {% endif %} </h2>
7+
{{ content }}
8+
</div>
79
</div>
810
</div>
911
{% include search_data.html %}

‎_layouts/page.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
{% include header.html %}
22
<div class="container">
33
{% include navigation.html %}
4-
<div class="main">
5-
<h2> {{ page.title }} </h2>
6-
{{ content }}
7-
{% include comments.html %}
4+
<div class="main-border">
5+
<div class="main">
6+
<h2> {{ page.title }} </h2>
7+
{{ content }}
8+
{% include comments.html %}
9+
</div>
810
</div>
911
</div>
1012
{% include search_data.html %}

‎_layouts/post.html‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,33 @@
11
{% include header.html %}
22
<div class="container">
33
{% include navigation.html %}
4-
<div class="main">
5-
<h2> {{ page.title }} </h2>
6-
{{ content }}
7-
{% if page.categories %}
8-
<div class="post_footer">
9-
<p>Published on {{ page.date | date: "%b %d, %Y" }} in categories
10-
{% for cat in page.categories %}
11-
<a href="{{ site.url }}/categories/#{{ cat }}" title="{{ cat }}">{{ cat }}</a>&nbsp;
12-
{% endfor %}
13-
<p>
14-
</div>
15-
{% endif %}
16-
<ul class="prev_next">
17-
{% if page.previous.url %}
18-
<li>
19-
<span>上一篇</span><a href="{{page.previous.url}}">{{page.previous.title}}</a>
20-
</li>
21-
{% endif %}
22-
{% if page.next.url %}
23-
<li>
24-
<span>下一篇</span><a href="{{page.next.url}}">{{page.next.title}}</a>
25-
</li>
4+
<div class="main-border">
5+
<div class="main">
6+
<h2> {{ page.title }} </h2>
7+
{{ content }}
8+
{% if page.categories %}
9+
<div class="post_footer">
10+
<p>Published on {{ page.date | date: "%b %d, %Y" }} in categories
11+
{% for cat in page.categories %}
12+
<a href="{{ site.url }}/categories/#{{ cat }}" title="{{ cat }}">{{ cat }}</a>&nbsp;
13+
{% endfor %}
14+
<p>
15+
</div>
2616
{% endif %}
27-
</ul>
28-
{% include comments.html %}
17+
<ul class="prev_next">
18+
{% if page.previous.url %}
19+
<li>
20+
<span>上一篇</span><a href="{{page.previous.url}}">{{page.previous.title}}</a>
21+
</li>
22+
{% endif %}
23+
{% if page.next.url %}
24+
<li>
25+
<span>下一篇</span><a href="{{page.next.url}}">{{page.next.title}}</a>
26+
</li>
27+
{% endif %}
28+
</ul>
29+
{% include comments.html %}
30+
</div>
2931
</div>
3032
</div>
3133
{% include search_data.html %}

‎_layouts/wiki.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
{% include header.html %}
22
<div class="container">
33
{% include navigation.html %}
4-
<div class="main">
5-
<h2> {{ page.title }} </h2>
6-
{{ content }}
7-
{% include comments.html %}
4+
<div class="main-border">
5+
<div class="main">
6+
<h2> {{ page.title }} </h2>
7+
{{ content }}
8+
{% include comments.html %}
9+
</div>
810
</div>
911
</div>
1012
{% include search_data.html %}

‎css/default.css‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,22 @@ div.container {
1111
width: 90%;
1212
}
1313

14-
div.main {
14+
div.main-border {
1515
margin: auto;
1616
padding: 2% 5% 5% 5%;
1717
width: 900px;
1818
max-width: 100%;
19-
line-height: 150%;
2019
border: 1px solid #4A90E2;
2120
}
2221

22+
div.main {
23+
margin: auto;
24+
padding: 0;
25+
width: 100%;
26+
max-width: 100%;
27+
line-height: 150%;
28+
}
29+
2330
H1, H2, H3, H4 {
2431
font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, SimSun, serif;
2532
width: 98%;

0 commit comments

Comments
 (0)