一个CSS+div高度自适应布局模型
来源：互联网 发布：淘宝订单有没有限额 编辑：程序博客网 时间：2024/04/28 17:44
近日查看了一些资料自己研究写了一个网站布局，采用高度自适应，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" 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="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="搜索" /> </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="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>
- 一个CSS+div高度自适应布局模型
- CSS DIV自适应高度布局
- CSS网站布局div高度自适应--解决
- CSS + DIV 经典布局，DIV统一自适应高度
- div css高度自适应
- div+css自适应高度
- div+css自适应高度
- CSS中布局div高度自适应的方法
- DIV+CSS 三行二列居中高度自适应布局
- 三行二列居中高度自适应布局DIV+CSS
- DIV+CSS布局中自适应高度的解决方法
- Div + CSS高度自适应解决方法
- div+css左右高度自适应
- css+div 左中右高度自适应
- css div自适应高度height
- css div自适应高度height
- css中div高度自适应
- css控制div高度自适应
- 一封程序员的情书
- Sybase系统管理与常见问题解答
- 虚拟现实技术术语一览
- 从菜鸟开始ubuntu
- linux SDL programme
- 一个CSS+div高度自适应布局模型
- JSP+SQL2000开发环境安装配置
- Symbian学习笔记(17) - 初探WebServices API的使用(上)
- 网页特效代码：打开层/关闭层
- CSS “点”“井号”的含义and ID class区别？
- 页面中弹出小窗口,页面背景直接变半透明
- 今天开博
- 用链接控制页面小窗口的打开和关闭
- 同志们冲啊！
