Skip to content

Commit 1a44274

Browse files
nuochongnuochong
committed
format files
1 parent fa226b3 commit 1a44274

File tree

4 files changed

+307
-255
lines changed

4 files changed

+307
-255
lines changed

‎app/assets/iconfont/demo.css‎

Lines changed: 85 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
*{margin: 0;padding: 0;list-style: none;}
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
list-style: none;
5+
}
26
/*
37
KISSY CSS Reset
48
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
@@ -23,83 +27,128 @@ body,
2327
button, input, select, textarea /* for ie */ {
2428
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
2529
}
26-
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
27-
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
28-
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
29-
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
30+
h1,
31+
h2,
32+
h3,
33+
h4,
34+
h5,
35+
h6 {
36+
font-size: 100%;
37+
}
38+
address,
39+
cite,
40+
dfn,
41+
em,
42+
var {
43+
font-style: normal;
44+
} /* 将斜体扶正 */
45+
code,
46+
kbd,
47+
pre,
48+
samp {
49+
font-family: courier new, courier, monospace;
50+
} /* 统一等宽字体 */
51+
small {
52+
font-size: 12px;
53+
} /* 小于 12px 的中文很难阅读，让 small 正常化 */
3054

3155
/** 重置列表元素 **/
32-
ul, ol { list-style: none; }
56+
ul,
57+
ol {
58+
list-style: none;
59+
}
3360

3461
/** 重置文本格式元素 **/
35-
a { text-decoration: none; }
36-
a:hover { text-decoration: underline; }
37-
62+
a {
63+
text-decoration: none;
64+
}
65+
a:hover {
66+
text-decoration: underline;
67+
}
3868

