forked from flukeout/css-diner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
193 lines (164 loc) · 6.63 KB
/
index.html
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html>
<head>
<title>CSS Diner - Where we feast on CSS Selectors!</title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/levels.js" type="text/javascript" charset="utf-8"></script>
<script src="js/restaurant.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<link rel="icon" type="image/png" href="favicon.png">
<link href='https://fonts.googleapis.com/css?family=Exo+2:200,400,600,400italic,600italic' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta property="og:url" content="http://cssdiner.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="CSS Diner" />
<meta property="og:description" content="A fun game to help you learn and practice CSS selectors." />
<meta property="og:image" content="https://flukeout.github.io/images/fb-share.jpg" />
</head>
<body>
<div class="left-col">
<header>
CSS 餐馆
<div class="logo">
<plate><apple /></plate>
</div>
<span class="share-menu">
分享
<a class="share-twitter" type="twitter" href="#"></a>
<a class="share-facebook" type="facebook" href="#"></a>
<a class="share-email" type="email" href="#"></a>
</span>
</header>
<h2 class="order"></h2>
<div class="note">
<h3>无需担心, 你会知道玩法的!</h3>
<p>
你正在学习关于CSS 选择器的内容！
选择器是一个用来选择目标元素，并对其应用样式的语句。
</p>
<h4>示例 1 - 一个 CSS 规则</h4>
<pre>
p {
margin-bottom: 12px;
}</pre>
<p>
在这里, "p" 是选择器 (选择所有的 <p> 元素) 并且对其应用 margin-bottom 样式.
</p>
<p>
在下方的编辑器中键入 CSS 选择器来选择桌子上正确的物品。
如果你做对了，你将进入下一个关卡。
</p>
<p>
将鼠标移到桌子上的物品来看它们对应的HTML标签。
</p>
<p>
在网页右侧可以看到关于选择器的帮助信息! →
</p>
<a class="note-toggle" href="#">知道了!</a>
</div>
<a class="note-toggle" href="#">这要怎么玩？</a>
<div class="game-wrapper">
<div class="table-wrapper">
<div class="table-surface"></div>
<div class="nametags"></div>
<div class="table"></div>
</div>
<div class="table-edge">
<div class="table-leg"></div>
<div class="table-leg"></div>
</div>
</div>
<div class="editor">
<div class="editor-pane">
<div class="input-header">
<div class="file-name">style.css</div> CSS 编辑器
</div>
<div class="file-window css-view">
<div class="line-numbers">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15
</div>
<input class="input-strobe" type="text" placeholder="在此输入CSS选择器"/><span class="plus">+</span><div class="enter-button">enter</div>
<div>
{<br/>
/* 样式定义从这里开始. */<br/>
}
</div>
<div class="help">
<br/>
/* <br/>
输入关卡号可以直接跳到对应关卡。<br/>
例如 → "5" 跳到第 5 关 <br/>*/
</div>
</div>
</div>
<div class="editor-pane html-view">
<div class="input-header">
<div class="file-name">table.html</div>
HTML 源码
</div>
<div class="file-window">
<div class="line-numbers">1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15</div>
<div class="markup"></div>
</div>
</div>
</div>
<div class="what-is-this">
<p>
由<a href="http://www.twitter.com/flukeout">@flukeout</a>创作。
</p>
<p>
由<a href="https://github.com/linkeyd">linkeyd</a>,<a href="https://github.com/peterwang1996">Peter Wang</a>和<a href="https://github.com/lightrabbit">lightrabbit</a>共同翻译。
</p>
<p>
有反馈或者问题？请在<a href="https://github.com/lightrabbit/css-diner/issues">Github repo</a>上发表issue。
</p>
</div>
<div class="helper"><!-- This is the popup that floats over table elements --></div>
</div><!-- /left-col -->
<div class="right-col">
<div class="help-wrapper">
<h1 class="level-header">
<span class="level-text"></span>
<span class="checkmark"></span>
</h1>
<div class="level-nav">
<a class="previous" href="#"></a>
<a class="next" href="#"></a>
</div>
<div class="level-progress"><div class="progress"></div></div>
<div class="display-help">
<h3 class="selector-name"></h3>
<h2 class="title"></h2>
<h3 class="syntax"></h3>
<div class="hint"></div>
<h4 class="examples-title">例子</h4>
<div class="examples"></div>
</div>
</div>
<div class="level-menu">
<h2>选择一个关卡</h2>
<div class="levels"><!-- level links are inserted here--></div>
<a class="reset-progress" href="#">重置进度</a>
</div>
<div class="level-menu-toggle-wrapper">
<div class="level-menu-toggle"></div>
</div>
</div><!-- /right-col -->
<script>
if(location.hostname != "localhost"){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62998410-1', 'auto');
ga('send', 'pageview');
} else {
var ga = false;
}
</script>
</body>
</html>