-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
240 lines (239 loc) · 9 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>乘风破浪-努力做前端</title>
<link rel="shotcut icon" href="img/icon.png">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 顶部 -->
<header id="header">
<div class="container">
<a href="index.html"><img class="logo" src="img/logo.png" alt="乘风破浪" /></a>
<div class="header_right">
<a href="javascript:void(0)" class="regbtn">注册</a>
<a href="javascript:void(0)" class="member">用户</a>
|
<a href="javascript:void(0)" class="loginbtn">登录</a>
<a href="javascript:void(0)" class="logout">退出</a>
<span class="info"></span>
<div class="center">个人中心
<ul class="center_ul">
<li><a href="javascript:void(0)" class="issuebtn">发文</a></li>
<li><a href="javascript:void(0)" class="skinbtn">换肤</a></li>
<li><a href="###">设置</a></li>
<li><a href="###">帮助</a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- /顶部 -->
<!-- 导航栏 -->
<div id="nav">
<ul class="nav_4">
<a href="index.html"><li></li></a>
<a href="article.html"><li></li></a>
<a href="work.html"><li></li></a>
<a href="book.html"><li></li></a>
<a href="about.html"><li></li></a>
</ul>
<div class="nav_2 nav_2_on nav_2_on_1">
<ul class="nav_3 nav_3_on nav_3_on_1">
<li>首页</li>
<li>文章</li>
<li>作品</li>
<li>书架</li>
<li>关于</li>
</ul>
</div>
<ul class="nav_1">
<li>首页</li>
<li>文章</li>
<li>作品</li>
<li>书架</li>
<li>关于</li>
</ul>
</div>
<!-- /导航栏 -->
<!-- 页面主体 -->
<div id="main">
<div class="container">
<div id="banner">
<a href="#"><img class="img_on" src="img/banner1.jpg" alt="轮播器第一张" /></a>
<a href="#"><img src="img/banner2.jpg" alt="轮播器第二张" /></a>
<a href="#"><img src="img/banner3.jpg" alt="轮播器第三张" /></a>
<ul>
<li class="control_on"></li>
<li></li>
<li></li>
</ul>
<span></span>
<strong></strong>
</div>
<div id="main_left">
<div class="content">
</div>
</div>
<div id="main_right">
<div id="accordion">
<h3>HTML</h3>
<div>
<a href="#">html第一项</a>
<a href="#">html第二项</a>
<a href="#">html第三项</a>
</div>
<h3>CSS</h3>
<div>
<a href="#">CSS第一项</a>
<a href="#">CSS第二项</a>
<a href="#">CSS第三项</a>
</div>
<h3>JavaScript</h3>
<div>
<a href="#">JavaScript第一项</a>
<a href="#">JavaScript第二项</a>
<a href="#">JavaScript第三项</a>
</div>
</div>
<div class="hot_list">
</div>
</div>
<div id="tabs">
<ul>
<li><a href="javascript:void(0)" class="img_game" alt="2">风景名胜</a></li>
<li><a href="javascript:void(0)" class="img_view" alt="1">游戏人物</a></li>
<li><a href="javascript:void(0)" class="img_movie" alt="3">电影动漫</a></li>
</ul>
</div>
</div>
</div>
<!-- /页面主体 -->
<!-- 一键分享 -->
<div id="share">
<h2>分享到</h2>
<ul>
<li><a href="###" class="a" target="_blank">一键分享</a></li>
<li><a href="###" class="b" target="_blank">新浪微博</a></li>
<li><a href="###" class="c" target="_blank">人人网</a></li>
<li><a href="###" class="d" target="_blank">百度相册</a></li>
<li><a href="###" class="e" target="_blank">腾讯朋友</a></li>
<li><a href="###" class="f" target="_blank">豆瓣网</a></li>
<li><a href="###" class="g" target="_blank">百度新首页</a></li>
<li><a href="###" class="h" target="_blank">和讯微博</a></li>
<li><a href="###" class="i" target="_blank">QQ 空间</a></li>
<li><a href="###" class="j" target="_blank">百度搜藏</a></li>
<li><a href="###" class="k" target="_blank">腾讯微博</a></li>
<li><a href="###" class="l" target="_blank">开心网</a></li>
<li><a href="###" class="m" target="_blank">百度贴吧</a></li>
<li><a href="###" class="n" target="_blank">搜狐微博</a></li>
<li><a href="###" class="o" target="_blank">QQ 好友</a></li>
<li><a href="###" class="p" target="_blank">更多...</a></li>
</ul>
<div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>
<!-- /一键分享 -->
<!-- 用户注册弹窗 -->
<form id="reg" action="123.html" title="用户注册">
<ol class="reg_error"></ol>
<p>
<label for="user">帐号：</label>
<input type="text" name="user" class="text" id="user" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" class="text" id="pass" />
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" />
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label></input><input type="radio" name="sex" value="female" id="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="birthday" readonly="readonly" class="text" id="date" />
</p>
</form>
<!-- /用户注册弹窗 -->
<!-- 用户登陆弹窗 -->
<form id="login" title="用户登录">
<ol class="login_error"></ol>
<p>
<label for="user">帐号：</label>
<input type="text" name="login_user" class="text" id="login_user" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="login_pass" class="text" id="login_pass" />
<span class="star">*</span>
</p>
<p>
<input type="checkbox" name="expires" id="expires" checked="checked" /><label for="expires">登录后有效期一周</label>
</p>
</form>
<!-- /用户登陆弹窗 -->
<!-- 发文弹窗 -->
<form id="issue" title="发表博文">
<ol class="issue_error"></ol>
<p>
<label for="issue_title">文章标题：</label>
<input type="text" name="issue_title" style="width:360px;" id="issue_title" placeholder="请输入文章標題！"/>
<span class="star">*</span>
</p>
<p>
<textarea class="issue_content" name="issue_content" placeholder="请输入文章内容！"></textarea>
</p>
</form>
<!-- 发文弹窗 -->
<!-- 换肤弹窗 -->
<form id="skin" title="更换皮肤"></form>
<!-- /换肤弹窗 -->
<!-- 图片预加载 -->
<form id="preload" title="图片预加载">
<dl>
<dt class="left"></dt>
<dd class="pre_img"><</dd>
<dt><img class="big_img" alt="big_img" /></dt>
<dt class="right"></dt>
<dd class="next_img">></dd>
</dl>
</form>
<!-- /图片预加载 -->
<!-- 交互中弹窗 -->
<div id="loading">数据交互中...</div>
<!-- /交互中弹窗 -->
<!-- 错误弹窗 -->
<div id="error">请登录后操作...</div>
<!-- /错误弹窗 -->
<!-- 底部 -->
<footer id="footer">
<div class="container">
<!-- 备案信息 -->
<span>© 2016 guochengfeng 浙ICP备12345678号-1</span>
<span>guochengfeng.cn 京ICP备87654321号-2 京公安网备110110110110-2</span>
<!-- /备案信息 -->
</div>
</footer>
<!-- /底部 -->
<script type="text/javascript" src="js/jquery-2.2.3.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>