先加载右侧内容模块的左右两栏布局
早上来上班无意中看模板代码发现的“夏日芝兰”模板的左右栏布局样式写得不错，自己就做了个类似的布局模型。很少研究博客园的模板代码，不知道是不是所有的模板左右布局都是这样写的，有空再看。这种布局的好处就是可以让主体内容模块先于左侧的菜单栏先加载，让用户首先看到重要的信息。（写给自己备忘的片文）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>左右两栏布局</title>
6 <style>
7 #xzw_main {width:980px; margin:0 auto; font-size:12px; color:#fff;min-height:500px; background:#66FFFF; line-height:24px}
8 #xzw_content {float:right; margin-left:-260px; background:#66CCFF; width:100%; }
9 #xzw_txt {margin-left:260px; background:#3366CC; min-height:300px; padding:10px}
10 #xzw_menu {float:left; width:250px; background:#003366; min-height:300px}
11 .xzw_menulist {padding:10px}
12 .xzw_clear{clear:both}
13 </style>
14 </head>
15
16 <body>
17 <div id="xzw_main">
18 <div id="xzw_content">
19 <div id="xzw_txt">
20 主体博客内容区域
21 </div>
22 </div>
23
24 <div id="xzw_menu">
25 <div class="xzw_menulist">
26 左侧菜单区域<br />
27 左侧菜单区域<br />
28 左侧菜单区域<br />
29 左侧菜单区域<br />
30 左侧菜单区域<br />
31 左侧菜单区域<br />
32 左侧菜单区域<br />
33 左侧菜单区域<br />
34 左侧菜单区域<br />
35 左侧菜单区域<br />
36 左侧菜单区域<br />
37 左侧菜单区域<br />
38 左侧菜单区域<br />
39 左侧菜单区域<br />
40 左侧菜单区域<br />
41 左侧菜单区域<br />
42 左侧菜单区域<br />
43 左侧菜单区域<br />
44 左侧菜单区域<br />
45 左侧菜单区域<br />
46 左侧菜单区域<br />
47 左侧菜单区域<br />
48 </div>
49 </div>
50 <div class="xzw_clear"></div>
51 </div>
52 </body>
53 </html>
54
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>左右两栏布局</title>
6 <style>
7 #xzw_main {width:980px; margin:0 auto; font-size:12px; color:#fff;min-height:500px; background:#66FFFF; line-height:24px}
8 #xzw_content {float:right; margin-left:-260px; background:#66CCFF; width:100%; }
9 #xzw_txt {margin-left:260px; background:#3366CC; min-height:300px; padding:10px}
10 #xzw_menu {float:left; width:250px; background:#003366; min-height:300px}
11 .xzw_menulist {padding:10px}
12 .xzw_clear{clear:both}
13 </style>
14 </head>
15
16 <body>
17 <div id="xzw_main">
18 <div id="xzw_content">
19 <div id="xzw_txt">
20 主体博客内容区域
21 </div>
22 </div>
23
24 <div id="xzw_menu">
25 <div class="xzw_menulist">
26 左侧菜单区域<br />
27 左侧菜单区域<br />
28 左侧菜单区域<br />
29 左侧菜单区域<br />
30 左侧菜单区域<br />
31 左侧菜单区域<br />
32 左侧菜单区域<br />
33 左侧菜单区域<br />
34 左侧菜单区域<br />
35 左侧菜单区域<br />
36 左侧菜单区域<br />
37 左侧菜单区域<br />
38 左侧菜单区域<br />
39 左侧菜单区域<br />
40 左侧菜单区域<br />
41 左侧菜单区域<br />
42 左侧菜单区域<br />
43 左侧菜单区域<br />
44 左侧菜单区域<br />
45 左侧菜单区域<br />
46 左侧菜单区域<br />
47 左侧菜单区域<br />
48 </div>
49 </div>
50 <div class="xzw_clear"></div>
51 </div>
52 </body>
53 </html>
54
主体博客内容区域
