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) 的框架组件,能够帮助网站开发人员较 ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
移动端页面布局方式，简单记录一下
目录 1.视口 2.多倍图 3.移动端开发选择 4.移动端技术解决方案 5.移动端常见布局 6.流式布局 7.flex弹性布局 ①flex与传统布局比较 ②flex布局原理 ③常见父项属性 8.rem ...
当前比较流行的页面布局方式
1.固定宽度布局:当前各大网站的页面都是固定宽度布局. 优点:更好的适应当前市场上所有的设备:我们知道当前市面上主流的集中分辨率为以下几种 800*600 1024*768 1280*1024等属于普 ...
常见的5种网站页面布局方式及特点分析
互联网的世界里,网页是我们接触最多的内容展示平台(载体),各种风格设计及不同类型主题的网站数不胜数,笔者作为一名网页设计师,在关注内容本身的同时,也喜欢研究一下网站页面的设计特点,这不失为一种提升网页 ...
常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式公共的样式部分 <style>* ...
2.18 前端页面布局方式的演变
第一阶段现在已经很少有人提及,其实最早的页面布局是使用table布局的,那时候的网页设计师基本不会担心跑位的问题,但是随着网页的功能越来越复杂,CSS的表现力越来越强,对HTML文档的语义化要求和页 ...
后台管理页面布局、web页面布局
做一个简单的页面布局演示地址:https://genin.gitee.io/web-demo/web-layout.html 基本结构如下 <body> <!-- svg图标 -- ...
java swing 页面布局方式_javaswing酷炫界面
java swing怎样开发出漂亮的界面 Swing 支持切换界面风格啊... 默认的是Metal风格,确实不好看你可以切换为Windows风格,看起来和Windows上的程序就是一样滴了,还可以切 ...

Web页面布局方式小结

Web页面布局方式小结相关推荐

最新文章

热门文章