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. (转)JS Date格式化为yyyy-MM-dd类字符串

    Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month &quo ...

  2. 配置git密钥，然后新建仓库

    Generating SSH keys (打开下面的链接) https://help.github.com/articles/generating-ssh-keys/ 完成配置后 开始在github上 ...

  3. osharp3使用经验：整合DbContextScope 文章 1

    osharp3的事务处理是跳过savechangeing方法来控制的,没有DbContextScope专业 DbContextScope管理dbcontext的优劣本文不讨论 整合过程: 1.在.Da ...

  4. 不下载SDK启动Android Studio

    一.不下载SDK启动Android Studio 给一个解决方法:Android Studio安装目录下的bin,idea.properties:idea.properties文件末尾加一行:disa ...

  5. Java并发编程核心方法与框架-Fork-Join分治编程（一）

    在JDK1.7版本中提供了Fork-Join并行执行任务框架,它的主要作用是把大任务分割成若干个小任务,再对每个小任务得到的结果进行汇总,这种开发方法也叫做分治编程,可以极大地利用CPU资源,提高任务 ...

  6. MySQL索引之前缀索引和索引选择性

    有时需要索引很长的字符列,它会使索引变大而且变慢.一个策略就是模拟哈希索引.但是有时这也不够好,那? 通常可以索引开始的几个字符,而不是全部值,以节约空间并得到好的性能.这使索引需要的空间变小,但是也 ...

  7. linux环境下给文件加密/解密的方法

      原文地址:linix环境下给文件加密/解密的方法 作者:oracunix 一. 利用 vim/vi 加密:优点:加密后,如果不知道密码,就看不到明文,包括root用户也看不了:缺点:很明显让别人知 ...

  8. 使程序在Linux下后台运行

    一.为什么要使程序在后台执行 我们计算的程序都是周期很长的,通常要几个小时甚至一个星期.我们用的环境是用putty远程连接到日本Linux服务器.所以使程序在后台跑有以下三个好处: 1:我们这边是否关 ...

  9. xcode的调试技巧

    转自:http://www.cnblogs.com/daiweilai/p/4421340.html#biyouji 目录 前言逼优鸡知己知彼 百战不殆抽刀断Bug 普通操作 全局断点(Global ...

  10. hdu.1226.超级密码(bfs)

    超级密码 Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...