Skip to content

Commit 9d802fe

Browse files
kevinlee-06kevinlee-06
committed
README.md
1 parent bc5d4cd commit 9d802fe

11 files changed

+218
-1
lines changed

‎README.md

Lines changed: 161 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,161 @@
1-
# 0401
1+
## 使用 Stylus 自訂網站樣式教學
2+
3+
### 前置作業
4+
5+
#### 安裝 Stylus
6+
7+
在開始之前，您需要安裝 Stylus 擴充功能。這是一個可以讓你自訂網站樣式的工具。
8+
9+
| 瀏覽器 | 連結 |
10+
|---------|------|
11+
| Google Chrome | [安裝 Stylus](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) |
12+
| Mozilla Firefox | [安裝 Stylus](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) |
13+
14+
### Playground
15+
您可以使用以下平台來測試和編輯您的 HTML 和 CSS 代碼：
16+
17+
- [MDN Playground](https://developer.mozilla.org/en-US/play)
18+
- [VSCode](https://code.visualstudio.com/)
19+
20+
### HTML
21+
22+
在使用 Stylus 之前，您需要了解一些基本的 HTML 結構。以下是一個簡單的 HTML 範例：
23+
24+
```html
25+
<body>
26+
<h1>大標題文字</h1>
27+
<h2>二標題文字</h2>
28+
<div>
29+
<p>p 是 paragraph</p>
30+
<p>div 是區塊（division）</p>
31+
</div>
32+
</body>
33+
```
34+
35+
您可以參考 [MDN HTML 文件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 以了解更多 HTML 元素。
36+
37+
### CSS
38+
39+
接下來可以使用 CSS 來自訂網站的樣式。以下是一個簡單的 CSS 範例：
40+
41+
```css
42+
body {
43+
background-color: #f0f0f0;
44+
font-family: Arial, sans-serif;
45+
}
46+
47+
h1 {
48+
color: #333;
49+
}
50+
51+
p {
52+
color: #666;
53+
}
54+
```
55+
56+
#### CSS 結構
57+
58+
CSS 的基本結構如下：
59+
60+
```css
61+
selector {
62+
property1: value;
63+
property2: value;
64+
property3: value;
65+
}
66+
```
67+
68+
#### 選擇器
69+
70+
選擇器用於選擇要應用樣式的 HTML 元素。您可以參考 [MDN CSS 選擇器文件](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_selectors) 以了解更多選擇器的用法。
71+
72+
### 使用 Stylus 變更校園入口樣式
73+
74+
1. 前往 [校園入口網站](https://nportal.ntut.edu.tw/)。
75+
2. 點擊 Stylus 圖示，然後選擇「Write style for ...」。
76+
77+
![選擇「Write style for ...」](image-1.png)
78+
79+
3. 在 Stylus 編輯器中，您可以開始編寫自訂的 CSS 代碼。
80+
81+
![界面](image-2.png)
82+
83+
![界面](image-3.png)
84+
85+
### 啟用自動完成
86+
87+
在 Stylus 編輯器中，您可以啟用自動完成以便更方便地編寫 CSS 代碼。
88+
89+
| ![](image-5.png) | ![](image-4.png) |
90+
|------------------|------------------|
91+
92+
### 按 F12 叫出開發人員工具
93+
94+
在編輯樣式時，您可以按 F12 來叫出開發人員工具，這樣可以檢查和調整您所編寫的 CSS 代碼。
95+
96+
![](image-6.png)
97+
98+
### 實作範例
99+
100+
以下是一個簡單的範例，您可以在 Stylus 中編寫以下 CSS 來改變校園入口網站的樣式：
101+
102+
![](demo.png)
103+
104+
```css
105+
#wrap {
106+
background: none;
107+
background-color: transparent;
108+
}
109+
110+
#slider.rslides > li > img {
111+
display: none
112+
}
113+
114+
body {
115+
background: none;
116+
background-color: #ededed;
117+
}
118+
119+
.header img {
120+
display: none;
121+
}
122+
123+
.title {
124+
color: #000;
125+
.titleEng {
126+
color: #191919;
127+
}
128+
}
129+
130+
.boxContent {
131+
float: none;
132+
height: 100dvh;
133+
width: 100%;
134+
margin: auto;
135+
display: flex;
136+
> img {
137+
display: none;
138+
}
139+
}
140+
141+
.authcode a:nth-of-type(2) {
142+
display: none;
143+
}
144+
145+
.copyright {
146+
display: none;
147+
}
148+
149+
table {
150+
display: none;
151+
}
152+
153+
.form {
154+
margin: auto;
155+
background-color: #fff;
156+
padding: 2rem ;
157+
box-shadow: 5px 5px 10px #b1b1b1;
158+
border: 1px solid #fff;
159+
height: auto;
160+
}
161+
```

‎demo.png

65.2 KB
Loading

‎demo.user.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
#wrap {
2+
background: none;
3+
background-color: transparent;
4+
}
5+
6+
#slider.rslides > li > img {
7+
display: none
8+
}
9+
10+
body {
11+
background: none;
12+
background-color: #ededed;
13+
}
14+
15+
.header img {
16+
display: none;
17+
}
18+
19+
.title {
20+
color: #000;
21+
.titleEng {
22+
color: #191919;
23+
}
24+
}
25+
26+
.boxContent {
27+
float: none;
28+
height: 100dvh;
29+
width: 100%;
30+
margin: auto;
31+
display: flex;
32+
> img {
33+
display: none;
34+
}
35+
}
36+
37+
.authcode a:nth-of-type(2) {
38+
display: none;
39+
}
40+
41+
.copyright {
42+
display: none;
43+
}
44+
45+
table {
46+
display: none;
47+
}
48+
49+
.form {
50+
margin: auto;
51+
background-color: #fff;
52+
padding: 2rem ;
53+
box-shadow: 5px 5px 10px #b1b1b1;
54+
border: 1px solid #fff;
55+
height: auto;
56+
}

‎image-1.png

22.2 KB
Loading

‎image-2.png

181 KB
Loading

‎image-3.png

529 KB
Loading

‎image-4.png

52.8 KB
Loading

‎image-5.png

38.7 KB
Loading

‎image-6.png

518 KB
Loading

‎image.png

18.5 KB
Loading

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<img src="" alt="">

0 commit comments

Comments
 (0)