-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
211 lines (206 loc) · 11.5 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
<!DOCTYPE html>
<html lang="zh-CN" manifest="cache.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 注意，要想对手机显示友好，请在head之间加上-->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<title>liuyunqiang</title>
</head>
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="common.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<body>
<bgsound src=”1.mpp3” loop=-1>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">我的网站</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">帮助 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">企业</a></li>
<li><a href="#">商户</a></li>
<li><a href="#">服务网站</a></li>
<li class="divider"></li>
<li class="nav-header">灰掉</li>
<li><a href="#">分割线1</a></li>
<li><a href="#">分割线2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/examples/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>如何加入本网站.</h1>
<p class="lead">页面很棒，页面很炫，页面很好看</p>
<a class="btn btn-large btn-primary" href="#">马上注册</a>
</div>
</div>
</div>
<div class="item">
<img src="img/examples/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>如何使用本网站.</h1>
<p class="lead">采用当今世界最流行的前端框架，给用户一流的用户体验</p>
<a class="btn btn-large btn-primary" href="#">了解更多</a>
</div>
</div>
</div>
<div class="item">
<img src="img/examples/slide-03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>本网站还有更多优势.</h1>
<p class="lead">消除旧网站的视觉疲劳，从现在开始.</p>
<a class="btn btn-large btn-primary" href="#">链接到BootStrap</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<div class="container-login">
<form class="form-signin">
<h2 class="form-signin-heading">请登录：</h2>
<input type="text" class="input-block-level" placeholder="电子邮箱">
<input type="password" class="input-block-level" placeholder="密码">
<label class="checkbox">
<input type="checkbox" value="remember-me"> 记住我
</label>
<button class="btn btn-large btn-primary" type="submit">登录</button>
</form>
</div>
<article class="container">
<section class="row" id="travel">
<div class="span12 panel" style="display: block;">
<div class="row">
<div class="span6">
<div class="block-left">
<h1>旅行</h1>
<p class="wo">我是一个爱旅游的人，每年有将近四分之一的时间都在路上。走遍世界周游列国，对我而言并不止于是个梦想而已。</p>
<br>
<p class="wo">我觉得....</p>
<br>
<a data-toggle="modal" href="#aboutMaps">关于地图数据</a>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade" id="aboutMaps">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h3 id="myModalLabel">关于地图数据</h3>
</div>
<div class="modal-body">
<p>地图数据来自<a target="_blank" href="http://www.naturalearthdata.com/">Natural Earth</a></p>
<p>中华人民共和国地图</p>
<hr class="soften">
<h4>关于坐标点数据</h4>
<p>地图中以红点标示的为我曾到达过的城市，其中：</p>
<ul>
<li><p>若</p></li>
<li><p>2009 年</p></li>
<li><p>坐标点和其中所标出的到达年份为非完整数据；</p></li>
<li><p>最后更新时间：2013 年 5 月</p></li>
</ul>
</div>
<div class="modal-footer">
<button aria-hidden="true" data-dismiss="modal" class="btn">关闭</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="row" id="apple">
<div class="span12 panel relative" style="display: block;">
<img src="img/ribbon-apple.png" class="ribbon-apple">
<div class="row">
<div class="span6">
<img src="img/mockedup-news.png" class="ipad-news">
</div>
<div class="span6">
<div class="padding-huge">
<h1>Apple</h1>
<p class="wo">我对 Apple 产品的热爱近乎狂热，是一名真正的铁杆果粉</p>
<br>
<a target="_blank" href="http://www.google.com/" class="visible-desktop">相关新闻报道 »</a>
</div>
</div>
</div>
</div>
</section>
<section class="row" id="contact">
<div class="span12 panel" style="display: block;">
<div class="row">
<div class="span12">
<div class="padding-large">
<h1>联系</h1>
<div class="muiti-contact">
<span class="email"><email title="" data-toggle="tooltip" data-original-title="Email">www</email><at class="">.cnblogs.</at><sns title="" data-toggle="tooltip" class="" data-original-title="社交网络">com</sns><web title="个人网站" data-toggle="tooltip">/sharpxiajun</web></span>
<!--[if lt IE 9]>
<p class="text-warning">当前浏览器不支持该模块的交互效果，无法动态展示联系方式，建议换用更高级的浏览器。</p>
<p class="text-info">Twitter, Instagram, Path, 新浪微博、腾讯微博和微信的名称为 @dandyweng</p>
<![endif]-->
</div>
</div>
</div>
<div class="span12">
<div class="padding-large">
<div class="sns">
<div class="sns-container">
<a target="_blank" href="http://www.facebook.com/dandyweng"><div title="" data-toggle="tooltip" class="sns-icon" id="icon-facebook" data-original-title="Facebook"><img src="img/facebook.png"></div></a>
<a target="_blank" href="http://twitter.com/dandyweng"><div title="" data-toggle="tooltip" class="sns-icon" id="icon-twitter" data-original-title="Twitter"><img src="img/twitter.png"></div></a>
<a target="_blank" href="http://instagram.com/dandyweng"><div title="" data-toggle="tooltip" class="sns-icon" id="icon-instagram" data-original-title="Instagram"><img src="img/instagram.png"></div></a>
<a target="_blank" href="javascript:;"><div title="" data-toggle="tooltip" class="sns-icon" id="icon-path" data-original-title="Path"><img src="img/path.png"></div></a>
</div>
<div class="sns-container">
<a target="_blank" href="http://weibo.com/dandyweng"><div title="新浪微博" data-toggle="tooltip" class="sns-icon" id="icon-sinaweibo"><img src="img/SinaWeibo.png"></div></a>
<a target="_blank" href="http://t.qq.com/dandyweng"><div title="腾讯微博" data-toggle="tooltip" class="sns-icon" id="icon-tencentweibo"><img src="img/TencentWeibo.png"></div></a>
<a target="_blank" href="javascript:;"><div title="微信" data-toggle="tooltip" class="sns-icon" id="icon-wechat"><img src="img/wechat.png"></div></a>
<a target="_blank" href="javascript:;"><div title="QQ 暂时保密" data-toggle="tooltip" class="sns-icon" id="icon-qq"><img src="img/qq.png"></div></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</article>
<div class="container marketing">
<footer>
<p class="pull-right"><a href="#">操作</a></p>
<p>© 2013 Web前端研究, Good. · <a href="#">学习资料</a> · <a href="#">夏森</a></p>
</footer>
</div>
</body>
</html>