淘先锋技术网

首页 1 2 3 4 5 6 7

一个CSS+div高度自适应布局模型

近日查看了一些资料自己研究写了一个网站布局，采用高度自适应，css样式表如下： 
* { 

   margin:0; 

   padding:0; 

}

　BODY

{

	font-size: 12px;

	font-family: "Verdana" , "Arial" , "细明体" , "sans-serif";

	text-align: center;

	background-image: url(../images/bg.gif);

}

table

{

    FONT-SIZE: 12px; FONT-FAMILY: "Verdana", "Arial", "细明体", "sans-serif";

}

/*空行*/

.space10{

   height:10px; 

   float:left; 

   width:100%;   

}

/*实现自适应高度的层*/

.autoaddheight{

   font: 0px/0px sans-serif;

   clear: both;

   display: block;

}

/*顶部小菜单样式*/

#topDiv{ 

   height:100px; 

   width:930px;

   margin-left:auto; 

   margin-right:auto;

   border:3px solid gray; 

}

/*主菜单样式*/

#MenuDiv {

   float:inherit;

   width:930px;

   background:#E3ECF3;

   line-height:normal; 

   margin-left:auto; 

   margin-right:auto;

   font: bold 14px/1.5em Verdana; 

   height:40px; 

   border:3px solid black;    

}

#outer

{

	margin-top: 0px; padding-left: 1px; margin-bottom: 0px;

            width: 95%;  

	

} 

#MenuDiv li{

/*子选择器,定义列表的样式*/

}

/*网页左边框架样式*/

#leftContent

{

	float: left;

	width: 220px;

	text-align: left;

	border-right: #ccccff thin solid;

	border-top: #ccccff thin solid;

	border-left: #ccccff thin solid;

	border-bottom: #ccccff thin solid;

}



/*中部框架层*/

#center

{

	width: 930px;

	float: none;

	clear: both;

	margin: auto;

	border-right: #330066 2px solid;

	border-top: #330066 2px solid;

	border-left: #330066 2px solid;

	border-bottom: #330066 2px solid;

	background-color: #ffffff;

}

/*右边主层*/

#rightbody

{

	width: 702px;

	float: left;

	text-align: center;

	margin: 0px;

	border-right: #ccccff thin solid;

	border-top: #ccccff thin solid;

	border-left: #ccccff thin solid;

	border-bottom: #ccccff thin solid;

}

/*底部样式*/

#bottom{    

   width:930px;

   margin-left:auto; 

   margin-right:auto;

   height:40px; 

   border:3px solid gray; 

}

.Search

{

	border-right: #ccccff thin solid;

	border-top: #ccccff thin solid;

	border-left: #ccccff thin solid;

	border-bottom: #ccccff thin solid;

}

.tree

{

	background-color: #ffffff;

}

网页代码如下：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="PageMaster.master.cs" Inherits="PageTemplate_PageMaster" %>

<!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>
    <link rel = "stylesheet" rev ="stylesheet" href ="../css/site.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id = "outer">
            <div id="header">
                <div style="padding-left: 20px; padding-top:10px;width: 257px; height: 50px;float:left">
                <b style="font-size:18pt; color: #ffffff;"><%=FrameName %></b><br />
                            <font size="2" color="#ffffff" >
                                <%=FrameNameVer %>
                            </font>
                </div>
                <div style="margin-left: 48%; height: 20px; margin-top: 35px;">
                <table width = "100%" height ="100%" class="Search">
                                <tr>
                                    <td style="width: 1436px" >
                                        文件标题</td>
                                        <td style="width: 1116px" ><asp:TextBox ID="TextBox3" runat="server" Width="213px"></asp:TextBox>
                                        </td>
                                    <td style="width: 127px">
                                        <asp:Button ID="Button2" runat="server" Text="搜索" />&nbsp;
                                        </td>
                                    <td>
                                        <asp:Button ID="Button1" runat="server" Text="高级搜索" /></td>
                                        <td></td>
                                </tr>
                               
                            </table>
                </div>
            </div>
            <div id="center">
            <div id="leftContent">
                <table width ="100%" height = "100%">
                    <tr>
                        <td>
                            
                        </td>
                        
                    </tr>
                    <tr>
                        <td class = "tree">
                            <asp:TreeView ID="TreeView1" runat="server" ImageSet="Arrows">
                                <ParentNodeStyle Font-Bold="False" />
                                <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                                <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
                                    VerticalPadding="0px" />
                                <Nodes>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点">
                                        <asp:TreeNode Text="新建节点" Value="新建节点">
                                            <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                        </asp:TreeNode>
                                    </asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点">
                                        <asp:TreeNode Text="新建节点" Value="新建节点">
                                            <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                        </asp:TreeNode>
                                    </asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点">
                                        <asp:TreeNode Text="新建节点" Value="新建节点">
                                            <asp:TreeNode Text="新建节点" Value="新建节点">
                                                <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                            </asp:TreeNode>
                                        </asp:TreeNode>
                                    </asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点">
                                        <asp:TreeNode Text="新建节点" Value="新建节点">
                                            <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                        </asp:TreeNode>
                                    </asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点">
                                        <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    </asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点">
                                        <asp:TreeNode Text="新建节点" Value="新建节点">
                                            <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                        </asp:TreeNode>
                                    </asp:TreeNode>
                                    <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                                </Nodes>
                                <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px"
                                    NodeSpacing="0px" VerticalPadding="0px" />
                            </asp:TreeView>
                        </td>
                       
                    </tr>
                    <tr>
                        <td>
                        </td>
                    </tr>
                </table>
                <div class="autoaddheight"> </div>
            </div>
            <div id="rightbody">
                <br />
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
                <br />
                <br />
                <br />
                <br />
                <br />
                <br />
                <div class="autoaddheight"> 
                    <br />
                    <br />
                    &nbsp;</div>
                </div>
            </div>
            <div class="autoaddheight"> </div>
            <div id="bottom">
                <table width = "100%" align="left">
                    <tr>
                        <td style="width: 250px"><div id="times"  style=" font-size: 10pt;"></div>
        <script language="javascript" type="text/javascript">
         setInterval("times.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
        </script> 
                        </td>
                        <td style="width: 20px">
                            </td>
                        <td style="width: 67px">
                            </td>
                        <td style="width: 19px">
                            </td>
                        <td style="width: 173px">
                            </td>
                        <td style="width: 11px">
                            </td>
                        <td style="width: 60px">
                            </td>
                        <td>
                            </td>
                        <td style="text-align: right">
                            <img src="../images/userset.gif" />系统设置<img src="../images/about.gif" />关于</td>
                    </tr>
                  
                </table>
            </div>
            
        </div>
    </form>
</body>
</html>