Web Notes
2015.09.26
HTML 相对路径和绝对路径区别分析
HTML 初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个 HTML 网页中引用另外一个 HTML 网页作为超链接（hyperlink），怎样在一个网页中插入一张图片。如果你在引用文件时（如加入超链接，或者插入图片等），使用了错误的文件路径，就会导致引用失效（无法浏览链接文件，或无法显示插入的图片等）。
Just add a simple styling snow for this site, with pure CSS:
html:before {
content: "\002745";
z-index: -10;
position: fixed;
top: 50%;
left: -50%;
height: 10px;
width: 10px;
background: #ccc;
border-radius: 50%;
text-shadow: 0px 0px #ccc, -122vmax 58vmax 2px #ccc, 59vmax -38vmax 0px #ccc,
-125vmax -25vmax 2px #ccc, -2vmax 0vmax 2px #ccc, -80vmax 53vmax 3px #ccc,
19vmax -137vmax 0px #ccc, -24vmax 99vmax 0px #ccc, -112vmax 121vmax 0px #ccc,
112vmax 22vmax 3px #ccc, -26vmax -115vmax 1px #ccc, -146vmax 94vmax 3px #ccc,
113vmax -13vmax 3px #ccc, 78vmax -83vmax 0px #ccc, 144vmax 76vmax 3px #ccc,
109vmax -12vmax 1px #ccc, -16vmax 60vmax 2px #ccc, -47vmax -40vmax 3px #ccc,
-43vmax -113vmax 3px #ccc, -33vmax -107vmax 2px #ccc,
-115vmax -32vmax 1px #ccc, -97vmax 141vmax 0px #ccc, 135vmax 1vmax 2px #ccc,
-59vmax 3vmax 1px #ccc, 125vmax 134vmax 2px #ccc, -14vmax -140vmax 1px #ccc,
49vmax -148vmax 2px #ccc, -62vmax -77vmax 1px #ccc, -60vmax 123vmax 2px #ccc,
-131vmax 78vmax 0px #ccc, -43vmax 95vmax 2px #ccc, -99vmax 80vmax 2px #ccc,
70vmax 31vmax 3px #ccc, 44vmax -58vmax 0px #ccc, -35vmax -130vmax 0px #ccc,
-77vmax 69vmax 3px #ccc, 0vmax 130vmax 1px #ccc, -98vmax 25vmax 2px #ccc,
84vmax -59vmax 2px #ccc, 138vmax -7vmax 1px #ccc, 92vmax -82vmax 1px #ccc,
66vmax -134vmax 3px #ccc, 123vmax -131vmax 3px #ccc,
-55vmax -100vmax 0px #ccc, -141vmax 141vmax 2px #ccc,
-26vmax 150vmax 2px #ccc, -124vmax -72vmax 2px #ccc, -6vmax -71vmax 1px #ccc,
-18vmax 74vmax 1px #ccc, 77vmax -37vmax 0px #ccc, -45vmax -7vmax 3px #ccc,
-16vmax 21vmax 3px #ccc, -38vmax 100vmax 1px #ccc, -20vmax 13vmax 3px #ccc,
-9vmax -39vmax 2px #ccc, 5vmax 32vmax 0px #ccc, 82vmax 88vmax 1px #ccc,
105vmax 106vmax 2px #ccc, -123vmax -73vmax 0px #ccc,
111vmax 103vmax 1px #ccc, 28vmax 44vmax 3px #ccc, -13vmax -87vmax 0px #ccc,
-141vmax -39vmax 2px #ccc, 143vmax -121vmax 3px #ccc,
-133vmax 22vmax 0px #ccc, -140vmax -56vmax 2px #ccc,
92vmax -143vmax 0px #ccc, -100vmax 46vmax 2px #ccc, 131vmax -39vmax 2px #ccc,
120vmax 58vmax 1px #ccc, 139vmax -68vmax 1px #ccc, 128vmax 37vmax 0px #ccc,
-137vmax -103vmax 1px #ccc, 83vmax -56vmax 0px #ccc,
137vmax 116vmax 2px #ccc, -43vmax 125vmax 0px #ccc, -40vmax -15vmax 2px #ccc,
42vmax 101vmax 2px #ccc, 149vmax -137vmax 3px #ccc,
104vmax -148vmax 0px #ccc, -65vmax 19vmax 2px #ccc, 48vmax 78vmax 3px #ccc,
-63vmax 28vmax 1px #ccc, 94vmax -129vmax 1px #ccc, -27vmax 108vmax 0px #ccc,
-11vmax 67vmax 1px #ccc, 114vmax 18vmax 2px #ccc, 59vmax 96vmax 1px #ccc,
-46vmax -6vmax 1px #ccc, 4vmax 28vmax 0px #ccc, -116vmax -63vmax 1px #ccc,
87vmax -62vmax 2px #ccc, -27vmax 111vmax 1px #ccc, 36vmax -51vmax 3px #ccc,
9vmax -51vmax 3px #ccc, 53vmax -111vmax 0px #ccc, 22vmax -146vmax 0px #ccc,
-115vmax -131vmax 2px #ccc, -146vmax 31vmax 0px #ccc, 129vmax 2vmax 0px #ccc,
106vmax 76vmax 2px #ccc, -121vmax 106vmax 2px #ccc, 55vmax -40vmax 1px #ccc,
-3vmax 70vmax 1px #ccc, 55vmax -117vmax 1px #ccc, -109vmax 1vmax 2px #ccc,
5vmax 37vmax 0px #ccc, -103vmax -86vmax 1px #ccc, 78vmax 52vmax 3px #ccc,
-45vmax -142vmax 0px #ccc, 113vmax -102vmax 3px #ccc,
-43vmax 147vmax 3px #ccc, -108vmax 1vmax 1px #ccc, 86vmax -139vmax 2px #ccc,
-137vmax -39vmax 0px #ccc, -132vmax 122vmax 3px #ccc, 98vmax -9vmax 3px #ccc,
-81vmax -77vmax 1px #ccc, 93vmax 74vmax 3px #ccc, 116vmax -118vmax 3px #ccc,
61vmax -12vmax 0px #ccc, -102vmax 149vmax 3px #ccc, 69vmax 46vmax 0px #ccc,
-98vmax -80vmax 2px #ccc, 27vmax 101vmax 2px #ccc, -104vmax 31vmax 0px #ccc,
23vmax 2vmax 1px #ccc, -4vmax 14vmax 0px #ccc, -59vmax 138vmax 1px #ccc,
6vmax -62vmax 2px #ccc, -46vmax 5vmax 2px #ccc, 131vmax 17vmax 3px #ccc,
-76vmax -5vmax 3px #ccc, -120vmax 47vmax 2px #ccc, 118vmax -17vmax 1px #ccc,
-148vmax 137vmax 1px #ccc, -139vmax -79vmax 2px #ccc,
19vmax -99vmax 2px #ccc, 85vmax 103vmax 3px #ccc, -36vmax 108vmax 1px #ccc,
-132vmax -37vmax 0px #ccc, 126vmax 121vmax 3px #ccc,
-49vmax -134vmax 2px #ccc, 73vmax 89vmax 2px #ccc, 79vmax -67vmax 2px #ccc,
100vmax -79vmax 3px #ccc, -23vmax 89vmax 3px #ccc, -124vmax 87vmax 0px #ccc,
-47vmax -100vmax 1px #ccc, 76vmax 80vmax 3px #ccc, 59vmax -125vmax 3px #ccc,
93vmax -146vmax 2px #ccc, 15vmax -77vmax 2px #ccc, 149vmax 98vmax 1px #ccc,
48vmax 105vmax 3px #ccc, 99vmax 72vmax 1px #ccc, -117vmax -39vmax 1px #ccc,
44vmax 109vmax 1px #ccc, -102vmax -16vmax 2px #ccc, 94vmax 133vmax 3px #ccc,
-136vmax 25vmax 0px #ccc, 142vmax 71vmax 3px #ccc, 142vmax -127vmax 1px #ccc,
4vmax -19vmax 3px #ccc, 87vmax 101vmax 1px #ccc, -12vmax 82vmax 0px #ccc,
30vmax -91vmax 0px #ccc, -48vmax 16vmax 3px #ccc, 35vmax -65vmax 0px #ccc,
60vmax -83vmax 2px #ccc, -121vmax 136vmax 1px #ccc, -47vmax 34vmax 3px #ccc,
-149vmax -95vmax 0px #ccc, 63vmax 83vmax 2px #ccc, 41vmax -60vmax 3px #ccc,
-108vmax 142vmax 2px #ccc, 2vmax -140vmax 3px #ccc,
122vmax -104vmax 2px #ccc, -83vmax 40vmax 3px #ccc, 91vmax -41vmax 2px #ccc,
125vmax 90vmax 3px #ccc, -45vmax 68vmax 1px #ccc, -77vmax 0vmax 3px #ccc,
10vmax -34vmax 3px #ccc, 39vmax 82vmax 2px #ccc, 128vmax 77vmax 0px #ccc,
-77vmax 7vmax 2px #ccc, -34vmax -136vmax 0px #ccc, -12vmax -10vmax 0px #ccc,
52vmax -149vmax 3px #ccc, 23vmax 143vmax 0px #ccc, 57vmax 96vmax 1px #ccc,
110vmax 143vmax 3px #ccc, 67vmax 51vmax 2px #ccc, -113vmax -2vmax 1px #ccc,
-130vmax 95vmax 3px #ccc, 65vmax -139vmax 2px #ccc, -18vmax 21vmax 3px #ccc,
-128vmax 142vmax 0px #ccc, -119vmax 96vmax 3px #ccc, -9vmax 129vmax 0px #ccc,
58vmax 28vmax 1px #ccc, -32vmax -65vmax 1px #ccc, -4vmax 13vmax 2px #ccc,
-93vmax 88vmax 2px #ccc, 123vmax -20vmax 2px #ccc, -38vmax -106vmax 2px #ccc,
124vmax 7vmax 2px #ccc, 19vmax 5vmax 3px #ccc, 71vmax 112vmax 3px #ccc,
103vmax -126vmax 1px #ccc, 79vmax -136vmax 0px #ccc, 0vmax -86vmax 1px #ccc,
129vmax -76vmax 0px #ccc, -144vmax -40vmax 0px #ccc, 92vmax 80vmax 0px #ccc,
35vmax 41vmax 0px #ccc, 20vmax 114vmax 1px #ccc, -76vmax -82vmax 0px #ccc,
110vmax 121vmax 3px #ccc, -22vmax -2vmax 0px #ccc, -1vmax 21vmax 1px #ccc,
58vmax 130vmax 3px #ccc, -129vmax 129vmax 1px #ccc, 21vmax -30vmax 1px #ccc,
82vmax 6vmax 2px #ccc, 65vmax 21vmax 1px #ccc, -139vmax 144vmax 0px #ccc,
-97vmax 19vmax 0px #ccc, 118vmax -79vmax 1px #ccc, -127vmax 115vmax 1px #ccc,
-148vmax -141vmax 1px #ccc, -88vmax -38vmax 2px #ccc,
138vmax -11vmax 3px #ccc, 33vmax -15vmax 0px #ccc, 51vmax 61vmax 0px #ccc,
66vmax 112vmax 2px #ccc, 30vmax 65vmax 0px #ccc, -114vmax 31vmax 2px #ccc,
80vmax -60vmax 3px #ccc, 34vmax 13vmax 1px #ccc, 6vmax 128vmax 2px #ccc,
-19vmax 47vmax 3px #ccc, -87vmax -91vmax 2px #ccc, -90vmax -90vmax 1px #ccc,
-109vmax -20vmax 3px #ccc, 115vmax -66vmax 1px #ccc, 14vmax -29vmax 3px #ccc,
106vmax 72vmax 0px #ccc, 54vmax 98vmax 3px #ccc, -147vmax -112vmax 3px #ccc,
99vmax 57vmax 3px #ccc, -27vmax 36vmax 3px #ccc, 104vmax -85vmax 2px #ccc,
24vmax 4vmax 2px #ccc, 30vmax -23vmax 0px #ccc, -23vmax 84vmax 0px #ccc,
-88vmax 15vmax 2px #ccc, -18vmax 12vmax 2px #ccc, 108vmax -117vmax 3px #ccc,
-26vmax 26vmax 1px #ccc, 144vmax -78vmax 2px #ccc, -64vmax -102vmax 1px #ccc,
110vmax -143vmax 3px #ccc, -120vmax 29vmax 2px #ccc,
118vmax 147vmax 1px #ccc, -69vmax -96vmax 1px #ccc,
-146vmax 138vmax 3px #ccc, 32vmax -17vmax 3px #ccc, -48vmax -82vmax 2px #ccc,
123vmax 54vmax 3px #ccc, 21vmax 114vmax 2px #ccc, 28vmax 119vmax 1px #ccc,
104vmax -7vmax 2px #ccc, 97vmax 80vmax 2px #ccc, -55vmax 83vmax 1px #ccc,
80vmax -133vmax 0px #ccc, 6vmax -80vmax 1px #ccc, 5vmax -61vmax 0px #ccc,
26vmax 82vmax 3px #ccc, 118vmax 82vmax 0px #ccc, 40vmax 15vmax 3px #ccc,
-122vmax -66vmax 2px #ccc, 126vmax -92vmax 3px #ccc, -5vmax 66vmax 2px #ccc,
-93vmax -91vmax 0px #ccc, 36vmax 100vmax 3px #ccc, -107vmax -28vmax 1px #ccc,
-9vmax 94vmax 3px #ccc, 146vmax 77vmax 0px #ccc, -128vmax -123vmax 1px #ccc,
59vmax 66vmax 1px #ccc, 34vmax -48vmax 2px #ccc, -60vmax 2vmax 3px #ccc,
37vmax 46vmax 3px #ccc, -75vmax -129vmax 1px #ccc, 89vmax 128vmax 1px #ccc,
114vmax 70vmax 1px #ccc, -80vmax 51vmax 2px #ccc, -6vmax 145vmax 3px #ccc,
-78vmax 64vmax 3px #ccc;
animation: snow 100s linear 0s infinite normal;
}
@keyframes snow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
The main colour of #ccc suited both the bright and dark theme of my site, 🎉. That’s it, wish you a Merry Christmas~
Ads by Google
林宏
Frank Lin
Hey, there! This is Frank Lin (@flinhong), one of the 1.41 billion . This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.
NEXT
YOU MAY ALSO LIKE
Web Notes
2016.08.20
Using Liquid in Jekyll - Live with Demos
Liquid is a simple template language that Jekyll uses to process pages for your site. With Liquid you can output complex contents without additional plugins.
Tutorials
2017.03.25
Self-host comments in Jekyll, powered by Firebase real-time database
It's convenient to set up a comment system in Jekyll site with external social comment systems like Disqus or Duoshuo (多说). However, as you all know, Disqus was blocked in China and Duoshuo is going to shutdown. It's the time to rethink about the comment system (although I didn't get too many comments →_→), simple and controllable. And it becomes true with Firebase database.