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. ecshop 活动-》红包

    按商品发放:可以给指定某个商品发红包(购买付款,卖家发货后,会自动给买家发送红包:不是买家在付款的时候就自动可以减少红包金额) 按订单金额发放:订单满xx后(卖家发货后,会自动给买家发放红包)

  2. yourphp 的 ThinkTemplate.class.php与ContentReplaceBehavior.class.php

    ThinkTemplate.class.php :去掉版权(针对html代码) ContentReplaceBehavior.class.php:一些默认标签的路劲,如:__PUBLIC__,../P ...

  3. tableview中在tableheaderView上放一个视图，第一次进入视图显示不正常，往下拉视图仍然不正常，往上拉视图正常

    解决办法: frame来源不正常,从直接在viewDidLoad方法中设置的frame,改为 - (void)viewDidLayoutSubviews { [super viewDidLayoutS ...

  4. IOS: 账号，证书 好文整理

    公钥.私钥.数字证书的概念 http://blog.csdn.net/turui/article/details/2048582 iOS Provisioning Profile(Certificat ...

  5. Python之路【第九篇】堡垒机基础&数据库操作

    复习paramiko模块 Python的paramiko模块,是基于SSH用于连接远程服务器并执行相关操作. SSHClient #!/usr/bin/env python #-*- coding:u ...

  6. [转]asp.net webform 与mvc 共享session

    公司内部系统最早是用.net webform模式开发的,现新项目用.net mvc 开发,现存在的问题就是如何保持原有.net webform的登录状态不变,而在mvc中能够验证用户的登录状态,也就是 ...

  7. fedora各个版本的下载地址archive

    archive: ['a:kaiv] she went to the city archive this morning. ==================== === fedora 的下载地址是 ...

  8. MFC CStatic类动态创建

    如果我使用下面风格: m_PictureCtrl.Create(NULL, WS_EX_TRANSPARENT|WS_CHILD|WS_VISIBLE|WS_TABSTOP|SS_OWNERDRAW, ...

  9. Javaee----重新回顾servlet

    最近面临找工作,不得不回顾一下java servelt . 发现lz的基本功还是很差 1. 每一个servlet都必须实现servlet接口,GenericServlet是个通用的.不特定于任何协议的 ...

  10. Nginx-tomcat-redis------负载均衡以及session共享

    测试环境 Nginx 1.10.1 tomcat 7.0.70 Redis-x64-3.2.100 说明 tomcat 8 和 redis 实现session共享 有问题. 寻找源码 发现tomcat ...