Web页面布局方式小结
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页面布局方式小结的更多相关文章
- SiteMesh:一个优于Apache Tiles的Web页面布局、装饰框架
一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...
- 任务十一:移动Web页面布局实践
面向人群: 有一定HTML及CSS基础,想要尝试移动开发 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合 ...
- Android--->LinearLayout页面布局方式
main.xml布局方式 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...
- 004 Android XML文件常用五大页面布局方式
1.线性布局(LinearLayout)最常用 <1>使用线性布局,首先在xml文件中修改布局为LinearLayout 修改完成后,可在Component Tree中看见如下内容: &l ...
- web页面布局思想
一.盒子模型 网页可以看成由一个个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商品分类).中(主要部分).右,这些版 ...
- HTML5-03 页面布局
概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...
- 比float更好的页面布局inline-block
一:页面布局的发展过程 桌格设计 表格+css div+css的浮动布局 div+css的内联块布局 二:流行多年的浮动布局的优劣 优势: div+css浮动布局的优势,主要是相对于table布局来说 ...
- 移动端WEB页面
百度前端技术学院第一阶段任务十一,关于移动端WEB页面布局,参考资料如下(都是一些网页链接): MDN:手机网页开发 MDN:在移动浏览器中使用viewport元标签控制布局 移动前端开发和 Web ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
随机推荐
- Spark MLlib Deep Learning Deep Belief Network (深度学习-深度信念网络)2.3
Spark MLlib Deep Learning Deep Belief Network (深度学习-深度信念网络)2.3 http://blog.csdn.net/sunbow0 第二章Deep ...
- NTP配置实践
前言 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.不管是平时使用的私人计算机还是在工作中搭建的服务器集群.时间的统一性和准确性是十分 ...
- Android应用程序消息处理机制(Looper、Handler)分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6817933 Android应用程序是通过消息来 ...
- Spring 反转控制(IOC) 依赖注入(DI)
简单的理解: 之前是我为了完成业务A 需要某个对象B的支持 那么我在这个业务A中就会创建一个对象B使用,说白了就是我根据需求来控制对象B, 而spring的ioc把对象B的控制权从业务A手中拿到自己手 ...
- 面试前的准备---C#知识点回顾----02
经过昨天大量的简历投递,今天陆续收到面试邀约,明日准备大战一场,是死是活一试便知 1.数据库的范式 这算入门问题了吧,但凡是个数据库类的,都得问吧, 但我们在回答的时候开始背书啦 第一范式(1NF)无 ...
- 线程:Exchanger同步工具
可以在对中对元素进行配对和交换的线程的同步点,类似于交易,A拿着钱到达指定地点,B拿着物品到达指定地点,相互交换,然后各自忙各自的事去了. package ch03; import java.util ...
- jquery模拟checkbox效果,以及background-size在jquery中的使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Know Thy Complexities!
http://bigocheatsheet.com/ Hi there! This webpage covers the space and time Big-O complexities of c ...
- 一些不熟悉的SQL脚本--约束条件
1.根据表名查询主键的SQL语句 SELECT D.COLUMN_NAME AS COLNAME FROM USER_CONS_COLUMNS D, USER_CONSTRAINTS M WHERE ...
- iOS-OC-基础-NSPredicate常用方法
NSpredicate 常用方法 // 谓词的条件查询 > .< .==.!= NSPredicate *predicate1 = [NSPredicate predicateWithFo ...