forked from qianlongo/cssSkills
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (144 loc) · 5.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssSkills</title>
<link rel="stylesheet" href="/build/css/index.css" >
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<div class="basic">
<h3>1、清除浮动</h3>
<ul class="clearfix demo1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="basic">
<h3>2、元素垂直水平居中</h3>
<div class="center-wrap mgb10 demo2">
<div class="center1">
绝对定位方式且已知宽高
</div>
</div>
<div class="center-wrap mgb10 demo2">
<div class="center2 pd10">
绝对定位+未知宽高+translate
</div>
</div>
<div class="center-wrap center3 demo2">
<span class="pd10">
flex 轻松搞定水平垂直居中( 未知宽高)
</span>
</div>
</div>
<div class="basic">
<h3>3、文本末尾添加省略号</h3>
<div class="ellipsis mgb10 wh120 pd10 demo3">
单行文本<strong>宽度固定</strong>溢出情况
</div>
<div class="more-line pad10 demo3">
多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定
多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定
多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定
多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定
多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定
多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定,多行文本宽度不固定
</div>
</div>
<div class="basic">
<h3>4、制造文本的模糊效果</h3>
<div class="blurry demo4">
this text is so blurry
</div>
</div>
<div class="basic">
<h3>5、动画实现简洁loading效果</h3>
<div class="loading pd10 demo4">
loading
</div>
</div>
<div class="basic">
<h3>6、自定义文本选中样式</h3>
<div class="selection pd10 demo4">
自定义文本选中样式，自定义文本选中样式，自定义文本选中样式
</div>
</div>
<div class="basic">
<h3>7、顶角贴纸效果</h3>
<div class="ribbon-wrap clearfix demo6">
<div class="wrap">
<div class="ribbon top-left">
<a href="#">Fork me on GitHub</a>
</div>
</div>
<div>
<div class="ribbon bottom-left">
<a href="#">Fork me on GitHub</a>
</div>
</div>
<div>
<div class="ribbon bottom-right">
<a href="#">Fork me on GitHub</a>
</div>
</div>
<div>
<div class="ribbon top-right">
<a href="#">Fork me on GitHub</a>
</div>
</div>
</div>
</div>
<div class="basic">
<h3>8、input占位符样式</h3>
<div class="placeholder demo8">
<input type="text" name="" placeholder="这是默认的占位符" id="">
<span>
<input type="text" name="" class="modify" placeholder="这是修改后的占位符" id="">
</span>
</div>
</div>
<div class="basic">
<h3>9、移动端可点击元素默认边框</h3>
<div class="remove-highlight demo8">
<a href="http://qianlongo.github.io/">移动端点击链接默认</a>
<a href="http://qianlongo.github.io/">移动端点击链接修改后</a>
</div>
</div>
<div class="basic">
<h3>10、首字下沉</h3>
<p class="sink demo10">
首字下沉 ,we love coding
</p>
</div>
<div class="basic">
<h3>11、三角形</h3>
<span class="triangle bottom demo11"></span>
<span class="triangle right demo11"></span>
<span class="triangle top demo11"></span>
<span class="triangle left demo11"></span>
</div>
<div class="basic">
<h3>12、强制元素hover出现鼠标手型</h3>
<div class="pointer demo12">
<a href="http://qianlongo.github.io/">超链接</a>
<input type="submit" value="submit" />
<input type="image" value="image">
<input type="button" value="button">
<button>button2</button>
<label for="">label</label>
<select>
<option value="">select1</option>
<option value="">select2</option>
<option value="">select3</option>
</select>
</div>
</div>
<div class="basic">
<h3>13、移动端屏蔽黑色外框</h3>
<a href=""></a>
</div>
</body>
</html>