-
从
1
开始学晋城
(
一
)
——
概览
上一篇
“
从
0
开始写脉脉
”
的帖子得到了朋友们的肯定，最近研读了下
晋城的代码，再
次分享读书心得，这次从
“1”
开始，不敢再从
“0”
开始误
导比我还白的朋友。
依旧是连载文章，
但是这次文章更新的跨度会比较
大。文章
是给和我一样的小白准备的。
<
/p>
从脉脉到晋城，我们可以总结出一般规律：界面基本分为三大块：
header
、
main
、
footer
。
我们首先从使用者的角度分析下程序：
1
、由于
header
、
footer
和
main
部分组成。
2
、
footer
是固定的，五个按钮打开不同的
header
和
main
部分
其实就这些了，内容最多最复杂的是
main
，包括布局和
js
部分，
会娓
娓道来的
.......
footer
是这个样子的：
footer
是很重要的部分，底部导航的样式基本都是相通的，布局我们后
面会详加分析，和脉
脉不同的是这五个按钮的触发方式
(
选中后，打开
对应的
header
和
ma
in)
，脉脉更多的偏向
css3
的部
分，晋城偏向
js
实
现。
header
是这个样子的：
底部按钮对应的
header
首
页
新
闻
生
活
活
动
每个底
部导航按钮，会打开不同的
header
。
main
是这个样子的
:
此处省略后面表
进入正题
入口文件是
。
①
先看
header
< br>部分：
1.
13
2.
14
5.
17
13.
25
//
生活
14.
26
玩转晋城
15.
27
16.
28
23.
35
26.
38
复制代码
这里
html
列出了全部的
header
，
但同时只有一个会显示；
当某个
he
ader
获得
active
类的时候该
header
会显示，其他则隐藏。在
js
中，同样是
控制
header
是否拥有
active
类来显示或者隐藏。
我们可以先简单的看一下
css
：
1.
2.
3.
4.
5.
6.
28 #header
.header{
29
display: none;
30 }
31 #header .active{
32
display: block;
33 }
复制代码
这里我们就大体了解了他的机制，
每个
header
默认有两个类控制，
拿
“
首
页
”
来说，其同时拥有<
/p>
main
、
header
、
active
类，
main
类控制
header
具体的外观样式，
header
让其默认隐藏，而拥有
a
ctive
类则会显示。
还好
和
的代码不多，
中的剩余部分代码
大家自己琢磨吧，很简单
，
“
脉脉
”
那
篇帖子我都说的很详细了。
-
-
-
-
-
-
-
-
-
上一篇：《刑事侦缉档案4》影评：一切从拥抱开始
下一篇：胡学文《从正午开始的黄昏》(1)