Skip to content

Commit 6e21d38

Browse files
xditexdite
committed
init git
0 parents  commit 6e21d38

File tree

2 files changed

+217
-0
lines changed

2 files changed

+217
-0
lines changed

‎HTML_STRUCTURE.mkdn

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
## HTML 文件結構
2+
3+
<pre>
4+
&lt;!DOCTYPE html&gt;
5+
&lt;head&gt;
6+
&lt;meta charset=&quot;utf-8&quot;&gt;
7+
&lt;title&gt;demo&lt;/title&gt;
8+
&lt;link href=&quot;#&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
9+
&lt;/head&gt;
10+
&lt;body&gt;
11+
&lt;%= yield %&gt;
12+
&lt;script src=&quot;#&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
13+
&lt;/body&gt;
14+
&lt;/html&gt;
15+
</pre>
16+
17+
### 雙欄版面
18+
19+
<pre>
20+
&lt;div id=&quot;container&quot;&gt;
21+
&lt;div id=&quot;header&quot;&gt;
22+
&lt;h1&gt;&lt;a&gt;LOGO&lt;/a&gt;&lt;/h1&gt;
23+
&lt;div id=&quot;main-navigation&quot; class=&quot;nav clearfix&quot;&gt; &lt;/div&gt;
24+
&lt;div id=&quot;user-navigation&quot; class=&quot;nav clearfix&quot;&gt; &lt;/div&gt;
25+
&lt;/div&gt;
26+
&lt;div id=&quot;main&quot;&gt;&lt;/div&gt;
27+
&lt;div id=&quot;sidebar&quot;&gt;&lt;/div&gt;
28+
&lt;/div&gt;
29+
&lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;
30+
</pre>
31+
32+
### 文本元件
33+
34+
<pre>
35+
&lt;h1&gt;&lt;/h1&gt;
36+
&lt;h2&gt;&lt;/h2&gt;
37+
&lt;h3&gt;&lt;/h3&gt;
38+
&lt;h4&gt;&lt;/h4&gt;
39+
&lt;h5&gt;&lt;/h5&gt;
40+
&lt;h6&gt;&lt;/h6&gt;
41+
&lt;p&gt;&lt;/p&gt;
42+
&lt;hr/&gt;
43+
</pre>
44+
45+
### 表格元件
46+
47+
<pre>
48+
&lt;table&gt;
49+
&lt;caption&gt;&#x8868;&#x683c;&#x6a19;&#x984c;&lt;/caption&gt;
50+
&lt;thead&gt;
51+
&lt;tr&gt;&lt;th&gt;&#x6a19;&#x984c; A&lt;/th&gt;&lt;th&gt;&#x6a19;&#x984c; B&lt;/th&gt;&lt;/tr&gt;
52+
&lt;/thead&gt;
53+
&lt;tbody&gt;
54+
&lt;tr&gt;&lt;th&gt;&#x6a19;&#x984c; X&lt;/th&gt;&lt;td&gt;&#x503c;&#x4e00;&lt;/td&gt;&lt;/tr&gt;
55+
&lt;tr&gt;&lt;th&gt;&#x6a19;&#x984c; Y&lt;/th&gt;&lt;td&gt;&#x503c;&#x4e8c;&lt;/td&gt;&lt;/tr&gt;
56+
&lt;/tbody&gt;
57+
&lt;tfoot&gt;
58+
&lt;tr&gt;&lt;th&gt;&#x6a19;&#x5c3e;&lt;/th&gt;&lt;td&gt;&#x7e3d;&#x503c;&lt;/td&gt;&lt;/tr&gt;
59+
&lt;/tfoot&gt;
60+
&lt;/table&gt;
61+
</pre>
62+
63+
### 一般表單元件
64+
65+
<pre>
66+
&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;new_user&quot; class=&quot;form user&quot;&gt;
67+
&lt;fieldset&gt;
68+
&lt;legend&gt;&#x4f7f;&#x7528;&#x8005;&#x8cc7;&#x6599;&lt;/legend&gt;
69+
&lt;div class=&quot;inputs&quot;&gt;
70+
&lt;label for=&quot;user_name&quot;&gt;&#x59d3;&#x540d;&lt;/label&gt;
71+
&lt;input type=&quot;text&quot; name=&quot;user[name]&quot; value=&quot;&quot; id=&quot;user_name&quot; class=&quot;name&quot;&gt;
72+
&lt;/div&gt;
73+
&lt;div class=&quot;inputs&quot;&gt;
74+
&lt;label for=&quot;user_marriage&quot;&gt;&#x5df2;&#x5a5a;&lt;/label&gt;
75+
&lt;input type=&quot;checkbox&quot; name=&quot;user[marriage]&quot; value=&quot;1&quot; id=&quot;user_marriage&quot; class=&quot;marriage&quot;&gt;
76+
&lt;/div&gt;
77+
&lt;div class=&quot;buttons&quot;&gt;
78+
&lt;input type=&quot;submit&quot; value=&quot;&#x9001;&#x51fa;&quot; id=&quot;&quot; class=&quot;&quot;&gt;
79+
&lt;/div&gt;
80+
&lt;/fieldset&gt;
81+
&lt;/form&gt;
82+
</pre>
83+
84+
### 表單元件 (Handicraft)
85+
86+
<pre>
87+
&lt;form action=&quot;/posts/2959/comments&quot; class=&quot;form right-label&quot; id=&quot;new_comment&quot; method=&quot;post&quot;&gt;
88+
&lt;ul class=&quot;form-fields&quot;&gt;
89+
&lt;li&gt;
90+
&lt;label class=&quot;desc&quot; for=&quot;comment_guest_name&quot;&gt;&#x540d;&#x7a31;&lt;/label&gt;
91+
&lt;div class=&quot;col&quot;&gt;
92+
&lt;input class=&quot;field text&quot; id=&quot;comment_guest_name&quot; name=&quot;comment[guest_name]&quot; size=&quot;30&quot; type=&quot;text&quot; /&gt;
93+
&lt;/div&gt;
94+
&lt;/li&gt;
95+
&lt;li&gt;
96+
&lt;label class=&quot;desc&quot; for=&quot;comment_guest_website&quot;&gt;&#x7db2;&#x5740;&lt;/label&gt;
97+
&lt;div class=&quot;col&quot;&gt;
98+
&lt;input class=&quot;field text&quot; id=&quot;comment_guest_website&quot; name=&quot;comment[guest_website]&quot; size=&quot;30&quot; type=&quot;text&quot; /&gt;
99+
&lt;/div&gt;
100+
&lt;/li&gt;
101+
&lt;li&gt;
102+
&lt;label class=&quot;desc&quot; for=&quot;comment_content&quot;&gt;&#x7559;&#x8a00;&#x5167;&#x6587;&lt;/label&gt;
103+
&lt;div class=&quot;col&quot;&gt;
104+
&lt;textarea class=&quot;field textarea&quot; cols=&quot;40&quot; id=&quot;comment_content&quot; name=&quot;comment[content]&quot; rows=&quot;20&quot;&gt;&lt;/textarea&gt;
105+
&lt;/div&gt;
106+
&lt;/li&gt;
107+
&lt;li class=&quot;buttons&quot;&gt;
108+
&lt;input class=&quot;submit&quot; id=&quot;comment_submit&quot; name=&quot;commit&quot; type=&quot;submit&quot; value=&quot;&#x9001;&#x51fa;&quot; /&gt;
109+
&lt;/li&gt;
110+
&lt;/ul&gt;
111+
&lt;/form&gt;
112+
</pre>
113+
114+
### 分頁元件 (WillPaginate)
115+
116+
<pre>
117+
&lt;div class=&quot;pagination&quot;&gt;
118+
&lt;span class=&quot;disabled prev_page&quot;&gt;&#x4e0a;&#x4e00;&#x9801;&lt;/span&gt;
119+
&lt;span class=&quot;current&quot;&gt;1&lt;/span&gt;
120+
&lt;a href=&quot;/posts?page=2&quot; rel=&quot;next&quot;&gt;2&lt;/a&gt;
121+
&lt;a href=&quot;/posts?page=3&quot;&gt;3&lt;/a&gt;
122+
&lt;a href=&quot;/posts?page=4&quot;&gt;4&lt;/a&gt;
123+
&lt;a href=&quot;/posts?page=5&quot;&gt;5&lt;/a&gt;
124+
&lt;a href=&quot;/posts?page=6&quot;&gt;6&lt;/a&gt;
125+
&lt;a href=&quot;/posts?page=7&quot;&gt;7&lt;/a&gt;
126+
&lt;a href=&quot;/posts?page=8&quot;&gt;8&lt;/a&gt;
127+
&lt;a href=&quot;/posts?page=9&quot;&gt;9&lt;/a&gt;
128+
&lt;span class=&quot;gap&quot;&gt;&amp;hellip;&lt;/span&gt;
129+
&lt;a href=&quot;/posts?page=76&quot;&gt;76&lt;/a&gt;
130+
&lt;a href=&quot;/posts?page=77&quot;&gt;77&lt;/a&gt;
131+
&lt;a href=&quot;/posts?page=2&quot; class=&quot;next_page&quot; rel=&quot;next&quot;&gt;&#x4e0b;&#x4e00;&#x9801;&lt;/a&gt;
132+
&lt;/div&gt;
133+
</pre>
134+
135+
### 列表使用 (li)
136+
137+
<pre>
138+
&lt;ul&gt;
139+
&lt;li class=&quot;first&quot;&gt; AAA&lt;/li&gt;
140+
&lt;li class=&quot;active&quot;&gt; BBB &lt;/li&gt;
141+
&lt;li&gt;CCC&lt;/li&gt;
142+
&lt;li&gt;YYY&lt;/li&gt;
143+
&lt;li class=&quot;last&quot;&gt;ZZZ&lt;/li&gt;
144+
&lt;/ul&gt;
145+
</pre>
146+
147+
* 如需針對第一個及最後一個 li 做特別處理，class 需命名為first、last。被選取的選項 class請命名為 active

