div body 间距
在页面中想仿照 51cto 或者QQ 空间那样！顶部有一个菜单栏，但是左、上、右都是没有间距的。
做了好长时间就是没做出来，最后在网上找到了！
原来这个功能实现起来非常简单，就是用 CSS 控制 padding 跟 margin 就可以了。
效果：
如下为页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="master.aspx.cs" Inherits="web_master" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
/* div 与 body 没有边距 */
*
{
padding:0px;
margin:0px;
}
</style>
<script src="../Script/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
</head>
<body >
<form id="form1" runat="server">
<div style="margin:auto; height:35px; float:left; width:100%; background-image:url('../Image/top_bg.gif'); position:absolute; ">
</div>
<div style="margin:0 auto; width:100%; margin-top:2px; height:800px;">
<div style="width:100%; height:800px; margin-top:3px; background-color:#eee;">
<!-- left --->
<div id="divMenu" style="width:150px; float:left; height: 765px; margin-top:35px; text-align:center; background-color:#e8ecf5; line-height:30px;
font-family:微软雅黑; font-size:12px; border:1px solid #ccc;
">
<div>文化天地</div>
<div>学习原地</div>
<div>社区中心</div>
</div>
<!-- middle--->
<div style="width:20px; float:left; height:500px; ">
<div style="margin-top:300px;" id="change">
<<
</div>
</div>
<!-- right--->
<div id="divR" style="float:left; height:800px; width:89%; margin-right:auto;
margin:auto; background-color:#eee; ">
<div style="width:100%; height:765px; margin:auto; margin-top:35px; border:1px solid #ccc;
background-color:#ccc;
">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
$("#change").click(function () {
if ($("#divMenu").width() == 0) {
$("#divMenu").animate({ opacity: "1", width: "150" }, 500);
$("#divR").animate({ width: "89%" }, 10);
}
else {
$("#divR").animate({ width: "98%" }, 1200);
$("#divMenu").animate({ opacity: "0", width: "0" }, 300);
}
});
</script>
