您的位置：首页 > 其它

先加载右侧内容模块的左右两栏布局

2009-01-08 09:35 267 查看
早上来上班无意中看模板代码发现的“夏日芝兰”模板的左右栏布局样式写得不错，自己就做了个类似的布局模型。很少研究博客园的模板代码，不知道是不是所有的模板左右布局都是这样写的，有空再看。这种布局的好处就是可以让主体内容模块先于左侧的菜单栏先加载，让用户首先看到重要的信息。（写给自己备忘的片文）

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}

#xzw_menu {float:left; width:250px; background:#003366; min-height:300px}

.xzw_menulist {padding:10px}

.xzw_clear{clear:both}

</style>

</head>

<body>

<div id="xzw_main">

<div id="xzw_content">

<div id="xzw_txt">

主体博客内容区域

</div>

</div>

<div id="xzw_menu">

<div class="xzw_menulist">

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

左侧菜单区域<br />

</div>

</div>

<div class="xzw_clear"></div>

</div>

</body>

</html>

#xzw_main {width:400px; margin:0 auto; font-size:12px; color:#fff;min-height:500px; background:#66FFFF; line-height:24px}
#xzw_content {float:right; margin-left:-110px; background:#66CCFF; width:100%; }
#xzw_txt {margin-left:110px; background:#3366CC; min-height:300px; padding:10px}
#xzw_menu {float:left; width:100px; background:#003366; min-height:300px}
.xzw_menulist {padding:10px}
.xzw_clear{clear:both}

主体博客内容区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域

左侧菜单区域
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航