一、Frame

  1. <frameset id="topFrameSet" rows="69,*" border="0" framespacing="0" frameborder="0">
  2.     <frame name="topframe" src="frameTop.html" scrolling="No" noresize="noresize" id="topFrame" />
  3.     <frameset id="mainFrameSet" cols="142,1,*" border="0" framespacing="0" frameborder="0">
  4.         <frameset id="leftFrameSet" rows="22,*,0" frameborder="no" border="0" framespacing="1">
  5.             <frame name="lefttop" noresize="noresize" border="0" src="frameLeftTop.html" scrolling="no"
  6.                 style="border-right: 1px solid #6c9ede;" />
  7.             <frame name="leftmenu" src="leftMenuMyTask.html" frameborder="0" scrolling="no" noresize="noresize"
  8.                 border="0" target="right" style="border-right: 1px solid #6c9ede;" id="leftmenu" />
  9.             <frame name="leftdn" noresize="noresize" border="0" src="frameleftdown.html" frameborder="0" />
  10.         </frameset>
  11.         <frame name="midline" src="midLine.html" scrolling="No" noresize="noresize" id="midline" />
  12.         <frameset id="rightframeset" border="0" framespacing="0" rows="24,*" frameborder="0">
  13.             <frame name="rightup" src="frameShowPos.html" noresize="noresize" frameborder="0"
  14.                 scrolling="no" />
  15.             <frame name="right" id="right" src="../application/default.html" frameborder="0"
  16.                 scrolling="yes" class="right_scroll" />
  17.         </frameset>
  18.     </frameset>
  19. </frameset>

二、DIV

  1. <body>
  2. <div id="container">
  3.   <div id="header">This is the Header</div>
  4.   <div id="menu">This is the Menu</div>
  5.   <div id="mainContent">
  6.     <div id="sidebar">This is the sidebar</div>
  7.     <div id="content">2列左侧固定，右侧自适应宽度+头部+导航</div>
  8.   </div>
  9. </div>
  10. </body>
  11.  
  12. body { font-family:Verdana; font-size:14px; margin:0;}
  13.  
  14. #container {margin:0 auto; width:100%;}
  15. #header { height:100px; background:#9c6; margin-bottom:5px;}
  16. #menu { height:30px; background:#693; margin-bottom:5px;}
  17. #mainContent { height:500px; margin-bottom:5px;}
  18. #sidebar { float:left; width:200px; height:500px; background:#cf9;}
  19. #content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;}

【Web开发】一、页面布局的更多相关文章

  1. ASP.NET Web Pages：页面布局

    ylbtech-.Net-ASP.NET Web Pages:页面布局 1.返回顶部 1. ASP.NET Web Pages - 页面布局 通过 Web Pages ,创建一个布局一致的网站是很容易 ...

  2. Appcan开发之页面布局与CSS排版(转)

    在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通 ...

  3. XML与web开发-01- 在页面显示和 XML DOM 解析

    前言: 关于 xml 特点和基础知识,可以菜鸟教程进行学习:http://www.runoob.com/xml/xml-tutorial.html 本系列笔记,主要介绍 xml 在 web 开发时需要 ...

  4. Web前端代码页面布局总结

    一.  html (1)编码:所有编码均采用xhtml,标签必须闭合,属性值用双引号包括,编码统一为utf-8. (2)语义化:语义化html,正确使用标签. (3)文件命名:命名以中文命名,依实际模 ...

  5. Java web开发中页面跳转小技巧——跳转后新页面在新窗口打开

    最近学习Java web,在学习过程中想实现一个需求,就是在jsp页面跳转的时候,希望跳转后的新页面在新窗口中打开, 而不是覆盖原来的页面,这个需求使我困惑了好长时间,后来通过大海捞针似的在网上寻找方 ...

  6. web开发：定位布局

    一.盒子的显隐 二.小米topbar 三.相对定位 四.决定定位 五.固定定位 六.z-index属性 七.流式布局思想 八.hover父子悬浮 一.盒子的显隐 1.同一结构下, 如果采用浮动布局,所 ...

  7. web开发jsp页面遇到的一系列问题

    一:web总结 1.jsp页面知识点巩固 1.1字符串数字格式化转换 <%@ taglib prefix="fmt" uri="http://java.sun.co ...

  8. 解决Web开发HTML页面中footer保持在页面底部问题

    如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...

  9. Flask Web 开发 错误页面自定义

    如果要自定义错误画面,无法大多数情况是自定义404和500的情况 首先,要在路由中设置 通过app.error_handler这个装饰器来绑定响应函数 @main.errorhandler(404) ...

  10. 任务十一：移动Web页面布局实践

    面向人群: 有一定HTML及CSS基础,想要尝试移动开发 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合 ...

随机推荐

  1. redis 通配符 批量删除key

    Redis 中 DEL指令支持多个key作为参数进行删除 但不支持通配符,无法通过通配符批量删除key,不过我们可以借助 Linux 的管道和 xargs 指令来完成这个动作. 比如要删除所有以use ...

  2. 跟我学习css3之transition

    HTML5和css3已经是将来的发展趋势,现在有很多移动端还有一些游戏公司已然使用它们开 发了比较成功的产品.我在2011年的时候也跟着技术潮流初浅的学习了html5+css3.毕竟那 时候我没有把学 ...

  3. [Lua快速了解一下]Lua的model

    我们可以直接使用require(“model_name”)来载入别的lua文件,文件的后缀是.lua.载入的时候就直接执行那个文件了.比如: 我们有一个hello.lua的文件: print(&quo ...

  4. Linux 下的多线程下载工具 Axel

    Axel 是 Linux 平台下的一款 HTTP/FTP 的高速下载工具,支持多线程以及断点续传,对于一些有速度限制的服务器上下载东西时,Axel 的速度就明显比 wget 要快一些 还有另一个基于 ...

  5. Linux Crontab 任务管理工具命令以及示例

    Crontab 是 Linux 平台下的一款用于循环执行例行任务的工具,Linux 系统由 cron (crond) 这个系统服务来控制任务 , Linux系统本来就有很多的计划任务需要启动 , 所以 ...

  6. php二维数组去除重复值

    <?php //二维数组 $test["aa"] = array("id"=>"17","name"=> ...

  7. Transaction And Lock--在事务中使用TRY CATCH

    1>当XACT_ABORT被设置为ON时,如果TSQL 语句遇到运行时错误,整个事务会被回滚和结束2>当XACT_ABORT被设置为OFF时,如果TSQL 语句遇到运行时错误,只会回滚当前 ...

  8. 转载C#中Trim()、TrimStart()、TrimEnd()的用法

    C#中Trim().TrimStart().TrimEnd()的用法:    这三个方法用于删除字符串头尾出现的某些字符.Trim()删除字符串头部及尾部出现的空格,删除的过程为从外到内,直到碰到一个 ...

  9. 工作中的Buff加成-结构化思考力：第一章：认识结构化思维及其作用

    一:引言 为了更好的说明结构思考力,我们先来做几个小测试. PS:如果你能做到,请留言,因为我要和你交好友,因为你是人才啊,可以挖一挖,挖到我的公司中. 第一个测试:请在三秒内记住下列数字.数字顺序不 ...

  10. 高性能无锁队列 Disruptor 初体验

    原文地址: haifeiWu和他朋友们的博客 博客地址:www.hchstudio.cn 欢迎转载,转载请注明作者及出处,谢谢! 最近一直在研究队列的一些问题,今天楼主要分享一个高性能的队列 Disr ...