放假之后重拾了HTML,结果发现自己差不多忘了个精光,所幸我本来学的本就不深,重新学习也不需要花费多少力气。
只不过现在稍稍比之前深入那么一点点后,便触碰了CSS。CSS不愧为网页的皮肤,我用CSS将原来写的第一份HTML代码加以修改后,代码减少了100多行。
此处是我修改后的网页
接下来呢,就是我的代码喽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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153<!-- saved from url=(0077)file:///C:/Users/Administrator/Desktop/It's%20me/kxj's%20first%20website.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30"><!-- 每30秒钟刷新当前页面 -->
<title>kxj's first website改</title>
<link rel="shortcut icon" href="./kxj's first website改_files/1191414.ico">
<style type="text/css">
body{
/*background-image: url("./kxj's first website改_files/fantasy.jpg");
background-repeat: no-repeat;不重复
background-position: right bottom;图片位置
background-attachment: fixed;固定图片*/
background: url("./kxj's first website改_files/fantasy.jpg") no-repeat right bottom fixed;/*将所有的属性合并成一个语序*/
}
h1{
color: #556fff;/*字体颜色*/
font-size: 35px ;/*字体大小*/
text-align: center;/*文本位置*/
text-decoration: underline overline ;/*line-through*/
text-transform: uppercase;/*字母转换*/
text-shadow: 2px 2px grey;/*文本阴影 水平阴影位置 垂直阴影位置 颜色*/
}
h2{font-size: 23px;}
a{
text-decoration: none;/*消除链接的下划线*/
font-size: 18px;
font-weight: bold;
}
a:link{color:#0000ff;}/*未访问链接*/
a:visited{color:purple;}/*已访问链接*/
a:hover{
color: #000000;
text-decoration: underline overline;
background-color: #ff704d;
}/*鼠标移动到连接上*/
a:active{color: #ff0000;}/*鼠标点击时*/
/*table{
border-collapse: collapse折叠成单一边框;
}*/
th{font-size:23px;}
th,td{text-align: left;}
</style>
</head>
<body>
<h1>Hello world</h1>
<hr>
<p>
<h2>We are super <ins>ioers</ins></h2>
<a href="http://10.220.121.203/judge/" target="_blank">Our's website</a><br>
<a href="http://10.220.121.203/wordpress/" target="_blank">Our's blog<!-- <del>"为什么没人设特色图片"</del>//删除线 --></a><br>
<a href="http://10.220.121.203/wordpress/wp-admin/post-new.php" target="_blank">I need to eidt</a>
</p>
<hr>
<p>
<h2>Old website</h2>
<a href="http://10.220.121.200:8080/judge/" target="_blank">Judge</a><br>
<a href="http://10.220.121.200:8080/contest/" target="_blank">Contest</a><br>
<a href="http://10.220.121.200:8080/free/" target="_blank">Free</a><br>
<a href="http://10.220.121.200:8080/noip/" target="_blank">Noip</a>
</p>
<hr>
<table cellspadding="10" border="10" width="1250"><tbody>
<tr>
<th>TC</th><!-- th 表头 -->
<th>Contest</th>
<th colspan="2">Other Oj</th><!-- colspan表示合并单元格-->
</tr>
<tr><td>
<p>
<a href="https://accounts.topcoder.com/member?retUrl=https:%2F%2Fwww.topcoder.com%2Fmy-dashboard%2F" target="_blank">Login</a>
<br>
<a href="http://felix-halim.net/tc/index.php?rd=16747" target="_blank">How did others do</a>
<br><!-- TC题解 -->
<a href="https://apps.topcoder.com/wiki/display/tc/Algorithm+Problem+Set+Analysis" target="_blank">The solution</a>
</p>
</td><td>
<ol><!-- 有序列表 -->
<li><a href="http://bestcoder.hdu.edu.cn/" target="_blank">BC</a></li>
<li><a href="http://codeforces.com/" target="_blank">CF</a></li>
<li><a href="http://acmicpc.info/archives/224" target="_blank">各大OJ近期比赛汇总</a></li>
</ol>
</td><td>
<ul style="list-style-type: square"><!-- 无序列表 -->
<li><a href="http://poj.org/" target="_blank">POJ</a></li>
<li><a href="http://www.tyvj.cn/" target="_blank">Tyvj</a></li>
<li><a href="http://www.lydsy.com/JudgeOnline/problemset.php" target="_blank">BZOJ</a></li>
</ul>
</td>
<td>
<ul style="list-style-type: circle">
<li><a href="http://acm.hdu.edu.cn/" target="_blank">HDU</a></li>
<li><a href="http://bak.vjudge.net/index" target="_blank">Vjudge</a></li>
<li><a href="http://uoj.ac/" target="_blank">UOJ</a></li>
</ul>
</td></tr>
</tbody></table>
<hr>
<p>
<h2>Tool</h2>
<a href="https://www.baidu.com/" target="_blank">Baidu</a><br>
<a href="http://fanyi.baidu.com/#en/zh/" target="_blank">Translate</a><br>
<a href="http://pan.baidu.com/disk/home#list/path=%2F" target="_blank">My cloud disk</a><br>
<a href="./kxj's first website改_files/Draw Graph.html" target="_blank">Draw Graph</a>
</p>
<hr>
<p>
<h2><ins>Legendary grandmaster</ins>'s blog<!-- 插入字,大多浏览器类同于下划线 --></font>
</h2>
<a href="http://leefir.ml/" target="_blank">Leefir</a><br><!-- 换行 -->
<a href="https://yummyjay.github.io/" target="_blank">YummyJay</a><!-- <del></del>删除线 --><br><!-- 换行 -->
<a href="http://bblss123.cf/" target="_blank">bblss123</a><br>
<a href="https://kyleyoung-ymj.github.io/" target="_blank">KyleYoung</a><br>
<a href="http://unicornt.ml/" target="_blank">unicornt</a><br>
<a href="https://shinfeb.github.io/" target="_blank">Shinfeb1</a><br>
<a href="https://shinfeb.logdown.com/" target="_blank">Shinfeb2</a>
</p>
<hr>
<div id="mouse" style="bottom: 30px;position: fixed;right : 10px">
<object type="application/x-shockwave-flash" data="./kxj's first website改_files/hamster.swf" title="Adobe Flash Player" height="130" width="190">
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?">
<param name="AllowScriptAccess" value="always">
<param name="wmode" value="opaque">
</object>
</div>
</body>
</html>
<!-- 自主招生 http://mp.weixin.qq.com/s?__biz=MzI4ODEwNjg2NA==&mid=2649598162&idx=1&sn=10d0cdfe9ff167d7cc21aafbfc9b2245&chksm=f3da78cdc4adf1db7a7994d8e7aad483ed0685368693e1b -->
<!-- POI
官网 http://main.edu.pl/en
题解 http://www.oi.edu.pl
-->
<!-- https://zhuanlan.zhihu.com/p/23245534 -->
<!--
搜图网站
https://pixabay.com/
https://unsplash.com/
http://www.iconfont.cn/plus
https://www.pexels.com/
-->
<!-- 动画展示各种路径搜索算法 - NetSmellhttp://netsmell.com/post/pathfinding.html -->
<!-- hexo 主题https://www.zhihu.com/question/24422335 -->
<!-- blog question
http://flowsnow.net/2016/02/02/next.mist/
http://willxue.top/blog/Hexo%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B%E4%B9%8B%E4%B8%89%EF%BC%9Anext%E4%B8%BB%E9%A2%98%E7%9A%84%E9%85%8D%E7%BD%AE%E5%92%8C%E4%BC%98%E5%8C%96-20160322/#more
http://www.tuicool.com/articles/zeIZJzv
http://blog.csdn.net/willxue123/article/details/50994852
-->
<!-- 编辑器 https://www.zybuluo.com/mdeditor -->
<!--blog https://www.farbox.com/ -->
<!-- LaTex公式http://codex.wordpress.org.cn/%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F -->