3969
/** 重置表单元素 **/
40-
legend { color: #000; } /* for ie6 */
41-
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
42-
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
70+
legend {
71+
color: #000;
72+
} /* for ie6 */
73+
fieldset,
74+
img {
75+
border: 0;
76+
} /* img 搭车：让链接里的 img 无边框 */
77+
button,
78+
input,
79+
select,
80+
textarea {
81+
font-size: 100%;
82+
} /* 使得表单元素在 ie 下能继承字体大小 */
4383
/* 注：optgroup 无法扶正 */
4484

4585
/** 重置表格元素 **/
46-
table { border-collapse: collapse; border-spacing: 0; }
86+
table {
87+
border-collapse: collapse;
88+
border-spacing: 0;
89+
}
4790

4891
/* 清除浮动 */
49-
.ks-clear:after, .clear:after {
92+
.ks-clear:after,
93+
.clear:after {
5094
content: '\20';
5195
display: block;
5296
height: 0;
5397
clear: both;
5498
}
55-
.ks-clear, .clear {
99+
.ks-clear,
100+
.clear {
56101
*zoom: 1;
57102
}
58103

59104
.main {
60105
padding: 30px 100px;
61-
width: 960px;
62-
margin: 0 auto;
106+
width: 960px;
107+
margin: 0 auto;
108+
}
109+
.main h1 {
110+
font-size: 36px;
111+
color: #333;
112+
text-align: left;
113+
margin-bottom: 30px;
114+
border-bottom: 1px solid #eee;
63115
}
64-
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
65116

66-
.helps{margin-top:40px;}
67-
.helps pre{
68-
padding:20px;
69-
margin:10px 0;
70-
border:solid 1px #e7e1cd;
117+
.helps {
118+
margin-top: 40px;
119+
}
120+
.helps pre {
121+
padding: 20px;
122+
margin: 10px 0;
123+
border: solid 1px #e7e1cd;
71124
background-color: #fffdef;
72125
overflow: auto;
73126
}
74127

75-
.icon_lists{
128+
.icon_lists {
76129
width: 100% !important;
77-
78130
}
79131

80-
.icon_lists li{
81-
float:left;
132+
.icon_lists li {
133+
float: left;
82134
width: 100px;
83-
height:180px;
135+
height: 180px;
84136
text-align: center;
85137
list-style: none !important;
86138
}
87-
.icon_lists .icon{
139+
.icon_lists .icon {
88140
font-size: 42px;
89141
line-height: 100px;
90142
margin: 10px 0;
91-
color:#333;
143+
color: #333;
92144
-webkit-transition: font-size 0.25s ease-out 0s;
93145
-moz-transition: font-size 0.25s ease-out 0s;
94146
transition: font-size 0.25s ease-out 0s;
95-
96147
}
97-
.icon_lists .icon:hover{
148+
.icon_lists .icon:hover {
98149
font-size: 100px;
99150
}
100151

101-
102-
103152
.markdown {
104153
color: #666;
105154
font-size: 14px;
@@ -240,7 +289,6 @@ margin: 0 auto;
240289
white-space: nowrap;
241290
color: #333;
242291
font-weight: 600;
243-
244292
}
245293

246294
.markdown > table th,
@@ -251,7 +299,7 @@ margin: 0 auto;
251299
}
252300

253301
.markdown > table th {
254-
background: #F7F7F7;
302+
background: #f7f7f7;
255303
}
256304

257305
.markdown blockquote {
@@ -292,7 +340,6 @@ margin: 0 auto;
292340
clear: both;
293341
}
294342

295-
296343
.hljs {
297344
display: block;
298345
background: white;
@@ -360,11 +407,6 @@ margin: 0 auto;
360407
text-decoration: underline;
361408
}
362409

363-
pre{
410+
pre {
364411
background: #fff;
365412
}
366-
367-
368-
369-
370-

‎app/assets/iconfont/demo_fontclass.html‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,72 @@
1-
21
<!DOCTYPE html>
32
<html>
3+
44
<head>
5-
<meta charset="utf-8"/>
5+
<meta charset="utf-8" />
66
<title>IconFont</title>
77
<link rel="stylesheet" href="demo.css">
88
<link rel="stylesheet" href="iconfont.css">
99
</head>
10+
1011
<body>
1112
<div class="main markdown">
1213
<h1>IconFont 图标</h1>
1314
<ul class="icon_lists clear">
14-
15-
<li>
15+
16+
<li>
1617
<i class="icon iconfont icon-tiaoshi"></i>
17-
<div class="name">调试</div>
18-
<div class="fontclass">.icon-tiaoshi</div>
19-
</li>
20-
21-
<li>
18+
<div class="name">调试</div>
19+
<div class="fontclass">.icon-tiaoshi</div>
20+
</li>
21+
22+
<li>
2223
<i class="icon iconfont icon-changjingguanli"></i>
23-
<div class="name">场景管理</div>
24-
<div class="fontclass">.icon-changjingguanli</div>
25-
</li>
26-
27-
<li>
24+
<div class="name">场景管理</div>
25+
<div class="fontclass">.icon-changjingguanli</div>
26+
</li>
27+
28+
<li>
2829
<i class="icon iconfont icon-fenxiangfangshi"></i>
29-
<div class="name">分享方式</div>
30-
<div class="fontclass">.icon-fenxiangfangshi</div>
31-
</li>
32-
33-
<li>
30+
<div class="name">分享方式</div>
31+
<div class="fontclass">.icon-fenxiangfangshi</div>
32+
</li>
33+
34+
<li>
3435
<i class="icon iconfont icon-bianji"></i>
35-
<div class="name">编辑</div>
36-
<div class="fontclass">.icon-bianji</div>
37-
</li>
38-
39-
<li>
36+
<div class="name">编辑</div>
37+
<div class="fontclass">.icon-bianji</div>
38+
</li>
39+
40+
<li>
4041
<i class="icon iconfont icon-guanlianshebei"></i>
41-
<div class="name">关联设备</div>
42-
<div class="fontclass">.icon-guanlianshebei</div>
43-
</li>
44-
45-
<li>
42+
<div class="name">关联设备</div>
43+
<div class="fontclass">.icon-guanlianshebei</div>
44+
</li>
45+
46+
<li>
4647
<i class="icon iconfont icon-guanfangbanben"></i>
47-
<div class="name">官方版本</div>
48-
<div class="fontclass">.icon-guanfangbanben</div>
49-
</li>
50-
51-
<li>
48+
<div class="name">官方版本</div>
49+
<div class="fontclass">.icon-guanfangbanben</div>
50+
</li>
51+
52+
<li>
5253
<i class="icon iconfont icon-gongnengdingyi"></i>
53-
<div class="name">功能定义</div>
54-
<div class="fontclass">.icon-gongnengdingyi</div>
55-
</li>
56-
57-
<li>
54+
<div class="name">功能定义</div>
55+
<div class="fontclass">.icon-gongnengdingyi</div>
56+
</li>
57+
58+
<li>
5859
<i class="icon iconfont icon-jichuguanli"></i>
59-
<div class="name">基础管理</div>
60-
<div class="fontclass">.icon-jichuguanli</div>
61-
</li>
62-
63-
<li>
60+
<div class="name">基础管理</div>
61+
<div class="fontclass">.icon-jichuguanli</div>
62+
</li>
63+
64+
<li>
6465
<i class="icon iconfont icon-jishufuwu"></i>
65-
<div class="name">技术服务</div>
66-
<div class="fontclass">.icon-jishufuwu</div>
67-
</li>
68-
66+
<div class="name">技术服务</div>
67+
<div class="fontclass">.icon-jishufuwu</div>
68+
</li>
69+
6970
</ul>
7071

7172
<h2 id="font-class-">font-class引用</h2>
@@ -74,10 +75,10 @@ <h2 id="font-class-">font-class引用</h2>
7475
<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
7576
<p>与unicode使用方式相比，具有如下特点：</p>
7677
<ul>
77-
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
78-
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
79-
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
80-
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
78+
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
79+
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
80+
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
81+
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
8182
</ul>
8283
<p>使用步骤如下：</p>
8384
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
@@ -87,8 +88,9 @@ <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</
8788
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
8889
<pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
8990
<blockquote>
90-
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
91+
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
9192
</blockquote>
9293
</div>
9394
</body>
94-
</html>
95+
96+
</html>

0 commit comments

Comments
 (0)