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

zoukankan html css js c++ java

一个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; 100%; } /*实现自适应高度的层*/ .autoaddheight{ font: 0px/0px sans-serif; clear: both; display: block; } /*顶部小菜单样式*/ #topDiv{ height:100px; 930px; margin-left:auto; margin-right:auto; border:3px solid gray; } /*主菜单样式*/ #MenuDiv { float:inherit; 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; 95%; } #MenuDiv li{ /*子选择器,定义列表的样式*/ } /*网页左边框架样式*/ #leftContent { float: left; 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 { 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 { 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{ 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" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" > <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; 257px; height: 50px;float:left"> <b style="font-size:18pt; color: #ffffff;"><%=FrameName %></b><br /> <font size="2" color="#ffffff" face="Verdana, Arial, Helvetica, sans-serif"> <%=FrameNameVer %> </font> </div> <div style="margin-left: 48%; height: 20px; margin-top: 35px;"> <table width = "100%" height ="100%" class="Search"> <tr> <td style=" 1436px" > 文件标题</td> <td style=" 1116px" ><asp:TextBox ID="TextBox3" runat="server" Width="213px"></asp:TextBox> </td> <td style=" 127px"> <asp:Button ID="Button2" runat="server" Text="搜索" />  </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 />  </div> </div> </div> <div class="autoaddheight"> </div> <div id="bottom"> <table width = "100%" align="left"> <tr> <td style=" 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=" 20px"> </td> <td style=" 67px"> </td> <td style=" 19px"> </td> <td style=" 173px"> </td> <td style=" 11px"> </td> <td style=" 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>

查看全文

相关阅读:
HDU 1058 Humble Numbers
HDU 1160 FatMouse's Speed
HDU 1087 Super Jumping! Jumping! Jumping!
HDU 1003 Max Sum
HDU 1297 Children’s Queue
UVA1584环状序列 Circular Sequence
UVA442 矩阵链乘 Matrix Chain Multiplication
DjangoModels修改后出现You are trying to add a non-nullable field 'download' to book without a default; we can't do that (the database needs something to populate existing rows). Please select a fix:
opencv做的简单播放器
 c++文件流输入输出

原文地址：https://www.cnblogs.com/oldkingsir/p/2365654.html