1.纵向切分页面:CSS POSITION的默认值为：STATIC

1）

 <html>

     <head>

         <title>Hello</title>

     </head>

     <body>

         <div style="float:left;background:red;width:50%;height:50%;">

             <div style="float:left;background:red;width:50%;height:50%;"></div>

             <div style="background:yellow;height:50%;"></div>

         </div>

         <div style="background:yellow;height:50%;"></div>

     </body>

 </html>

显示的效果（IE11）

2）

 <html>

     <head>

         <title>Hello</title>

     </head>

     <body>

         <div style="float:right;background:red;width:50%;height:50%;">

             <div style="position:relative;float:right;background:blue;width:50%;height:50%;"></div>

             <div style="background:gray;height:50%;"></div>

         </div>

         <div style="background:yellow;height:50%;"></div>

     </body>

 </html>

显示效果（IE11）

3）

 <html>

     <head>

         <title>Hello</title>

     </head>

     <body>

         <div style="float:right;background:red;width:50%;height:50%;">

             <div style="position:absolute;float:right;background:blue;width:50%;height:50%;"></div>

             <div style="background:gray;height:50%;"></div>

         </div>

         <div style="background:yellow;height:50%;"></div>

     </body>

 </html>

显示效果（IE11）

HTML页面的布局的更多相关文章

  1. Bootstrap~页面的布局

    回到目录 Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要 ...

  2. 关于贴友的一个书本页面简单布局（html+css）的实现

    贴友需求:以html+css仿照书本的页面实现布局效果(见图) html代码: 1: <!-- 我的博客:http://www.ido321.com --> DOCTYPE HTML> ...

  3. HTML 页面源代码布局介绍

    http://www.cnblogs.com/polk6/archive/2013/05/10/3071451.html 此介绍以google首页源代码截图为例: 从上到下依次介绍: 1.<!D ...

  4. 关于H5填写信息类页面横向布局总结

    接触h5已经有快一年了,因为一直偏向页面重构所以在页面布局方面也算是经历过风风雨雨.所以总结一下自己用过的方法来比较归纳 首先来说,H5的页面一般分为两种,一种是用来做市场营销的,主要特征是图多,页面 ...

  5. [转]关于负margin在页面中布局的应用

    本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况 ...

  6. 手机页面rem布局

    手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局,更推荐用rem布局来制作手机页面. 首先,给页 ...

  7. Html5移动端页面自适应布局详解(阿里rem布局)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后 大概viewport可以理解为三种 1.layout viewport  ...

  8. HTML+CSS实现页面豆腐块布局和图片居中

    <!DOCTYPE html> <html> <head lang="en"> <meta http-equiv="Conten ...

  9. 页面常见布局以及实现方法--flex

    页面布局是前端工程师的基本功之一,总结分析各种布局实现方法,可以让自己快速定位哪种方法实现功能,同时可以做到现最大程度的兼容. 一.水平居中 假设:最基本机构 .parent>.child 1. ...

  10. webApp 页面适配布局

    webApp 页面布局 1. 流式布局 概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽 ...

随机推荐

  1. thinkphp安装 版本 3.1.3

    基础版: 只有thinkphp基础运行功能 完整版:基础运行能力,还有图片.上传等各种处理类(建议下载完整版) 重要的三个变量 define('APP_DEBUG',True); // 定义应用目录d ...

  2. phpmyadmin 链接远程mysql

    这个只是自己的笔记 新手 不记下来以后又忘记了~ 在这以前已经给mysql设置了可以远程连接的账户 版本 phpMyAdmin-4.2.11-all-languages 解压到D盘下www   本地环 ...

  3. Lua 之 userdata

    Lua 之 userdata 在Lua中可以通过自定义类型(user data)与C语言代码更高效.更灵活的交互,从而扩展Lua能够表达的类型. full userdata full userdata ...

  4. Java %c0%ae 安全模式绕过漏洞

    漏洞类型:安全模式绕过漏洞 漏洞描述:在Java端"%c0%ae"解析为"\uC0AE",最后转义为ASCCII低字符-".".通过这个方法 ...

  5. canvas代替img渲染图片

    移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...

  6. Orchard源码分析（4.4）：Orchard.Caching.CacheModule类

    概述 CacheModule也是一个Autofac模块.   一.CacheModule类 CacheModule将DefaultCacheManager注册为ICacheManager:       ...

  7. 自定义验证jquery.validate

    js中填写 $(function() { validateSysConfigForm(); jQuery.validator.addMethod("validateNum", fu ...

  8. BeanNameAware接口和BeanFactoryAware接口

    迄今为止,所接触到的Bean都是“无知觉”的,就像黑客帝国中机械工厂里面“养殖”的人类,他们虽然能完成一定的功能,但是根本不知道自己在工厂(BeanFactory)中的代号(id),或者自己是在哪个工 ...

  9. F5负载均衡的初识和基本配置

    目前全球范围内应用比较广泛的负载均衡设备为美国的F5.F5于2000年底进驻中国,在国内业界,F5负载均衡产品已经成为了主流负载均衡技术的代名词.下面我们对F5负载均衡设备做一个基本介绍,方便大家去认 ...

  10. 【转】使用Eclipse构建Maven项目 (step-by-step)

    安装eclipse 及配置maven时,参考的资料!!! from:http://blog.csdn.net/qjyong/article/details/9098213 Maven这个个项目管理和构 ...