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. C语言生成服从均匀分布, 瑞利分布, 莱斯分布, 高斯分布的随机数

    用c语言 产生服从均匀分布, 瑞利分布,莱斯分布,高斯分布的随机数   一,各个分布对应的基本含义: 1. 均匀分布或称规则分布,顾名思义,均匀的,不偏差的.植物种群的个体是等距分布,或个体之间保持一 ...

  2. Orchard源码分析（5）：Host相关（Orchard.Environment.DefaultOrchardHost类）

    概述 Host 是应用程序域级的单例,代表了Orchard应用程序.其处理应用程序生命周期中的初始化.BeginRequest事件.EndRequest事件等. 可以简单理解为HttpApplicat ...

  3. VisualStudio基本使用(1)-显示行号

    "工具"-"选项"-"文本编辑器"-"C/C++"-"常规",勾选"行号"复选框 ...

  4. SQL Server 2012不支持从SQL Server 2000的备份进行还原

    错误: dbbackup failed: Unable to restore database 'ppt'Not valid backupThe database was backed up on a ...

  5. Job中织梦标签的调用

    织梦CMS是一个好东东, 可以让一个网站更好维护和管理, 唯一让我感到忧桑的就是经常在搭后台的时候记不住那些标签,,无奈只能去看手册,有相同的案例直接COPY过来,直接用就OK~~~其实CMS这个东西 ...

  6. 【AngularJS】—— 13 服务Service

    在AngularJS中有很多的服务,常用的比如$http,$location等等. 本篇文章会介绍一下的内容: 1 $http这种Angular提供的服务的使用 2 如何自定义服务,并总结服务需要注意 ...

  7. python SMTP邮件发送（转载）

    Python SMTP发送邮件 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式. py ...

  8. Todd's Matlab讲义第3讲：牛顿法和for循环

    方程数值求解 下面几讲,我们将聚集如下方程的解法: \begin{equation} f(x)=0 \tag{3.1}\label{3.1} \end{equation} 在微积分课程中,我们知道,许 ...

  9. Linq查询操作语句学习

    对于一个集合,我们通常会用foreach或者for循环来判断查找里面的元素. 但这种方法通常会看起来比较复杂,我们可以使用linq. Linq允许编写C#代码以查询数据库相同的方式操作内存数据(写法类 ...

  10. PHP基础 之 数组(一)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...