-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
212 lines (183 loc) · 8.66 KB
/
index.html
File metadata and controls
212 lines (183 loc) · 8.66 KB
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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sting-UI</title>
<link rel="stylesheet" href="./build/css/main.css">
<style rel="stylesheet">
.section {
width: 1036px;
margin: 0 auto 20px;
}
.ie-btn {
display: inline-block;
*display: inline;
*zoom: 1;
padding: 0 15px;
line-height: 32px;
width: auto;
overflow: visible;
}
/*border模拟tips*/
.message-box { position:relative; float:left; margin:80px 0 0 100px; width:240px; height:60px; line-height:60px; background:#E9FBE4; box-shadow:1px 2px 3px #E9FBE4; border:1px solid #C9E9C0; border-radius:4px; text-align:center; color:#0C7823; }
.triangle{
position: absolute;
left: 30px;
bottom: -10px;
}
.triangle-border { position:absolute; left:30px; overflow:hidden; width:0; height:0; border-width:10px 10px 0 10px; border-style:solid dashed dashed dashed; }
.tb-border { bottom:-1px; border-color:#C9E9C0 transparent transparent transparent; }
.tb-background { bottom:0; border-color:#E9FBE4 transparent transparent transparent; }
</style>
</head>
<body>
<div class="wrapper">
<div class="section">
<div class="message-box">
<span>我是利用 border 属性实现的</span>
<div class="triangle">
<div class="triangle-border tb-border"></div>
<div class="triangle-border tb-background"></div>
</div>
</div>
</div>
<div class="section">
<h1>UI</h1>
</div>
<div id="example" class="section">
<a href="javascript:void(0);" class="btn">立即预订</a>
<a href="javascript:void(0);" class="btn btn-hover">立即预订</a>
<a href="javascript:void(0);" class="btn btn-active">立即预订</a>
<a href="javascript:void(0);" class="btn btn-dis">立即预订立即预订</a>
</div>
<div class="section">
<a href="javascript:void(0);" class="btn btn-primary">立即预订</a>
<a href="javascript:void(0);" class="btn btn-primary btn-hover">立即预订</a>
<a href="javascript:void(0);" class="btn btn-primary btn-active">立即预订</a>
<a href="javascript:void(0);" class="btn btn-primary btn-dis">立即预订立即预订立即预订</a>
</div>
<div class="section">
<button class="btn">立即预订</button>
<div class="btn">立即预订</div>
</div>
<div class="section">
<a href="javascript:void(0);" class="btn">立即预订</a>
<a href="javascript:void(0);" class="btn btn-buy">立即预订</a>
<a href="javascript:void(0);" class="btn btn-primary">立即预订</a>
<a href="javascript:void(0);" class="btn btn-success">立即预订立即预订</a>
<a href="javascript:void(0);" class="btn btn-green-light">立即预订</a>
<a href="javascript:void(0);" class="btn btn-info">立即预订</a>
<a href="javascript:void(0);" class="btn btn-danger">立即预订</a>
<a href="javascript:void(0);" class="btn btn-black">立即预订立即预订</a>
</div>
</div>
<div class="wrapper">
<div class="section">
<input type="text" class="input" placeholder="normaol">
<input type="text" class="input inp-error" placeholder="error">
<input type="text" class="input inp-suc" placeholder="success">
</div>
<div class="section">
<input type="text" class="input inp-xsmall" placeholder="normaol">
<input type="text" class="input inp-small" placeholder="normaol">
<input type="text" class="input inp-large" placeholder="normaol">
<input type="text" class="input inp-xlarge" placeholder="normaol">
</div>
<div class="section">
<div class="ctrl-form" style="position: relative;z-index: 40;">
<label for="" class="ctrl-label">手机号码</label>
<div class="input-wrap">
<input name="mobile" autocomplete="off" maxlength="11" type="text" data-jvalid-ruler="empty mobile_err" class="input">
<i class="icon"></i>
<input type="checkbox">
</div>
</div>
</div>
<div class="section">
<div class="ctrl-form">
<label for="js-contact" class="ctrl-label">联系人手机号</label>
<div class="ctrl-input input-wrap">
<span class="inp-err-wrap js_err_wrap">
<input type="text" class="input concact-inp inp-error" data-jvalidator-pattern="need-mobile&mobile" name="contactMob" placeholder="必填">
<div class="err-cont js_err_cont">
<div class="err-inner js_err_tip">手机号不能为空</div>
<span class="err-caret"><span class="caret-inner"></span></span>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="section">
<div class="alert">
这是一条提示信息！
</div>
<div class="alert alert-error">
这是一条提示信息！这是一条提示信息！这是一条提示信息！这是一条提示信息！这是一条提示信息！这是一条提示信息！ 这是一条提示信息！这是一条提示信息！这是一条提示信息！这是一条提示信息！这是一条提示信息！这是一条提示信息！
</div>
<div class="alert alert-info">
这是一条提示信息！Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more likely to push features out to userland instead.
</div>
<div class="alert alert-suc">
这是一条提示信息！
</div>
<div class="alert alert-warn">
这是一条提示信息！
</div>
</div>
</div>
<div class="wrapper">
<div class="section">
<div class="tip">
<div class="tip-inner">
<div class="tip-cont">this is a tip!这是一条提示信息！Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more likely to push features out to userland instead.</div>
<div class="tip-caret">
<i class="caret-outer"></i>
<i class="caret-inner"></i>
</div>
</div>
</div>
<div class="tip tip-warn">
<div class="tip-inner">
<div class="tip-cont">this is a tip!这是一条提示信息！Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more likely to push features out to userland instead.</div>
<div class="tip-caret">
<i class="caret-outer"></i>
<i class="caret-inner"></i>
</div>
</div>
</div>
<div class="tip tip-suc">
<div class="tip-inner">
<div class="tip-cont">this is a tip!这是一条提示信息！</div>
<div class="tip-caret">
<i class="caret-outer"></i>
<i class="caret-inner"></i>
</div>
</div>
</div>
<div class="tip-noborder">
<div class="tip-inner">
<div class="tip-cont">this is a tip!这是一条提示信息！</div>
<div class="tip-caret"></div>
</div>
</div>
<div class="tip">
<div class="tip-inner">
<div class="tip-cont">this is a tip!这是一条提示信息！</div>
<div class="tip-caret">
<i class="caret-outer"></i>
<i class="caret-inner"></i>
</div>
</div>
</div>
</div>
</div>
<!--Script Start-->
<script src="http://js.io/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
</script>
<!--/Script End-->
</body>
</html>