-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (191 loc) · 9.57 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
<!DOCTYPE html>
<html lang='zh-cmn-Hans'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>cjlalala's Web</title>
<meta name="description" content="cjlalala个人网站 记录学习过程 展示前端作品">
<meta name="keywords" content="web前端开发,前端组件,百度IFE任务">
<meta name="author" content="cjlalala" />
<link href="css/common.css" rel="stylesheet">
<link href="css/personalWeb_index.css" rel="stylesheet">
</head>
<body>
<!--跳动的爱心-->
<div id="animation">
<span class='welcome'>Welcome</span>
<div id="heart" class="beat"></div>
</div>
<!--导航栏-->
<nav id="nav">
<div class="logo">
<a href="#"><img src="img/indexImg/logo2.png"></a>
</div>
<ul class="nav_list">
<li class="home nowPage"><a href="#">主页</a></div></div></li>
<li class="blog"><a href="#blog">博客</a></div></div></li>
<li class="demo"><a href="#demo">Demo</a></div></div></li>
<li class="photo"><a href="#photo">图片</a></div></div></li>
<li class="about"><a href="#about">关于</a></div></div></li>
<li class="about"><a href="#article">文章标题</a></div></div></li>
</ul>
</nav>
<!--图片-->
<div id='inside'>
<a href="#blog"><img alt='blog' src='img/indexImg/blog.png'/></a>
<a href="#demo"><img alt='demo' src='img/indexImg/demo.png'/></a>
<a href="#photo"><img alt='photo' src='img/indexImg/photo111.png'/></a>
<a href="#about"><img alt='about' src='img/indexImg/word2.png'/></a>
<p class='inside_bot'></p>
</div>
<div id='carousel' class='insideHide'>
<img id='carPic' src='img/indexImg/blog.png'>
</div>
<!--内容-->
<div class="content">
<div id="blog">
<a href='http://www.cnblogs.com/cjlalala/'><h2 class='title'>My Blog</h2></a>
<h4 class='remark'>学习笔记+想法记录</h4>
<div class='essay' >
<article>
<span class='tag'><a href="http://www.cnblogs.com/cjlalala/category/836157.html">IFE任务</a></span>
<h4><a href="http://www.cnblogs.com/cjlalala/p/5547572.html">左右定宽，中间一栏根据父元素宽度填充满</a><div class='blog_data'>2016-5-31</div></h4>
<p>题目：1.使用 HTML与CSS按照如下示例图，实现三栏式布局。2.左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高...</p>
</article>
<article>
<span class='tag'><a href="http://www.cnblogs.com/cjlalala/category/836157.html">IFE 任务</a></span>
<h4><a href="http://www.cnblogs.com/cjlalala/p/5556855.html">如何解决高度坍塌问题？——BFC模式</a><div class='blog_data'>2016-6-3</div></h4>
<p>问题引起是2016IFE春季问题的任务三，总的父元素parent包含三个浮动的子元素，容器的高度不能自动伸长以适应内容的高度...</p>
</article>
<article>
<span class='tag'><a href="http://www.cnblogs.com/cjlalala/category/797776.html">JavaScript</a></span>
<h4><a href="http://www.cnblogs.com/cjlalala/p/5810640.html">数组对象的方法（含jQuery 转载）</a><div class='blog_data'>2016-8-26</div></h4>
<p>JavaScript 1.6 引入了几个新的Array 方法，具体的介绍见：New in JavaScript 1.6 。这些方法已经被写进了ECMA262...</p>
</article>
<article>
<span class='tag'><a href="http://www.cnblogs.com/cjlalala/category/797773.html">CSS</a></span>
<h4><a href="http://www.cnblogs.com/cjlalala/p/5585713.html">Flexbox属性总结</a><div class='blog_data'>2016-6-14</div></h4>
<p>flex布局模型不同于块和内联模型布局，块和内联模型的布局计算依赖于块和内联的流方向，而flex布局依赖于flex...</p>
</article>
</div>
</div>
<!--项目部分-->
<div id="demo">
<a href='demo.html'><h2 class='title'>My Demo</h2></a>
<h4 class='remark'>创作记录 + 灵感来源</h4>
<div class='demo_cont'>
<ul class='demo_list'>
<li>
<div class='li_cont'>
<h4>任务1:零基础HTML编码</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=1'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task01/task01.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task01'>代码</a>
</div>
</li>
<li>
<div class='li_cont'>
<h4>任务2:零基础HTML及CSS编码(1)</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=2'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task02/task02.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task02'>代码</a>
</div>
</li>
<li>
<div class='li_cont'>
<h4>任务3:三栏式布局</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=3'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task03/task03.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task03'>代码</a>
</div>
</li>
<li>
<div class='li_cont'>
<h4>任务4:定位和居中问题</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=4'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task04/task04.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task04'>代码</a>
</div>
</li>
<li>
<div class='li_cont'>
<h4>任务5:零基础HTML及CSS编码(2)</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=5'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task05/task05.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task05'>代码</a>
</div>
</li>
<li>
<div class='li_cont'>
<h4>任务6:通过HTML及CSS模拟报纸排版</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=16'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task06/task06.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task06'>代码</a>
</div>
</li>
<li>
<div class='li_cont'>
<h4>任务7:实现常见的产品官网的页面架构及样式布局</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=7'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task07/task07.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task07'>代码</a>
</div>
</li>
<li>
<div class='li_cont'>
<h4>任务8:响应式网格(栅格化)布局</h4>
<a href='http://ife.baidu.com/2016/task/detail?taskId=8'>查看题目</a>
<a href='https://rawgit.com/cjlalala/2016-IFE/master/phase01/task08/task08.html'>Demo</a>
<a href='https://github.com/cjlalala/2016-IFE/tree/master/phase01/task08'>代码</a>
</div>
</li>
</div>
<a href='demo.html'><button class='demo_more'>More...</button></a>
</div>
<!--图片部分-->
<div id="photo">
<h2 class='title'>My Photo</h2>
<h4 class='remark'>喜欢的图片+生活记录</h4>
<div class='photos'>
<div class='photo_cont'>
<div class='explain one'><p>透</p></div>
<div class='transform'><img class='pic1' src='img/indexImg/photo1.png'></div>
</div>
<div class='photo_cont'>
<div class='transform'><img class='pic2' src='img/indexImg/photo2.png'></div>
<div class='explain two'><p>黄 · 蓝</p></div>
</div>
<div class='photo_cont'>
<div class='explain three'>
<p>蓝 · 粉</p></div>
<div class='transform'><img class='pic3' src='img/indexImg/photo3.png'></div>
</div>
<div class='photo_cont'>
<div class='transform'><img class='pic4' src='img/indexImg/photo4.jpg'></div>
<div class='transform'><img class='pic5' src='img/indexImg/photo5.png'></div>
<div class='explain four'>
<p>西柚</p></div>
</div>
</div>
</div>
<!--关于部分-->
<div id='about'>
<h2 class='title'>About</h2>
<img src='img/indexImg/about-left.jpg' class='about-left'>
<div class='about-cont'>
<p>姓名： 陈婕</p>
<p>电话：13593742137</p>
<p>邮箱：[email protected]</p>
<p><a href='https://github.com/cjlalala'>github地址↗</a></p>
<p><a href='http://www.cnblogs.com/'>博客园地址↗</a></p>
</div>
<img src='img/indexImg/about-right.jpg' class='about-right'>
</div>
</div>
<div id="top">↑</div>
<footer>
</footer>
<script src="js/personalWeb_index.js" ></script>
</script>
</body>
</html>