-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
101 lines (97 loc) · 5.94 KB
/
Copy pathabout.html
File metadata and controls
101 lines (97 loc) · 5.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!--
~ Copyright (c) 2022.
-->
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>关于我</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="assets/img/icon.png" rel="icon">
</head>
<body>
<!--左部分-->
<div class="head">
<!--头像区域-->
<div class="headIcon"><img alt="头像" class="head" src="assets/img/headIcon.png"></div>
<div class="text-content">欢迎
<!--竖排的菜单-->
<div class="menu">
<a class="menu" href="index.html">首页</a><br>
<a class="menu" href="pic.html">关于甘城猫猫</a><br>
<a class="menu" href="about.html" style="color: #667fff">关于我</a><br>
</div>
</div>
<!--社交账户链接-->
<div class="social">
<div class="social_github"><a class="social_github" href="https://github.com/tomsteve1102"></a></div>
<div class="social_emails"><a class="social_emails" href="mailto:i@atomanother.club"></a></div>
</div>
</div>
<!--右部分-->
<div class="main">
<!--返回顶部标记-->
<div id="topAnchor"></div>
<!--网页背景-顶部-->
<div class="main_top"></div>
<!--整个主要部分的下半部分-->
<div class="main_bottom">
<div class="content">
<!--正文内容-->
<div class="content-text">
<!--正文引言-->
<div class="content-textArea">
谢谢你能点开这个关于界面，做完整个网页真的花费了很多的精力，也有很多想表达的想法因为受到限制而无法表达。
在今后学习JavaScript和Java web之后会把这个网页完善的更好<br>
</div>
<script src="js/button.js"></script>
<!--显示全文按钮-->
<label>
<input class="transfer" onclick="
const t = document.getElementById('1');
button(t)
">
</label>
</div>
</div>
<!--展示全文-->
<div class="content-more" id="1">
<div class="content-text">
<p>欸嘿嘿，第一次写介绍猫猫的网页，还有点担心会不会因为二次元浓度过高而被淘汰，帮助别人完成设计的时候，我发现原来他们才是那个浓度很高的那位。<br><br>
</p>
<p>一开始接到这个任务的时候，我首先想到了<a href="https://atomanother.club">我的blog</a>的布局，左边半个是头像和菜单，右边半个是主内容。<br><br>
</p>
<img alt="Blog主界面" src="assets/img/blog.png"><br><br>
<p>然后就开始动工去写了，虽然对div的相对和绝对定位不是太懂，不过在写了大致的位置之后，已经可以很熟练地写出来了。<br><br>
</p>
<p> 一开始想要的效果是一个大的背景图+三个主盒子的布局，不过实在是找不到合适的背景图配上文字和主体内容，能找到的图都被协助的朋友毙掉了，就放弃了。后来找到了
<a href="https://amashiro.com/">画师自己的Blog</a>。<br><br>
</p> <img alt="甘城猫猫的个人Blog" src="assets/img/amashiro.com.jpeg"><br><br>
<p>想到了组合出一个背景出来。于是，现在的背景图和配色就这么确认了。<br><br></p>
<p>关于返回顶部的设计，其实一开始想到的是实际的应用场景，我们平时看网页都会有一个返回顶部，平时不管的时候是一个样子
，鼠标放上去的时候又是一个样子，我就在想可不可以实现这个效果。<br><br>
</p>
<p>
因为我们学过有关a.hover、a.link、a.visited的知识，而我们又知道a元素是一个行内元素，无法达到展示一个很大很大的背景框，
所以利用display转换为block元素类型，然后再利用前面所提的三个内容完成这么一个小小东西的设计。<br><br>
</p>
<video autoplay loop src="assets/video/top.mkv" style="position:relative;width: 100%"></video>
<br><br>
是不是很可爱呀ヾ(≧▽≦*)o<br><br>
<p>还有一个部分，是关于展开全文的。我们学过用锚点来实现展开全文，但是有一个弊端，那就是当展开全文后，再点击返回顶部，他会覆盖展开全文的状态。<br><br></p>
<video autoplay loop src="assets/video/all.mkv" style="position: relative;width: 100%;"></video>
<br><br>
<p>所以，只能去另辟蹊径，最终受到一位群友的帮助，通过点击button来触发JavaScript脚本，执行显示块级元素，这样它就不会被返回顶部的状态覆盖了。<br><br></p>
<video autoplay loop src="assets/video/all-2.mkv" style="position: relative;width: 100%;"></video>
这样就很符合用户习惯。<br><br>
<p>在书写本次的作业时，我受到了来自闲聊群群友的支持，使他们通过用户的视角给我的作业提出意见，这次作业的框架的部分也是受到他们的启发，
没有他们或许这个作业也不会这么完美的结束。<br><br>
</p>
</div>
</div>
</div>
</div>
<!--返回顶部-->
<div class="transfer"><a class="transfer" href="#topAnchor"></a></div>
</body>
</html>