-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject.html
190 lines (178 loc) · 10.3 KB
/
project.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to Skyworth</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.5, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/project.css">
</head>
<body id="body">
<nav class="navbar-a navbar-fixed-top" style=" box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);" >
<div class="container-fluid">
<div class="navbar-header" >
<button class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-list" style="font-size: 20px"></span>
</button>
<a href="index.html" ><p class="navbar-brand nav-tool" style="font-size:21px;height: 40px;">Skyworth Club</p></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li style="background-color: #616161"><a href="project.html"class="nav-tool" >Project</a></li>
<li><a href="activity.html"class="nav-tool">Activity</a></li>
<li><a href="About.html"class="nav-tool">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="box">
<div class="col-sm-3 col-md-2 sidebar ">
<div id="logo">
<img src="img/logo.png">
</div>
<div>
<ul class="nav nav-sidebar nav-stacked">
<li class="active button"><a data-toggle="pill" href="#one"><span>梦魇游戏</span></a></li>
<li class="button"><a data-toggle="pill" href="#two"><span>wei</span></a></li>
<li class="button"><a data-toggle="pill" href="#three"><span>二手市场</span></a></li>
<li class="button"><a data-toggle="pill" href="#four"><span>音乐APP</span></a></li>
</ul>
</div>
</div>
<div class=" col-md-10 col-sm-9 col-md-offset-2 col-sm-offset-3 tab-content">
<div id="one" class="tab-pane fade in active">
<div id="myCarousel" class="carousel slide col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2" data-ride="carousel">
<!--第一步：设计轮播图片的容器。-->
<!-- #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感-->
<ol class="carousel-indicators">
<!--第二步：设计轮播图片计数器。-->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
<li data-target="#myCarousel" data-slide-to="9"></li>
</ol>
<div class="" style="margin-top: 30px;">
<div class="carousel-inner"style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)"; role="listbox" >
<!--第三步：设计轮播图片播放区,使用 carousel-inner 样式来控制-->
<div class="item active">
<img src="img/p1-1.JPG" alt="" style="width: 100%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)">
</div>
<div class="item">
<img src="img/p1-2.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-3.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-4.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-5.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-6.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-7.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-8.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-9.JPG" alt="" style="width: 100%">
</div>
<div class="item">
<img src="img/p1-10.JPG" alt="" style="width: 100%">
</div>
</div>
<a class="carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control r" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<div id="two" class="tab-pane fade">
<div class="inner-text col-xs-12 col-sm-6 col-sm-offset-1 col-md-6 col-md-offset-1 col-lg-6 col-ld-offset-1">
<h3>蜀山战纪</h3>
<p>昆仑派一直都是江湖上首屈一指的名门正派，统领武林多年，在江湖上也有非常高的威望。昆仑掌门李景天 为保天下不陷入混乱，对抗企图抢夺血晶石的绿袍老祖，把血晶石打入天赋异禀的丁隐体内，丁隐也因为这个原因从此拜入蜀山门下修炼剑法，誓要练成昆仑绝学，替天下人向绿袍老祖寻仇。
偶然间，丁隐发现绿袍老祖之女玉罗刹竟然与他逝去的爱妻长得惊人的相似，于是二人便坠入情网。此时，昆仑剑派内部也是暗流涌动，一场武林浩劫即将来临，丁隐联合同门丹辰子、周青云、李紫英以及结拜兄弟小张，历经艰险，但是没有想到却陷入更大的阴谋，令众人分崩离析。
最后，丁隐为救众生，牺牲自己，与绿袍老祖同归于尽，玉罗刹伤心欲绝，独自浪迹江湖，完成丁隐的心愿，造福劳苦百姓。而丹辰子独自留在了昆仑山接任昆仑剑派掌门，江湖也等着昆仑派一众去合力行侠仗义，拯救天下苍生....
</p>
</div>
<div id="img-box" class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="img/15.jpeg" class="img">
</div>
</div>
<div id="three" class="tab-pane fade">
<div class="inner-text col-xs-12 col-sm-6 col-sm-offset-1 col-md-6 col-md-offset-1 col-lg-6 col-ld-offset-1">
<h3>杉杉来了</h3>
<p>虽然怀揣梦想，想通过自己努力成就一番事业，天性善良的杉杉是因为自己有着稀有血型被招进风腾，不过杉杉不忘初心，一直奋斗!为总裁妹妹输血后杉杉被嘉奖吃猪肝饭，慢慢演变成了封腾的专属挑菜工。
封腾变着法子折磨善良的杉杉，而杉杉几度反抗，却每次都输给技高一筹的封腾。之后封腾发小丽抒回国，对封腾表达心意展开攻势，并且与杉杉展开了竞争，而封腾好哥们郑棋因为爱上了丽抒而不得不帮衬着对付杉杉，这样的情形下，反而更使得两人坚定了在一起的决心，经历种种，杉杉与封腾修成正果，幸福虽然姗姗来迟，也算终于来到!
而杉杉在收获爱情的同时，也因为自身的不断努力，在事业上也取得了不小的成绩，完成了自己的梦想!</p>
</div>
<div id="img-box" class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="img/16.jpg" class="img">
</div>
</div>
<div id="four" class="tab-pane fade">
<div class="inner-text col-xs-12 col-sm-6 col-sm-offset-1 col-md-6 col-md-offset-1 col-lg-6 col-ld-offset-1">
<h3>诛仙·青云志</h3>
<p>草庙村少年张小凡，在经历全村尽灭的惨案后，被青云门收归门下。为报答师门恩情，张小凡勤学苦炼，却因自身驽钝，一无所成。陷入迷茫与孤独境遇中的他，幸有佹王之女碧瑶和好友林惊羽从旁安慰陪伴，渡过了人生最彷徨的阶段。
张小凡与林惊羽、陆雪琪、曾书书等善良热血的少年们一道，帮助良善，斩妖除恶。一次次的坎坷磨难中张小凡逐渐成长，而与碧瑶的感情，也在患难与共中日渐深厚。然而，佹王为复活兽神并颠覆青云，设下连环阴谋。
张小凡悍然迎敌，就在命悬一刻之即，碧瑶舍身为他挡下致命的一剑，重伤昏迷，小凡带着沉睡的碧瑶流浪世间。佹王死心不息，卷土重来，最终，张小凡以强大的勇气和信念，挫败佹王，消弭了正反两派纠葛千年的过节，完成了少年时与碧瑶、林惊羽一众同伴们的约定。在少年们的共同努力之下，终换得山河锦绣如画，沃土千里绵延。
</p>
</div>
<div id="img-box" class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<img src="img/17.jpg" class="img">
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if($(window).width()<768){
$(".sidebar").css("position","relative")
$(".sidebar").css("top","0px")
$(".navbar-right").css("margin-right","-15px")
}
else{
$(".navbar-right").css("margin-right","4%")
$(".sidebar").css("position","fixed")
$(".sidebar").css("top","51px")
}
$(window).resize(function(){
if($(window).width()<768){
$(".sidebar").css("position","relative")
$(".sidebar").css("top","0px")
$(".navbar-right").css("margin-right","-15px")
}
else{
$(".navbar-right").css("margin-right","4%")
$(".sidebar").css("position","fixed")
$(".sidebar").css("top","51px")
}
})
$("#logo").css("padding-left",($(".box ul").width()-80)/2+"px")
$(window).resize(function(){
$("#logo").css("padding-left",($(".box ul").width()-80)/2+"px")
})
$(".nav-tool").bind("mouseover",function(){
$(this).css("color","white")
$(this).css("opacity","0.5")
}).bind("mouseout",function(){
$(this).css("opacity",1)
})
})
</script>
</body>
</html>