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. php字符串常用算法--字符串加密解密

    /** * 加密.解密字符串 * * @global string $db_hash * @global array $pwServer * @param $string 待处理字符串 * @para ...

  2. Winform添加Label

    Info from : http://www.csharpwin.com/csharpspace/6253r7952.shtml 本例子主要是介绍如何在 C#开发WinForm中加入一个组件,如果你想 ...

  3. Java并发编程核心方法与框架-ExecutorService的使用

    在ThreadPoolExecutor中使用ExecutorService中的方法 方法invokeAny()和invokeAll()具有阻塞特性 方法invokeAny()取得第一个完成任务的结果值 ...

  4. 解决windows系统80端口被占用问题（转）

    在windows下部署web应用(80端口),启动时提示bind 80端口失败 检查端口占用: netstat -ano | findstr 0.0.0.0:80 发现System进程 (pid=4) ...

  5. C# MVC EF中匿名类使用

    控制器中代码: var list = context.Says.Join( context.Users, a => a.UserId, b => b.Id, (a, b) => ne ...

  6. MySql集群FAQ----mysql主从配置与集群区别、集群中需要多少台计算机呢?为什么? 等

    抽取一部分显示在这里,如下, What's the difference in using Clustervs using replication? 在复制系统中,一个MySQL主服务器会更新一个或多 ...

  7. strtoull函数的使用，及相关信息汇总

    kafka中涉及到序列化,有一个参数是在发送消息实体前边以一个序列号打头, seq = strtoull((prdcfgval+1), NULL, 10); do_seq = 1; 其中(prdcfg ...

  8. 真正理解linux的inode?

    linux 在整个架构上可以看作是三层: 1.底层代码, (引导层strip) 跟硬件沟通的那一层的代码(可能是汇编+c), 驱动底层的; strain: n./v. 拉紧, 张力, 气质, 风格, ...

  9. 希望各位博友能对我的自我介绍提出意见（要面试IBM的应用开发工程师，本科应届生一枚）

    面试官你好,首先我非常高兴能参加今天的面试. 我叫XXX(我名字里面有光宗耀祖),也许父母希望我光宗耀祖吧,所以给我起这样的名字.我的家乡山西太原,本科就读于XX大学,专业是信息与计算科学. 我今天要 ...

  10. VBA 实现批量excel文件复制

    对于每天要将文件复制到其他多个路径 1 在test文件下新建3个子文件夹 test1,test2,test3 2 在test1下新建li01.xlsx,li02.xlsx,hua01.xlsx,hua ...