HTML页面的布局

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

1）

 1 <html>
 2     <head>
 3         <title>Hello</title>
 4     </head>
 5     <body>
 6         <div style="float:left;background:red;width:50%;height:50%;">
 7             <div style="float:left;background:red;width:50%;height:50%;"></div>
 8             <div style="background:yellow;height:50%;"></div>
 9         </div>
10         <div style="background:yellow;height:50%;"></div>
11     </body>
12 </html>

显示的效果（IE11）

2）

 1 <html>
 2     <head>
 3         <title>Hello</title>
 4     </head>
 5     <body>
 6         <div style="float:right;background:red;width:50%;height:50%;">
 7             <div style="position:relative;float:right;background:blue;width:50%;height:50%;"></div>
 8             <div style="background:gray;height:50%;"></div>
 9         </div>
10         <div style="background:yellow;height:50%;"></div>
11     </body>
12 </html>

显示效果（IE11）

3）

 1 <html>
 2     <head>
 3         <title>Hello</title>
 4     </head>
 5     <body>
 6         <div style="float:right;background:red;width:50%;height:50%;">
 7             <div style="position:absolute;float:right;background:blue;width:50%;height:50%;"></div>
 8             <div style="background:gray;height:50%;"></div>
 9         </div>
10         <div style="background:yellow;height:50%;"></div>
11     </body>
12 </html>

显示效果（IE11）

时间： 2024-12-28 03:34:10

HTML页面的布局的相关文章

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

贴友需求:以html+css仿照书本的页面实现布局效果(见图) html代码: 1:  2: <!DOCTYPE HTML> 3: <html> 4: <head> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <title>T

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

贴友需求:以html+css仿照书本的页面实现布局效果(见图) html代码: 1:  DOCTYPE HTML> html> head> meta http-equiv="content-type" content="text/html;charset=utf-8"> title>Test</title> meta name="au

HTML 页面源代码布局介绍

http://www.cnblogs.com/polk6/archive/2013/05/10/3071451.html 此介绍以google首页源代码截图为例: 从上到下依次介绍: 1.<!DOCTYPE html> 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. XHTML规范:必须小写,有开始结束标签,属性也用双引号. HTML规范:不区分大小写,有开始和结束标签,也可把结束标签放在开始标签里,如:<input type='text' /> .属性可用双引号

Bootstrap~页面的布局

Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西. Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个

手机页面rem布局

手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?一般的解决方案有两种,rem布局和百分比布局.这两种方案我有都试过,所以现在更推荐用rem布局来制作手机页面; rem布局的兼容性:Mozilla Firefox 3.6+.Apple Safari 5+.Google Chrome.IE9+和Opera11+.ie6-ie8 还是别用rem不过现在的手机一般浏览器,一般可以直接不用去管IE内核的浏览器了. REM的计算公式例:html 设

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

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport,通读网上的各种对于viewport的解释之后大概viewport可以理解为三种 1.layout viewport ,也就是这个浏览器默认的viewport 2.visual viewport , 浏览器可视区域viewport 3. ideal viewport ,移动设备的理想viewport 通俗点讲,pc端css中的1px并不会等于移动端,原理很简单,举个例子说通过chrome浏览器可以知道,一个I

关于负margin在页面中布局的应用

本文转载自:http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html. 今天再写一个布局的时候用到一个margin-top是负值的情况,本来不是要用负值,但突然发现负值也能达到我要的效果,随后百度了一下,才发现了大牛的好文章,转载至此,算是学习一个经验,进行记录,同样也给分享给没看到的同学. 以下是正文负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这里说的

rem手机端页面自适应布局（待修正下一篇完美布局）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script> (f

页面自适应布局解决方案

当你在网页中看视频的时候,一般页面中都会有个播放器,你会注意到,播放器的左面一般都会有个可伸缩的列表,如图云迅雷播放页. 下面我提供两种解决方案: html代码一般是这样的: <div class="content" id="main"> <div class="con_right"> <div class="right_margin"> <div>播放页部分</div&g

页面动态布局感悟

有时候我们编写好了一个美观的页面,自以为很满意,但是当别人用的时候改变浏览器的宽度,或者放大缩小浏览器,页面的美感就很容易被打破,这就是因为你的页面布局不够动态! 所谓动态布局就是你的页面在各种情况都不会出现布局混乱,元素重叠,空白过多,以及出现左右滚动条等情况.所以写好页面,千万不要因偷懒而草草结束,记着做以下两步:改变你的浏览器的宽度,从最大到最小:按住Ctrl键,滚动鼠标,缩放你的浏览器.如果这两种情况都是OK的.那么就真的完美了!如何动态布局?下面就根据我前端开发的经验,谈谈自己的心得.