<!-- hi IE,please go to Quirks Mode-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X-Links 一个高宽自适用100%,又有部分高宽固定的例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="KEYWords" content="layout,auto,100,css" />
<meta name="DEscription" content="本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固定高
宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。" />
<meta name="author" content="aoao" />
<meta content="all" name="robots" />
<style>
.inner,
#innerFooter{
border-color:#B7D8ED;
}
#xbar{
/**background-color: #D2EAF6*/
}
#sortList li a{
color:#0958FF
}
#sortList li a:hover{
color:#670FF9;
background-color: #efefef;
}
*{ padding:0; margin:0; }
html {height:100%; max-height:100%; background:#fff; font-size:12px; }
body {height:100%; line-height: 1.6em; max-height:100%;overflow: hidden;}
h3{ font-size: 14px;}
img{
border-style:none;
}
#header {position:absolute;top:0; left:0; display:block; width:100%; height:80px; z-index: 21;}
#footer {position:absolute;bottom:0; left:0; display:block; width:100%; height:60px; z-index: 21;}
#innerHeader{ margin:12px 15px; height: 48px; background-color: #efefef;}
#innerFooter{ margin:12px 15px;padding:8px;border-width:1px;border-style: solid;}
#sortList,
#selector {position:absolute;left:15px;width:180px;}
#tools,#status,#gird,
#pages {position:absolute;left: 200px; right: 15px;}
#xbar{position: absolute; top:70px; bottom: 60px; left: 195px;width:5px; cursor: e-resize;}
#sortList{top:70px;height:46px;z-index: 19;}
#sortList li{}
#selector{top:126px; bottom:68px; z-index: 16;}
#tools{top:70px; z-index: 15;}
#status{top:110px; z-index: 14;}
#gird{top:150px; bottom: 102px; z-index: 9;}
#pages{bottom: 60px;z-index: 12;}
#selector .inner{ height: 100%;}
#status .inner,
#tools .inner,
#pages .inner{line-height:24px; height:24px;}
#gird .inner{height: 100%;overflow: auto;}
.inner{border-width:1px;border-style: solid;padding:3px;background-color:#fff;overflow:auto;}
#sortList .inner{ padding: 0px;}
* html #sortList .inner{height:48px}
#sortList li{
float: left;
width: 100%;
}
#sortList li a{
line-height: 20px;
display: block;
padding:3px 0 0px 25px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
.folder a{ background: url(../images/folder.gif) no-repeat 5px 3px; }
.tags a{ background: url(../images/tags.gif) no-repeat 5px 3px; }
#pages{
text-align: right;
}
* html #selector{height:100%; top:0; bottom:0; border-top:126px solid #fff; border-bottom:60px solid #fff;}
* html #gird{height:100%; top:0; bottom:0; border-top:150px solid #fff; border-bottom:96px solid #fff;}
* html #xbar{height:100%; top:0; bottom:0; border-top:70px solid #fff; border-bottom:60px solid #fff;}
* html #tools .inner,
* html #status .inner,
* html #pages .inner{height:34px}
</style>
</head>
<body>
<div id="header">
<div id="innerHeader">一个高宽自适用100%,又有部分高宽固定的例子</div>
</div>
<div id="sortList">
<div class="inner">
<ul>
<li class="folder"><a href="#">显示文件夹</a></li>
<li class="tags"><a href="#">显示标签</a></li>
</ul>
</div>
</div>
<div id="selector">
<div class="inner">
<h3>您的标签</h3>
test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br
/>test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br
/>test<br />test<br />test<br />test<br />test<br />test
</div>
</div>
<div id="xbar"></div>
<div id="tools">
<div class="inner">dfsdf</div>
</div>
<div id="status">
<div class="inner">status</div>
</div>
<div id="gird">
<div class="inner"><p>本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固
定高宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。</p>
<p>所有主布局的元素都是用position:absolute流出来body后..根据不同浏览器写不同的定位方式</p>
<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br
/>test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br
/>test<br />test<br />test<br />test</p>
</div>
</div>
<div id="pages">
<div class="inner">
<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/f.gif" /></a>
<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/p.gif" /></a>
<span>1/1 页</span>
<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/n.gif" /></a>
<a href="#"><img src="http://lab.loaoao.com/demo/layout/100x100/images/e.gif" /></a>
</div>
</div>
<div id="footer">
<div id="innerFooter">copyright 2006 loaoao.com</div>
</div>
</body>
</html>
分享到：
相关推荐
然而，如何创建一个既能保持圆角效果又能在不同屏幕尺寸下自适应的布局，一直是前端开发者的挑战之一。本文将基于给定的代码示例，深入解析如何使用HTML和CSS来实现可变高宽的圆角框。 #### 1. 圆角框的基本原理 ...
以下是一个常见的例子，展示如何使多个div并排且宽度自适应100%： ```html <!DOCTYPE html> .container { display: flex; justify-content: space-between; } .fixed-width { width: 200px; /* 固定...
而回顾阶段，则是一个反思和学习的机会，孩子们在成人的引导下，讨论自己的工作和学习，从而达到自我认知和成长的目的。 在高宽课程中，评估同样扮演着非常重要的角色。该课程采用真实性评估，如客观观察、儿童作品...
让图片固定高宽显示，让图片显示的更好看，布局显得紧凑点
限定高宽压缩图片工具 ... 2、添加文件夹时会子... 但是输出 直到一个你指定的文件夹下。 不会建立子文件夹。因此 主要子文件夹。 3、若提示内存不够，应该没事。不放心 请检查图片个数。 大批图片提示该问题 没测过。
在“jcrop_js实现新浪微博头像上传截图功能”这个示例中，开发者可能将Jcrop应用到了一个特定的头像上传流程中，具体步骤可能包括： 1. **图片上传**：用户选择图片后，文件通过Ajax方式上传到服务器，返回图片的...
本项目“Java爬虫+URL获取Img高宽”专注于一个特定的应用场景，即通过Java爬虫从网页中提取图片（Img）的URL，并进一步获取这些图片的宽度和高度。这个功能在网站数据分析、图像处理或自动化测试等场景中具有重要...
深入理解Windows字体的工作原理以及如何获取文字的各个部分的高宽值、屏幕分辨率、屏幕物理尺寸和文字所占像素数，对于进行高级图形编程和界面设计至关重要。在这个话题中，我们将探讨`TEXTMETRIC`结构，它是Windows...
本文将深入探讨“制作高宽高比的电极”的方法，旨在为电子工程师提供有价值的参考资料。 高宽高比电极，顾名思义，指的是电极的宽度与高度之比相对较大，这种设计在微纳米技术中尤为重要，因为它可以显著提高器件的...
2.创建一个Image对象，将base64图片作为Image对象的src 3.拿到Image对象的高宽，按比例计算出想要的高宽（使用image.onload解决各浏览器不兼容拿不到Image对象高宽的问题） 4.按照计算好之后高宽将图片在canvas上...
腾讯QQ聊天工具，最新版本主面板高宽限制解除最新工具。
这是一个autoCAD的插件，加载后输入mm命令就可以运行，它让用户选取图形，从中筛选出红色的图形，比如矩形，多线段等，然后计算出图形的高宽显示出来，可复制粘贴到excle电子表格中编辑。会自动相加相同高宽图形的...
以下是一个详细的教程，教你如何在Dreamweaver中通过`<img>`标签定义图像的高宽。 首先，我们需要创建一个新的HTML文件。打开Dreamweaver，选择“文件”>“新建”>“基本HTML页面”，这将为你创建一个空白的HTML...
多用于在上传图片前初步判断， 图片的高宽是否合法。
这是一个免费的自定义报表组件下载，％100JAVA,无须注册! 主要功能如下;;;; 0.内建网络打印,网络预览功能！ 1.文件操作。包括url 指定的文件。 2.全功能打印支持。包括打印预览。 3.Undo 和 redo。 4....
在IT行业中，网络爬虫是一种自动化程序，用于从互联网上抓取信息，而获取图片（Img）的高度和宽度是爬虫应用的一个常见场景。在Java编程语言中，我们可以利用HTTP库来请求网页，然后解析HTML内容，从而获取到图片的...
在ASP.NET(C#)开发中，处理图片是一个常见的任务，特别是在构建Web应用程序时。本文将详细探讨如何使用C#代码来压缩图片并指定图片模板的高宽，以便生成缩略图。以下是一些关键知识点： 1. **图片处理库**： 在C#...
在这个示例中，`autoResizeTextarea`函数首先将`textarea`的高度重置为自动，然后将其高度设置为自身的滚动高度（`scrollHeight`），这是一个包含了可见和不可见部分的高度值。`addEventListener`方法则用于监听`...
在现代网页设计中，实现页面布局的高宽自适应是一个常见需求。尤其是在响应式网页设计中，高宽自适应的实现尤为关键，以确保网站能够在不同尺寸的设备和屏幕上保持良好的布局和可读性。 文章首先提到了利用div和css...