-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
333 lines (299 loc) · 16.7 KB
/
demo.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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>前端项目</title>
<script type="text/javascript" src="js/tool.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/base_drag.js"></script>
<script type="text/javascript" src="js/base_form.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div id="main_header">
<div id="header">
<div class="logo"><img src="images/logo.gif" alt="" /></div>
<div class="member">个人中心
<ul class="member_ul">
<li><a href="###">发文</a></li>
<li><a href="###">换肤</a></li>
<li><a href="###">帮助</a></li>
<li><a href="###">退出</a></li>
</ul>
</div>
<div class="reg">注册</div>
<div class="login">登陆</div>
<div class='info'></div>
</div>
</div>
<div id="reg">
<h2><img src="images/close.png" alt="" class="close" />会员注册</h2>
<form name="reg">
<dl>
<dd class="user">用 户 名：<input type="text" name="user" class="text" style="margin-left:7px" />
<span class="info info_user">请输入用户名，2~20位，由字母、数字和下划线组成！</span>
<span class="error error_user">输入不合法，请重新输入！</span>
<span class="succ succ_user">可用</span>
<span class='loading'>正在检测用户名</span>
</dd>
<dd>密 码： <input type="password" name="pass" class="text" />
<span class="info info_pass">
<p>安全级别：<strong class="s s1">■</strong><strong class="s s2">■</strong><strong class="s s3">■</strong><strong class="s s4" style="font-weight:normal"></strong></p>
<p><strong class="q1" style="font-weight:normal">○</strong>6-20个字符</p>
<p><strong class="q2" style="font-weight:normal">○</strong>只能包含大小写字母、数字和非空格字符</p>
<p><strong class="q3" style="font-weight:normal">○</strong>大、小写字母、数字、非空字符，至少两种</p>
</span>
<span class="error error_pass">输入不合法，请重新输入！</span>
<span class="succ succ_pass">可用</span>
</dd>
<dd>密码确认： <input type="password" name="notpass" class="text" />
<span class="info info_notpass">请再一次输入密码！</span>
<span class="error error_notpass">密码不一致，请重新输入！</span>
<span class="succ succ_notpass">可用</span>
</dd>
<dd><span style="vertical-align:-2px">提 问：</span> <select name="ques">
<option value="0">- - - - 请选择 - - - -</option>
<option value="1">- - 您最喜欢吃的菜</option>
<option value="2">- - 您的狗狗的名字</option>
<option value="3">- - 您的出生地</option>
<option value="4">- - 您最喜欢的明星</option>
</select>
<span class="error error_ques">尚未选择提问，请选择！</span>
</dd>
<dd>回 答： <input type="text" name="ans" class="text" />
<span class="info info_ans">请输入回答，2~23位！</span>
<span class="error error_ans">回答不合法，请重新输入！</span>
<span class="succ succ_ans">可用</span>
</dd>
<dd>电子邮件： <input type="text" name="email" class="text" />
<span class="info info_email">请输入电子邮件！</span>
<span class="error error_email">地址不合法，请重新输入！</span>
<span class="succ succ_email">可用</span>
<ul class="all_email">
<li><span></span>@qq.com</li>
<li><span></span>@163.com</li>
<li><span></span>@sohu.com</li>
<li><span></span>@sina.com.cn</li>
<li><span></span>@gmail.com</li>
</ul>
</dd>
<!-- 使用了html的新特性 不兼容IE
<dd class="birthday"><span style="vertical-align:-2px">生 日：</span> <select name="year">
<option value="0">- 请选择 -</option>
</select> 年
<select name="month">
<option value="0">- 请选择 -</option>
</select> 月
<select name="day">
<option value="0">- 请选择 -</option>
</select> 日</dd> -->
<dd class="birthday"><span style="vertical-align:-2px">生 日：<input type="date" name="birthday"></span>
<span class="error error_birthday">尚未选择生日，请选择！</span>
</dd>
<dd style="height:105px;"><span style="vertical-align:85px">备 注：</span> <textarea name="ps"></textarea></dd>
<dd style="display:block;" class="ps">还可以输入<strong class="num">200</strong>字</dd>
<dd style="display:none;" class="ps">已超过<strong class="num"></strong>字,<span class="clear">清尾</span></dd>
<dd style="padding:0 0 0 80px;"><input type="button" class="submit" name="sub"/></dd>
</dl>
</form>
</div>
<div id="login">
<h2><img src="images/close.png" alt="" class="close" />网站登录</h2>
<form name="login">
<div class='info'></div>
<div class="user"> 账 号 <input type="text" name="user" class="text" /></div>
<div class="pass"> 密 码 <input type="password" name="pass" class="text" /></div>
<div class="button"><input type="button" name="sub" class="submit" value="" /></div>
<div class="other">如有疑问 | 忘记密码?</div>
</form>
</div>
<div id="blog">
<h2><img src="images/close.png" alt="" class="close" />发表博文</h2>
<div class="info"></div>
<form name="blog">
<dl>
<dd>标 题： <input type="text" name="title" class="title" /> (*不可为空)</dd>
<dd><span style="vertical-align:85px">内 容：</span> <textarea name="content" class="content"></textarea> <span style="vertical-align:45px">(*不可为空)</span></dd>
<dd style="padding:10px 0 0 86px;"><input type="button" name="sub" class="submit" /></dd>
</dl>
</form>
</div>
<div id="skin">
<h2><img src="images/close.png" alt="" class="close" />更换皮肤</h2>
<div class="skin_bg">
</div>
</div>
<div id="nav">
<ul class="about">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="black">
<li>首页</li>
<li>博文列表</li>
<li>精彩相册</li>
<li>动感音乐</li>
<li>关于我</li>
</ul>
<div class="nav_bg">
<ul class="white">
<li>首页</li>
<li>博文列表</li>
<li>精彩相册</li>
<li>动感音乐</li>
<li>关于我</li>
</ul>
</div>
</div>
<div id="main">
<div id="sidebar">
<h2>教育博文</h2>
<ul>
<li><a href="###">靠自己95后女学生被16所国外名校录取</a></li>
<li><a href="###">00后的成长烦恼：压力巨大成隐形杀手</a></li>
<li><a href="###">一年组学MIT的33门课。疯狂学习方法</a></li>
<li><a href="###">申请赴美读研人数下降5%7年来首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
</ul>
<h2>社会博文</h2>
<ul>
<li><a href="###">靠自己95后女学生被16所国外名校录取</a></li>
<li><a href="###">00后的成长烦恼：压力巨大成隐形杀手</a></li>
<li><a href="###">一年组学MIT的33门课。疯狂学习方法</a></li>
<li><a href="###">申请赴美读研人数下降5%7年来首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
</ul>
<h2>学习园地</h2>
<ul>
<li><a href="###">靠自己95后女学生被16所国外名校录取</a></li>
<li><a href="###">00后的成长烦恼：压力巨大成隐形杀手</a></li>
<li><a href="###">一年组学MIT的33门课。疯狂学习方法</a></li>
<li><a href="###">申请赴美读研人数下降5%7年来首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒与美女被赞</a></li>
</ul>
</div>
<div id="index"><div class="content" style="opacity: 1;"><h2><em>2017-03-24 00:11:43</em>26家央企表态参与雄安新区建设：9家设领导小组</h2><p>澎湃新闻（www.thepaper.cn）截至4月8日晚间的统计显示，4月4日至4月7日这4天时间，在国务院国资委监管的102家中央企业中，至少已有26家央企表态要参加雄安新区建设。如果算上4月7日晚间表态的金融央企建设银行，这一表态规模还将至少扩大到27家。
从时间轴上看，4月4日，是清明小长假的最后一天。在当天，国家开发投资公司已经打响头炮。4月4日下午，国家开发投资公司党组就召开党组扩大会议，传达学习中共中央、国务院关于设立雄安新区的通知精神。会议还决定成立相关工作领导小组和领导小组办公室，并加快推进有关工作的落实。</p></div><div class="content" style="opacity: 1;"><h2><em>2017-03-24 00:11:01</em>内蒙古小伙200天穷游50多个城市 剃光头发在寺庙当义工</h2><p>一个背包、一台相机、4000元现金……在大学同学都忙着找工作的时候，内蒙古自治区呼和浩特市90后小伙杨早龙开始了穷游之旅。
在200多天的时间里，他穷游了全国10多个省份、50多个城市。
“从小就对没去过的地方充满想象和期待，想去体验各个地方不同的风土人情。”说起穷游，杨早龙决心要体验一种不一样的人生。
2016年9月，跟父母告别之后，杨早龙开始了自己的环游中国之旅。
新疆、四川、西藏、江苏、浙江……杨早龙一路上走走停停，基本靠搭顺风车行进。一路走来，杨早龙收获了很多，有感动、有信任、有友情。最重要的是，他还成为了一名义工。</p></div><div class="content" style="opacity: 1;"><h2><em>2017-03-23 23:06:35</em>埃及一天内两个城市教堂发生爆炸 已致30人死亡</h2><p>中新网4月9日电据俄罗斯卫星网消息，埃及坦塔市一教堂附近的爆炸事故已致数十人死亡，70人受伤。克里姆林宫称，普京就发生在坦塔的恐怖袭击向埃及总统表示慰问。
据黎巴嫩Al-Manar电视台援引埃及高官的话称，埃及坦塔市一教堂附近发生爆炸，50至70人受伤。
据Joum7新闻门户网消息，埃及安全部队抓获参与埃及坦塔市教堂爆炸的嫌疑人。据初步消息显示，该男子当时正在教堂附近。他已被带至警察局，目前正在对其进行审讯。</p></div></div>
<div id="banner">
<img src="images/banner1.jpg" alt="第一张轮播图片">
<img src="images/banner2.jpg" alt="第二张轮播图片">
<img src="images/banner3.jpg" alt="第三张轮播图片">
<ul>
<li class='banner1'>●</li>
<li class='banner2'>●</li>
<li class='banner3'>●</li>
</ul>
<span></span>
<strong></strong>
</div>
<div id="photo">
<dl>
<dt><img xsrc="images/p1.jpg" bigsrc="images/p1big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p2.jpg" bigsrc="images/p2big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p3.jpg" bigsrc="images/p3big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p4.jpg" bigsrc="images/p4big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p5.jpg" bigsrc="images/p5big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p6.jpg" bigsrc="images/p6big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p7.jpg" bigsrc="images/p7big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p8.jpg" bigsrc="images/p8big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p9.jpg" bigsrc="images/p9big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p10.jpg" bigsrc="images/p10big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p11.jpg" bigsrc="images/p11big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="images/p12.jpg" bigsrc="images/p12big.jpg" src="images/wait_load.jpg" class="wait_load" alt="" /></dt>
<dd>延迟加载图片</dd>
</dl>
</div>
<div id="footer">
<p>write by oldchicken 博客前端</p>
<p>Copyright ALL Reset:XXX 苏备案号：123456</p>
</div>
</div>
<div id="photo_big">
<h2><img src="images/close.png" alt="" class="close" />图片预加载</h2>
<div class="big">
<img src="images/loading.gif" alt="" />
<strong class="sl"><</strong>
<strong class="sr">></strong>
<span class="left"></span>
<span class="right"></span>
<em class="index"></em>
</div>
</div>
<div id="share">
<h2>分享到</h2>
<ul>
<li><a href="###" class="a">一键分享</a></li>
<li><a href="###" class="b">新浪微博</a></li>
<li><a href="###" class="c">人人网</a></li>
<li><a href="###" class="d">百度相册</a></li>
<li><a href="###" class="e">腾讯朋友</a></li>
<li><a href="###" class="f">豆瓣网</a></li>
<li><a href="###" class="g">百度新首页</a></li>
<li><a href="###" class="h">和讯微博</a></li>
<li><a href="###" class="i">QQ 空间</a></li>
<li><a href="###" class="j">百度搜索</a></li>
<li><a href="###" class="k">腾讯微博</a></li>
<li><a href="###" class="l">开心网</a></li>
<li><a href="###" class="m">搜狐微博</a></li>
<li><a href="###" class="n">百度贴吧</a></li>
<li><a href="###" class="o">QQ 好友</a></li>
<li><a href="###" class="p">更多...</a></li>
</ul>
<div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>
<div id="loading">
<p>加载中</p>
</div>
<div id="success">
<p>成功</p>
</div>
<div id="screen"></div>
<div id='text' style="clear:both"></div>
</body>
</html>