-
Notifications
You must be signed in to change notification settings - Fork 0
/
plant.html
180 lines (163 loc) · 7.8 KB
/
plant.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>欢迎登录环元星球 - </title>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="CSS/font-awesome.min.css" rel="stylesheet"/>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="css/colorfulTab.min.css">
<link rel= "stylesheet" type="text/css" href="css/normalize.css" />
<link href="CSS/font-awesome.min.css" rel="stylesheet">
<link href="CSS/set_3.css" rel="stylesheet" >
<script src="js/jquery-3.1.1.min.js"></script>
<style>
.logo img {
/* 设置网页左上角LOGO */
width:204px;
height:79px;
}
/* 搜索框部分 */
div.search {
padding: 30px 0；float:left;
}
form {
position: relative;
width: 300px;
margin: 0 auto;
float:right;
}
.d3 {
background: #2c3e50;
}
/*#F9F0DA */
.d3 form {
background: #7BC3EB;
}
.d3 input, .d3 button {
float:left;
border: none;
outline: none;
background: transparent;
}
.d3 input {
width: 100%;
height: 42px;
padding-left: 15px;
}
.d3 button {
height: 42px;
width: 42px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.d3 button:before {
content:"\f003";
font-family: Font-Awesome;
font-size: 16px;
color: #F9F0DA;
}
.box1 {
width: 300px;
margin: 0 auto;
border: 1px solid #2C3E50;
overflow: hidden;
}
.animate {
padding-left: 20px;
font-size: 12px;
color: #FFF;
display: inline-block;
white-space: nowrap;
animation: 10s wordsLoop linear infinite normal;
}
</style>
<!--搜索框-->
<div class="search d3" align="center"><div class="logo box1">
<img src="img/ico/ring element.png" >
<p class="animate">
The huanyuan planet is open!
</p>
</div></div>
<form>
<input type="text" placeholder="search...">
<button type="submit"></button>
</form>
<div id="time" style="color:#99CCFF" ></div>
</div>
<!-- Elliptic -->
<div class="clr-title">
<h1>登录环元星球></h1><code>选择您的兴趣派</code>
</div>
<!-- Flatline -->
<div class="colorful-tab-wrapper_1" id="colorful-flatline">
<ul_1 class="colorful-tab-menu">
<li_1 class="colorful-tab-menu-item active" tab-color="#5383c3"><a href="#fl-0">科技派</a></li_1>
<li_1 class="colorful-tab-menu-item" tab-color="#c53d43"><a href="#fl-1">人文派</a></li_1>
<li_1 class="colorful-tab-menu-item" tab-color="#00A566"><a href="#fl-2">环保派</a></li_1>
<li_1 class="colorful-tab-menu-item" tab-color="#c97586"><a href="#fl-3">公益派</a></li_1>
<li_1 class="colorful-tab-menu-item" tab-color="#8021D3"><a href="#fl-4">设计派</a></li_1>
</ul_1>
<div class="colorful-tab-container">
<div class="colorful-tab-content active" id="fl-0">
<p>中文名：科技派</p>
<p>核心：科学精神、思想、方法、知识</p>
<p>外文名：STP(Science Technology Partisan)</p>
要求 安全、高效、环保、科学等科技派关注于现代科技的发展，他们坚定地认为，技术是美感的最好呈现形式。“科技概念的未来感”会成为百年后的主流设计理念。他们更喜欢简洁风格。对未来发展，科技派积极想要掌握主动权。社会上习惯于把科学和技术连在一起，统称为“科技”。实际二者既有密切联系，又有重要区别。科学解决理论问题，技术解决实际问题。科学要解决的问题，是发现自然界中确凿的事实与现象之间的关系，并建立理论把事实与现象联系起来；
</div>
<div class="colorful-tab-content" id="fl-1">
<p>中文名：人文派</p>
<p>核心：泛指文化，专指哲学，美学范畴</p>
<p>外文名：HCP(Human Culture Partisan)</p>
人文派致力于提倡人文思想建设，人文就是人类文化中的先进部分和核心部分，即先进的价值观及其规范。其集中体现是：重视人，尊重人，关心人，爱护人。简而言之，人文，即重视人的文化。 人文，是一个动态的概念。中国古文《辞海》中这样写道：“人文指人类社会的各种文化现象”。我们知道，文化是人类或者一个民族、一个人群共同具有的符号、价值观及其规范。符号是文化的基础，价值观是文化的核心，而规范，包括习惯规范、道德规范和法律规范则是文化的主要内容。 人文是指人类文化中的先进的、科学的、优秀的、健康的部分。
</div>
<div class="colorful-tab-content" id="fl-2">
<p>中文名：环保派</p>
<p>核心：人、社会与自然的和谐、协调发展</p>
<p>外文名：EPP(Environmental Protection Partisan)</p>
环保派一直在环保方面有所付出。环境保护，简称：环保，是在个人、组织或政府层面，为大自然和人类福祉而保护自然环境的行为，环保派指出人类为解决现实或潜在的环境问题，协调人类与环境的关系，保障经济社会的可持续发展而采取的各种行动的总称。其方法和手段有工程技术的、行政管理的，也有法律的、经济的、宣传教育的等。保护环境是人类有意识地保护自然资源并使其得到合理的利用，防止自然环境受到污染和破坏；对受到污染和破坏的环境做好综合的治理，以创造出适合于人类生活、工作的环境，协调人与自然的关系，让人们做到与自然和谐相处的概念。
</div>
<div class="colorful-tab-content" id="fl-3">
<p>中文名：公益派</p>
<p>核心：关注社会和公众的福祉和利益</p>
<p>外文名：PWP(Public Welfare Partisan)</p>
公益派关注社会公共利益的建设。而公益是公共利益事业的简称，这是为人民服务的一种通俗讲法。指有关社会公众的福祉和利益。“公益”为后起词，其意是“公共利益”。 社会公益组织，一般是指那些非政府的、不把利润最大化当作首要 目标，且以社会公益事业为主要追求目标的社会组织。早先的公益组织主要从事人道主义救援和贫民救济活动。
</div>
<div class="colorful-tab-content" id="fl-4">
<p>中文名：设计派</p>
<p>核心：泛指文化，专指哲学，美学范畴</p>
<p>外文名：DP(Design Partisan)</p>
设计派关注设计及其有关相关思想，理论的建设。随着现代科技的发展、知识社会的到来、创新形态的嬗变，设计也正由专业设计师的工作向更广泛的公众人员参与演变，设计是把一种计划、规划、设想通过视觉的形式传达出来的活动过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。设计要有变通的思想，我们要善于想象。
</div>
</div>
</div>
<div class="container_odd" >
<div class="set_container">
<div onclick="window.open('loading.html','_self')" data-text="确定吗？" class="set_3_button2"><span>登录星球</span></div>
</div>
</div>
<script type="text/javascript" src="js/colorfulTab.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#colorful").colorfulTab();
$("#colorful-elliptic").colorfulTab({
theme: "elliptic"
});
$("#colorful-flatline").colorfulTab({
theme: "flatline"
});
$("#colorful-background-image").colorfulTab({
theme: "flatline",
backgroundImage: "true",
overlayColor: "#002F68",
overlayOpacity: "0.8"
});
});
/* 提交 */
</script>
</script>
</body>
</html>