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>
查看全文
相关阅读:
Adobe CS6 系列软件通用破解补丁 (amtlib.dll 含32位与64位)
vs2010 快捷键大全
js 处理json时间格式
绑定DropDownListFor
js插件
NHibernate资料收集
常用正则
jQuery里面的datepicker日期控件默认是显示英文的,如何显示中文或其他语言呢?
ASP.NET中使用Fusion Charts(Access+SQL)图表工具
asp.net 2.0揭秘读书笔记二:使用Rich控件
原文地址:https://www.cnblogs.com/oldkingsir/p/2365654.html
最新文章
网络编程[41]
FLASH开发[01]
浏览器缓存设置指南
MacBook Air 拆机组图
网络编程[43]
网络编程[38]
网络编程[42]
网络编程[33]
poj 3613【Cow Relays】
hdu 1502【Regular Words】
热门文章
hdu 1081【To The Max】
poj 3522【Slim Span】
poj 2728【Desert King】
hdu 1978【How many ways】
hdu 1422【重温世界杯】
hdu 1025
hdu 1078【FatMouse and Cheese】
hdu 1224【Free DIY Tour】
js 调用后台代码
C#正则表达式匹配HTML中的图片路径,图片地址
Copyright © 2011-2022 走看看