Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面。可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结。

1、元素漂移

把一个元素从页面流中移走,漂移到某个方向,其他块元素会置于这个元素以下,当有内联元素注入其他块元素时,内联元素会围绕着这个元素

#amazing{

width: 200px;

float: right;

}

如图:

假设其它元素要避开这个元素

#footer{

clear: both;

}

如图:

2、冻结布局

元素还保留在页面流中,锁定这个元素,冻结在页面上,不论放大还是缩小窗体,这个元素的大小不变

#allcontent{

width: 800px;

}

如图:

3、凝胶物布局

锁定页面中内容区的宽度,把它放置在浏览器中央

#allcontent{

width: 800px;

margin-left: auto;

margin-right: auto;

}

如图:

4、绝对布局

把一个元素从页面流中移走,并漂浮固定在页面的某个位置。

#sidebar{

position: absolute;

top: 128px;

right: 480px;

}

如图:

5、固定布局

把一个元素从页面流中移走,并漂浮固定在窗体的某个位置。

#coupon{

position: fixed;

top: 300px;

left: 100px;

}

如图:

6、相对布局

元素还保留在页面流中,但在页面显示之前把元素偏移到指定的位置,原来的位置由于还在流中,所以不会被其它元素占位。

.beanheading img{

position: relative;

right:120px;

}

如图:

(完)

Web页面布局方式小结的更多相关文章

  1. SiteMesh:一个优于Apache Tiles的Web页面布局、装饰框架

    一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...

  2. 任务十一:移动Web页面布局实践

    面向人群: 有一定HTML及CSS基础,想要尝试移动开发 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合 ...

  3. Android--->LinearLayout页面布局方式

    main.xml布局方式 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  4. 004 Android XML文件常用五大页面布局方式

    1.线性布局(LinearLayout)最常用 <1>使用线性布局,首先在xml文件中修改布局为LinearLayout 修改完成后,可在Component Tree中看见如下内容: &l ...

  5. web页面布局思想

    一.盒子模型 网页可以看成由一个个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商品分类).中(主要部分).右,这些版 ...

  6. HTML5-03 页面布局

    概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...

  7. 比float更好的页面布局inline-block

    一:页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说 ...

  8. 移动端WEB页面

    百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...

  9. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

随机推荐

  1. PC--CSS优化

    优化你的CSS 所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误: 1.不要在ID选择器前使用标签名一般写法:DIV#divB ...

  2. Prototypes analyze(二叉排序树,不同树形个数)

    Prototypes analyze 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 ALpha Ceiling Manufacturers (ACM) is ana ...

  3. NOT 运算符

    NOT运算符不是独立的,它是一个可以放在任何逻辑表达式前面的修饰符,能得到与结果相反的结果.所以,如果一个表达式是真,就会得到假:如果是假,就会得到真.有时测试查找条件的反面更容易.不过,NOT运算符 ...

  4. PHP学习笔记三十一【const】

    <?php //常量都是public类型 // const 常量名=赋值 .变量名不需要加$符号,也不需要要访问修饰符,默认就是public class A{ const TAX_RATE=0. ...

  5. Xcode的代码片段快捷方式-Code Snippet Library(代码片段库)

    最近换了新电脑,装上Xcode敲代码发现很多以前攒的Code Snippet忘记备份了,总结了一下Code Snippet的设置方法,且行且添加,慢慢积累吧. 如下图:   Title - Code ...

  6. for循环执行顺序

    for循环的执行顺序用如下表达式: for(expression1;expression2;expression3) { expression4; } 执行的顺序应该是: 1)第一次循环,即初始化循环 ...

  7. FileBeat

    FileBeat使用说明 FileBeat是一个日志收集器,基于Logstash-Forwarder的源代码.FileBeat一般以代理的身份运行在客户端服务器中,并监视用户指定的目录.文件,同时把日 ...

  8. git add和被ignore的文件

    如果有如下的目录结构: workspace tree | --------------------- |                             | hello.c           ...

  9. mysql存储过程实践总结

    一:参数类型 1.IN 只能读取参数并在函数内部更改有效,不能持久化到外部变量 2.OUT  不能读取参数,可以在函数内部修改并保存到外部变量 3.INOUT 既能读取又能持久化 二:基本格式 mys ...

  10. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...