http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/

<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left Frame Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>

<div id="framecontent">
<div class="innertube">

<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">
Dynamic Drive CSS Library</a></p>

</div>
</div>

</body>
</html>

使用css技术代替传统的frame技术的更多相关文章

  1. 网时|云计算的集群技术对于传统IDC而言，又有哪些提高呢？

    当传统的IDC产品已经不足以满足现在科技的飞速发展时,云计算便应运而生.咱们暂且不论云计算在其他领域的贡献,仅IDC来讲,云计算的集群技术对于传统IDC而言,又有哪些提高呢? 1.服务类型 常用的传统 ...

  2. truetype技术和矢量字库的技术原理及实现（转）

    源:truetype技术和矢量字库的技术原理及实现 广泛汉字矢量字库(HZKSLxxJ)格式             在矢量字库中,每个汉字都是以128   X   128点阵制成矢量数据.每个汉字  ...

  3. java基础-网络编程（Socket）技术选型入门之NIO技术

    java基础-网络编程(Socket)技术选型入门之NIO技术 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.传统的网络编程 1>.编写socket通信的MyServer ...

  4. IP通信中音频编解码技术与抗丢包技术概要

    此文较长,建议收藏起来看. 一.一个典型的IP通信模型 二.Server2Server技术分类 Server2Server这块也是一个专门的领域,这里只简单分个类. 1.同一国家相同运营商之间: 同一 ...

  5. 性能达到原生 MySQL 七倍，华为云 Taurus 技术解读【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  6. Java Web开发技术教程入门-静态网页技术

        昨天了解了构建动态网站的几种技术:Servlet技术.JSP技术,ASP技术和ASP.NET技术以及PHP技术.昨天的精髓在于JSP技术的运行原理:通过用户请求JSP文件,首先检查JSP文件的 ...

  7. 客户端技术：Cookie 服务端技术：HttpSession

    客户端技术:Cookie 服务端技术:HttpSession 07. 五 / android基础 / 没有评论   一.会话技术1.什么是会话:客户打开浏览器访问一个网站,访问完毕之后,关闭浏览器.这 ...

  8. 网络技术教程笔记(18）常见广域网技术——X.25与郑中基技术（←_←搜狗输入法你够了）

    广域网与接入网技术 广域网与接入网技术 常见广域网技术--X.25 产生背景 尽管在当时,苹果二代计算机已经取得了很大的成功,但是PC和工作站却没有流行,也没有获得很多的网络支持,大多数人还是使用便宜 ...

  9. Amazon前技术副总裁解剖完美技术面试

    Amazon前技术副总裁解剖完美技术面试 投递人 itwriter 发布于 2014-03-03 14:30 评论(0) 有1729人阅读  原文链接  [收藏]  « » 英文原文:The Anat ...

随机推荐

  1. jmeter --上传文件

    jmeter-场景-上传文件-send-a-file 简要说就3点: POST请求 Request的参数都写在路径内,不写在表单里 上传的文件写在表单里 只要记住以上3点,也就避免了在设计脚本的时候走 ...

  2. 【linux】Linux 进程状态

    linux上进程有5种状态: 1. 运行(正在运行或在运行队列中等待) 2. 中断(休眠中, 受阻, 在等待某个条件的形成或接受到信号) 3. 不可中断(收到信号不唤醒和不可运行, 进程必须等待直到有 ...

  3. 基于Hadoop开发网络云盘系统架构设计方案第一稿

    引言 云计算技术的发展,各种网络云盘技术如雨后春笋,层出不穷,百度.新浪.网易都推出了自己的云盘系统,本文基于开源框架Hadoop设计实现了一套自己的网络云盘系统,方案为初步设计方案,不断完善中. 一 ...

  4. 部署DNS从服务器

    修改主服务器中区域信息文件: # vi /etc/named.rfc1912.zones 检查配置文件是否有错误 # named-checkconf 重启named服务程序,让配置文件生效 #syst ...

  5. Docker集群管理（三）—— docker swarm mode基础教程

    docker从1.12版(及后续版本)集成了swarmkit.可以方便的实现docker集群.它有哪些特点呢: 集成了集群功能 分散设计:manager和worker两种节点. 声明式服务模式 可伸缩 ...

  6. PHP流程控制 - if 语句

    PHP - if 语句 if 语句用于仅当指定条件成立时执行代码. 语法 if (条件) { 条件成立时要执行的代码; } 如果当前时间小于 20,下面的实例将输出 "Have a good ...

  7. nginx配置详解（转）

    Nginx 配置文件详解 user nginx ; #用户 worker_processes 8; #工作进程,根据硬件调整,大于等于cpu核数 error_log logs/nginx_error. ...

  8. linux 系统管理 实战技巧

    一.这篇文章讲了什么? 这篇文章很有参考性哈.本来是想等一段时间有更多条技巧后在发布的,不过,突然发现,我是去年的今天在博客园落户了,祝我的博客一周岁快乐,希望以后多分享一些文章啦.所以就把草稿箱的其 ...

  9. 线程使用方法 锁(lock,Rlock),信号了(Semaphore),事件(Event),条件(Ccndition),定时器(timer)

    2线程的使用方法  (1)锁机制       递归锁           RLock()    可以有无止尽的锁,但是会有一把万能钥匙       互斥锁:           Lock()     ...

  10. SignalR + Mvc 4 web 应用程序

    在上节中,我们已经初步对 SignalR 进行了了解,这一节我们将做一个SignalR Demon,具体的步骤如下: 1. 创建一个 mvc 4 web 应用程序,并选择 Basic 2. 创建一个 ...