‎README.mkdn

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# CSS Design Rules for Rails
2+
3+
## CSS 語法規則
4+
5+
### 目錄規則
6+
7+
* 「CSS 目錄夾」請放在 app/assts/stylesheets 下
8+
* 「CSS 內用的圖片」 請放在 app/assets/stylesheets/images 下
9+
* 「CSS 內用的 spriate 小圖」 請放在 app/assets/images 下
10+
* 「假圖的目錄」或「網頁內放的圖」請放在 public/images 下
11+
12+
## 設計準則
13+
14+
* 簡潔、高重用性、高維護性。
15+
* 務必依據「功能」或「區塊位置」模組化 css 條目，讓每個模組彼此不會互相影響，大型模組須獨立成檔案。
16+
* 須依照以下順序引用 CSS
17+
- reset.css
18+
- base.css
19+
- xxx.css (xxx.css 代表不同模組檔案)
20+
- application.css
21+
* 使用 reset.css
22+
- compass/reset
23+
- Mayer 版本的 [reset.css](http://meyerweb.com/eric/tools/css/reset/)
24+
* 禁用 @import。
25+
26+
## HTML 語法規則
27+
28+
請遵照有語意 (semantic) 的命名法則。
29+
30+
* id 與 class 屬性命名規則
31+
32+
* 請全數用小寫英文、數字，儘量不要使用縮寫。
33+
* 文字連結可使用 _ 符號，如 user_name。
34+
* 語意分隔符號一律用 - 區隔，如 header-logo，勿使用 header_logo 命名。
35+
* 網站單一頁面不能有同名的 id 屬性，應使用 class 屬性。
36+
37+
* Tag 使用規則
38+
39+
* 排版請使用 div 標籤，列表才能用 table 標籤。
40+
* 單一頁面中 h1 ~ h6 請依序使用，維持階層性，勿跳著使用。
41+
* 只有屬於內文時，才可以使用 p 標籤。
42+
* 欲包裹文字區塊請用 span 或 div 標籤，視需求加上 display:block; 來達到區塊效果。
43+
* img 標籤都要用 div 包起來並限制大小。
44+
* Logo 請先用 h1 和 a 標籤包裹文字，再用 css 移走文字、置換成圖片。
45+
46+
## Windows & IE
47+
48+
### IE Hack 規則
49+
50+
* 使用 * 或 _ 來對 IE 做特殊處理。
51+
* 請直接加在要 hack 的 attribute 底下，方便其他人辨認。如 *margin-top:10px;
52+
53+
### 常見 IE bug
54+
55+
* 在 a 下 width 或 font-size 導致爆版
56+
57+
### 特別注意事項
58+
* 禁止使用 text-shadow 。原因是 Win7 + Chrome 在中文 + text-shadow 的情況下，會有 bug，導致瀏覽器直接當掉。
59+
60+
61+
## HTML 結構
62+
63+
* 見 [HTML_STRUCTURE](/xdite/css-design-rules/HTML_STRUCTURE.mkdn)
64+
65+
## 其他 CSS 教學文件
66+
67+
* [CSS 基礎技巧懶人包](http://blog.xdite.net/posts/2012/01/29/css-tricks-summary/)
68+
* [float 指南](http://css.maxdesign.com.au/floatutorial/)
69+
* [簡易色票機](http://mars.lookin4.com/download/Smallwhite_06/01/011_06Color02.htm)
70+
* [垂直置中議題參考資料](http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html)

0 commit comments

Comments
 (0)