要求：
1. 跨浏览器
2. 代码简单，样式结构分离
3.使用div+css布局，自适应高度， 有min-heigh, min-width
最后效果如下(menu css和部分图片来源于towngas，有些同事会有似曾相识的感觉)：
masterpage 代码如下：
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="CommonLibrary.Demo.Module.Common.Main" %>
<!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>
<asp:ContentPlaceHolder ID="cphHead" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="header">
<div id="logo"><br/></div>
<div id="sysName">VS.NET 2008 Common Library Demo Project</div>
<div id="language">
<ul>
<li>
<asp:LinkButton ID="lbtnEn" runat="server" CommandArgument="en-us" OnCommand="ltbnChgLang_Click">ENGLISH</asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lbtnZhCn" runat="server" CommandArgument="zh-cn" OnCommand="ltbnChgLang_Click">简体中文</asp:LinkButton>
</li>
</ul>
</div>
</div>
<div id="menu">
<asp:Menu ID="menuMain" runat="server" DataSourceID="smdsMain"></asp:Menu>
<asp:sitemapdatasource runat="server" id="smdsMain" />
</div>
<div id="nav">
<div id="path"><asp:SiteMapPath runat="server" id="smpWeb" /></div>
<div id="logonOut">
<asp:ImageButton ID="ibtn" runat="server" ImageUrl="~/App_Themes/Default/img/frame/nav_exit.png" Text="Logon Out" OnClick="ibtnLogonOut_OnClick"></asp:ImageButton>
</div>
<div id="logonUser"><asp:Label ID="lblUserName" runat="server" Style="color: #0033CC;"></asp:Label></div>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="cphContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="footer">@copyright 2009 AiPuJing Software Technology Co. Ltd</div>
</div>
</form>
</body>
</html>
css 代码如下：
body { margin: 0; padding: 0; font-family: "Arial", "Helvetica", "sans-serif"; font-size: 12px;text-align:center; background: url(../img/frame/form_bg.gif) repeat-x; background-color:#EDEDED;}
div#main { height: auto; width:985px; margin:0 auto; padding-bottom:5px; text-align:left;background-color:#ffffff; }
div#header {height: 70px; background: url(../img/frame/header_bg.jpg) repeat-x;}
div#header div#logo{float: left;padding-left: 180px; background: url(../img/frame/header_logo.gif) no-repeat;}
div#header div#sysName { float: left; padding-top: 18px; font-family:"Times New Roman", "Times", "serif";font-size: 28px; font-weight:bold; color:#FFFFFF;}
div#header div#language { float: right; padding: 10px 15px 0 0; font-weight:bold;}
div#language ul li {list-style-type: none;}
div#language a:link,
div#language a:visited,
div#language a:focus,
div#language a:hover,
div#language a:active { color: #ccc; text-decoration: none;}
div#menu { background: url(../img/frame/menu_bg.gif) repeat-x; text-align: left; height: 30px;}
div#nav { height: 19px; padding:2px 0 0 15px; background: url(../img/frame/nav_bg.gif) repeat-x; /*background-color:#e6f0fa;*/}
div#path { float: left;}
div#logonUser { float:right; padding-left:18px;background: url(../img/frame/nav_user.png) no-repeat;}
div#logonOut { float:right; padding:0 10px 0 10px;}
div#content {height: auto !important; height:440px; min-height:440px; margin-top:1px; text-align:center; color:#004499;}
div#footer { height:30px; line-height:28px;background:#3C7FAF; text-align:center; color:#ffffff;}
供参考和学习， 望大家提意见和真正
Subscribe