我的书签
添加书签
移除书签33.2.2 实现内容模块
内容模块的中间部分，共分三部分来布局，左中右的布局形式，即左面设置一个层，中间设置一个层，在右边也设置一个层，其中，中间部分的层最大，在这部分主要有相片和日志模块。HTML部分代码如下。
＜！—右边栏—＞
01 ＜div class="myblogright"＞
02 ＜div class="mybox"＞
03 ＜div class="myblogtitle"＞
04 心情预报
05 ＜/div＞
06 ＜div id="index1"＞
07 ＜div class="myblogcon"＞
08 ＜/div＞
09 ＜/div＞
10 ＜/div＞
11 ＜div class="mybox"＞
12 ＜div class="myblogtitle"＞
13 我的音乐盒
14 ＜/div＞
15 ＜div id="index2"＞
16 ＜div class="myblogcon"＞＜/div＞
17 ＜/div＞
18 ＜/div＞
19 ＜div class="mybox"＞
20 ＜div class="myblogtitle"＞
21 我的群组织
22 ＜/div＞
23 ＜div id="index3"＞
24 ＜div class="myblogcon"＞＜/div＞
25 ＜/div＞
26 ＜/div＞
27 ＜/div＞
【代码解析】上面的HTML代码在网页的右边显示，主要分为4层，代码第2～10行为第1层，是“心情预报”栏；代码第11～18行是第2层，为“我的音乐盒”栏，其他以此类推；在HTML代码中，先输入漂移到右边的代码，再输入漂移到左边的代码，下面的HTML代码表示内容模块中左栏代码。
＜！—左边栏—＞
01 ＜div class="myblogleft"＞
02 ＜div class="mybox"＞
03 ＜div class="myblogtitle"＞
04 个人信息
05 ＜/div＞
06 ＜div id="index3"＞
07 ＜div class="myblogcon"＞
08 ＜div class="myphoto"＞＜/div＞
09 ＜/div＞
10 ＜/div＞
11 ＜/div＞
12 ＜div class="mybox"＞
13 ＜div class="myblogtitle"＞
14 我的好友
15 ＜/div＞
16 ＜div id="index4"＞
17 ＜div class="myblogcon"＞
18
19 ＜/div＞
20 ＜/div＞
21 ＜/div＞
22 ＜div class="mybox"＞
23 ＜div class="myblogtitle"＞
24 最近访客
25 ＜/div＞
26 ＜div id="index5"＞
27 ＜div class="myblogcon"＞
28 ＜/div＞
29 ＜/div＞
30 ＜/div＞
31 ＜div class="mybox"＞
32 ＜div class="myblogtitle"＞
33 最新留言
34 ＜/div＞
35 ＜div id="index6"＞
36 ＜div class="myblogcon"＞
37 ＜！-设置内容—＞
38 ＜/div＞
39 ＜/div＞
40 ＜/div＞
41 ＜/div＞
【代码解析】以上代码主要在左边栏设置了4个层，代码第1～11行为第1层，显示内容为“个人信息”；代码第12～21行为第2层，显示“我的好友”信息；代码第22～30行为第3层，是“最近访客”信息；代码第22～30行为第4层，显示“留言信息”。
与向左漂移相同的是，中间栏的表现也需要设置对象的float为left，和上面的代码一样，表示向左漂移，代码如下所示。
01 ＜！—中间栏—＞
02 ＜div class="myblogcenter"＞
03 ＜div class="mybox"＞
04 ＜div class="myblogtitle"＞
05 我的日志
06 ＜/div＞
07 ＜div id="index7"＞
08 ＜div class="myblogcon"＞
09 ＜！-设置内容区域—＞
10 ＜div class="logtitle"＞
11 ＜/div＞
12 ＜div class="floatright"＞
13 ＜/div＞＜br/＞
14 ＜/div＞
15 ＜/div＞
16 ＜/div＞
17 ＜div class="mybox"＞
18 ＜div class="myblogtitle"＞
19 我的相册
20 ＜/div＞
21 ＜div id="index8"＞
22 ＜div class="myblogcon"＞＜/div＞
23 ＜/div＞
24 ＜/div＞
25 ＜div class="mybox"＞
26 ＜div class="myblogtitle"＞
27 最近评论
28 ＜/div＞
29 ＜div id="index9"＞
30 ＜div class="myblogcon"＞
31 ＜/div＞
32 ＜/div＞
33 ＜/div＞
34 ＜/div＞
35 ＜/div＞
36 ＜/div＞
【代码解析】以上代码主要设置中间边栏的3个层，代码第1～16行为第1层，显示“我的日志”信息；代码第17～24行为第2层，显示“我的相册”信息；代码第26～33行为第3层，是“最近评论”信息。
注意 在设置float时，要确定对象的宽度，如上面代码两个层都向左漂移，即需要确定这两个层的宽度。
对模块的设置，先用容器层包含两个小层，第一层表示模块主题，而第二层用来表现该模块的内容，如图片或文字等，其中的ID选择符主要是为了JS控制该层的显示与隐藏特效，模块采用以下形式。
01 ＜div class="mybox"＞
02 ＜div class="myblogtitle"＞
03 最近评论
04 ＜/div＞
05 ＜div id="index1"＞
06 ＜div class="myblogcon"＞
07 ＜/div＞
08 ＜/div＞
09 ＜/div＞
【代码解析】在上述代码中，层mybox作为容器层包围着myblogtitle、myblogcon等类选择符和一个ID为index1的ID选择符（代码第1～9行），myblogtitle层表示模块主题层（代码第2～4行），同理，myblogcon表示内容的层（代码第6～7行），而index1层目的是为了给内容层隐藏。同时，这些模块又被左边、中间和右边分成3部分，其他层设置如下：
＜！—右边栏—＞
01 ＜div class="myblogright"＞
02 ＜div class="myblogtitle"＞
03 ＜/div＞
04 ＜/div＞
05 ＜！—左边栏—＞
06 ＜div class="myblogleft"＞
07 ＜div class="myblogtitle"＞
08 ＜/div＞
09 ＜/div＞
10 ＜！—中间栏—＞
11 ＜div class="myblogcenter"＞
12 ＜div class="myblogtitle"＞
13 ＜/div＞
14 ＜/div＞
【代码解析】以上代码就是将网页的中间部分划分为左、中、右3栏。代码第1～4行为右边栏的定义；代码第5～9行是左边栏的定义；代码第11～14行为中间栏的定义。
注意 上面的代码都是在一个网页中的部分代码，本实例的HTML代码按区域列出，CSS代码按各模块来表示。
