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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步