一、Frame

<frameset id="topFrameSet" rows="69,*" border="0" framespacing="0" frameborder="0">
    <frame name="topframe" src="frameTop.html" scrolling="No" noresize="noresize" id="topFrame" />
    <frameset id="mainFrameSet" cols="142,1,*" border="0" framespacing="0" frameborder="0">
        <frameset id="leftFrameSet" rows="22,*,0" frameborder="no" border="0" framespacing="1">
            <frame name="lefttop" noresize="noresize" border="0" src="frameLeftTop.html" scrolling="no"
                style="border-right: 1px solid #6c9ede;" />
            <frame name="leftmenu" src="leftMenuMyTask.html" frameborder="0" scrolling="no" noresize="noresize"
                border="0" target="right" style="border-right: 1px solid #6c9ede;" id="leftmenu" />
            <frame name="leftdn" noresize="noresize" border="0" src="frameleftdown.html" frameborder="0" />
        </frameset>
        <frame name="midline" src="midLine.html" scrolling="No" noresize="noresize" id="midline" />
        <frameset id="rightframeset" border="0" framespacing="0" rows="24,*" frameborder="0">
            <frame name="rightup" src="frameShowPos.html" noresize="noresize" frameborder="0"
                scrolling="no" />
            <frame name="right" id="right" src="../application/default.html" frameborder="0"
                scrolling="yes" class="right_scroll" />
        </frameset>
    </frameset>
</frameset>

二、DIV

<body>
<div id="container">
  <div id="header">This is the Header</div>
  <div id="menu">This is the Menu</div>
  <div id="mainContent">
    <div id="sidebar">This is the sidebar</div>
    <div id="content">2列左侧固定，右侧自适应宽度+头部+导航</div>
  </div>
</div>
</body>

body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#menu { height:30px; background:#693; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:#cf9;}
#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. 编写高质量代码改善C#程序的157个建议——建议154：不要过度设计，在敏捷中体会重构的乐趣

    建议154:不要过度设计,在敏捷中体会重构的乐趣 有时候,我们不得不随时更改软件的设计: 如果项目是针对某个大型机构的,不同级别的软件使用者,会提出不同的需求,或者随着关键岗位人员的更替,需求也会随个 ...

  2. 编写高质量代码改善C#程序的157个建议——建议74：警惕线程的IsBackground

    建议74:警惕线程的IsBackground 在CLR中,线程分为前台线程和后台线程,即每个线程都有一个IsBackground属性.两者在表现形式上的唯一区别是:如果前台线程不退出,应用程序的进程就 ...

  3. Redis缓存相关

    Redis缓存服务搭建及实现数据读写 RedisHelper帮助类 /// <summary> /// Redis 帮助类文件 /// </summary> public cl ...

  4. 【转】Android - 线程同步

    什么是线程同步? 当使用多个线程来访问同一个数据时,非常容易出现线程安全问题(比如多个线程都在操作同一数据导致数据不一致),所以我们用同步机制来解决这些问题. 实现同步机制有两个方法: 1.同步代码块 ...

  5. LDAP 相关链接

    http://www.cnblogs.com/fish-li/archive/2012/05/07/2486840.html细说ASP.NET Windows身份认证 http://www.cnblo ...

  6. Django ajax方法提交表单，及后端接受数据

    前台代码: {% block content %} <div class="wrapper wrapper-content"> <div class=" ...

  7. base64编码问题

    最近遇到一个很奇怪的问题:post方式上传文件,因为文件不大,所以直接base64后作为参数扔给服务器.一开始好用,后来出问题了,上传的压缩包再下载后,能双击打开看到压缩包里面的文件,但是解压就报错, ...

  8. Office 2019 官方镜像下载地址

    http://officecdn.microsoft.com/pr/492350f6-3a01-4f97-b9c0-c7c6ddf67d60/media/zh-cn/ProPlus2019Retail ...

  9. Oracle导出导入数据

    Oracle数据导入导出imp/exp就相当与oracle数据还原与备份, 利用这个功能你可以构建俩个相同的数据库,一个用来测试,一个用来正式使用. 可以在SQLPLUS.EXE或者DOS(命令行)中 ...

  10. js webstrom中svn的配置及使用

    js  webstorm中svn的配置及使用 一.webstorm配置svn: 1.在webstorm工具中找到file(文件)-setting(设置)菜单按钮: 2.在左边菜单中找到plus(插件) ...