-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (175 loc) · 8.21 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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE-edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
<title>首页</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 导航区
header.header>.container-fluid>div.logo>img^div.nav>(.__item>a)*4^.right>.account+.search>label+div.__btn|bem
-->
<header class="header">
<div class="container-fluid">
<div class="logo"><img src="#" alt="logo"></div>
<div class="nav">
<div class="nav__item"><a href="#">首页</a></div>
<div class="nav__item"><a href="#">简历</a></div>
<div class="nav__item"><a href="#">作品</a></div>
<div class="nav__item"><a href="#">关于</a></div>
</div>
<div class="right">
<div class="account">
<div class="account__btn">
登录/注册
</div>
</div>
<div class="search">
<span >搜索</span>
<div class="search__btn"></div>
</div>
</div>
</div>
</header>
<!-- banner区域
div.banner>.container-fluid>img.photo+.resume>.__abstract+.__btn|bem
-->
<div class="banner">
<div class="container-fluid container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<img src="imgs/photo.jpg" alt="" class="photo ">
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="resume">
<p class="resume__abstract">这是我的简历</p>
<a href="resume/tqsResume.html">
<div class="resume__btn btn btn-warning">点击进入</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- project -->
<div class="project">
<h2 class="project__caption">TASTE IT THE GOOD PROJECTS</h2>
<div class="project__nav">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#lesson" aria-controls="lesson" role="tab" data-toggle="tab">推荐课程</a></li>
<li role="presentation"><a href="#production" aria-controls="production" role="tab" data-toggle="tab">我的作品集</a></li>
<li role="presentation"><a href="#photos" aria-controls="photos" role="tab" data-toggle="tab">我的相册</a></li>
<li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">关于</a></li>
</ul>
</div>
<div class="container-fluid">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="lesson">
<!-- 推荐课程 -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/16/404744171069843.jpg" alt=""></a></dt>
<dd class="card-title"><a href="">40+苹果手机mockups免费资源</a></dd>
<dd class="card-body">一批苹果手机的mockups资源，可以免费下载，包括psd等文件格式，主要包括iphone7、</dd>
<dd class="card-footer">Aug 16 · <a href="">优秀设计资源</a></dd>
</dl>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/16/396753318126357.png" alt=""></a></dt>
<dd class="card-title"><a href=""> 40+优秀设计SVG工具</a></dd>
<dd class="card-body">svg已经是现在的网页设计中，流行元素了。收集了40个在线工作，主要是svg相关内容，合</dd>
<dd class="card-footer">Aug 16 · <a href="">技术相关</a></dd>
</dl>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/14/030361790139346.png" alt=""></a></dt>
<dd class="card-title"><a href=""> 阿里矢量ICON图标库</a></dd>
<dd class="card-body">以前一直用bs家的font-awesome，但图标库比较大，有时候你只需要引用某几个图标的时候</dd>
<dd class="card-footer">Aug 14 · <a href="">我的作品</a></dd>
</dl>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/14/956522451122808.jpg" alt=""></a></dt>
<dd class="card-title"><a href="">26+流行风商业名片设计作品</a></dd>
<dd class="card-body">商务流行风格的名片设计，代表着你形象的第一张脸。</dd>
<dd class="card-footer">Aug 14 · <a href="">工业设计</a></dd>
</dl>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/09/795783860526004.jpg" alt=""></a></dt>
<dd class="card-title"><a href="">30+折纸风格logo设计作品</a></dd>
<dd class="card-body">折纸风格是一个比较小众的风格，加上扁平化的UI设计，能形成一种独特的简洁美，分享30个logo作品，真的很喜欢。</dd>
<dd class="card-footer">Aug 09 · <a href="">技术相关</a></dd>
</dl>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/06/14460959948040.jpg" alt=""></a></dt>
<dd class="card-title"><a href="">21+精美个人简历模板</a></dd>
<dd class="card-body">对HR来讲，一份与众不同的简历，会让你加分不少。收集了一小批精品模板，分享给您。</dd>
<dd class="card-footer">Aug 06 · <a href="">焦点互联网</a></dd>
</dl>
</div>
<!-- <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/05/395881157626215.jpg" alt=""></a></dt>
<dd>26+优秀photoshop学习教程</dd>
<dd>一批精美的photoshop教程，可以让你学习更加强大的ps功能，适合新手+的东西，学无止镜。</dd>
<dd>Aug 05 · <a href="">技术相关</a></dd>
</dl>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/04/228033049709689.jpg" alt=""></a></dt>
<dd>50+精美图片wordpress模板</dd>
<dd>大图片展示，是现在很多网页的设计风格了，列举了一些wordpress模板，主要采用图片展示为</dd>
<dd>Aug 04 · <a href="">经典网页设计</a></dd>
</dl>
</div>
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 recommend-lesson">
<dl>
<dt><a href=""><img src="https://img.qianduanmei.com/2017/08/03/50435556350698.jpg" alt=""></a></dt>
<dd>35+高清mockups模板下载</dd>
<dd>一批Mockups工业模板，主要包括T恤、杯子、帽子、杂志、UI系列、可乐、名片等等。</dd>
<dd>Aug 03 · <a href="">工业设计</a></dd>
</dl>
</div> -->
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="production">.1..</div>
<div role="tabpanel" class="tab-pane" id="photos">.2..</div>
<div role="tabpanel" class="tab-pane" id="about">
<article>
<h3 >关 于</h3>
<p>
这是我的第一个个人网站，做了响应式布局。但是因为没有设计师，对整体风格的设计。所以可能在颜色上会显得有点突兀。然而我的想法是先做一个雏形网站，再不断的迭代开发。前端到后端的结合——全栈开发。
</p>
</article>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer class="footer">
<p class="copyright">Copyright © 2017 Tian Qingsong. All rights reserved.</p>
<div class="share">
</div>
</footer>
<script src="js/index.js"></script>
</body>
</html>