网站专题BANNER

前端中的布局方式有哪些?

发表日期:2021-09-01 21:01:00 文章编辑:洛壹网络 文章来源:深圳网站建设

在web前端开发中,存在有很多的布局模式,这些布局模式各有各的优势,今天咱们就在说说,前端中的布局方式有哪些


一、Table布局

首先是table布局,table布局是一种非常古老的布局模式,很早之前都是使用table布局的,并且在之前在Dreamweaver甚至可以直接生成table布局的页面,可想而知,在很早以前,table表格也是非常受欢迎的一种布局模式。那为什么现在不再使用了呢?


table表格布局结构麻烦,创建一行就需要添加 table - tr - td 三个标签,这样写起来是很麻烦的

table样式不好调整

现在主流的设计页面以不规则的网页位置,而table表格在布局上有局限,只能在方方正正的页面中才能使用

因此现在市面上,基本上没有用table表格布局的网页了,目前现在还存在的,又一个叫蓝色理想的网站,使用table表格布局的,大家可以参考一下


二、Div+CSS

div+css是现在都比较常用的布局模式,把div作为一个盒模型,用css来做样式上的调整。

这种布局模式能够满足大多数网页的设计,也是现在前端开发工程师经常使用的布局模式;

但是如果想要让页面能够随着页面的变化而变化就不太能实现了


三、响应式布局

响应式布局,说白了就是一个页面,能够适应多个终端(PC,移动,平板,手机的横竖屏都能正常显示)


响应式布局可以给不同终端的用户提供更好的用户体验,而且现在大屏幕的移动设备越来越多,大家对响应式页面的体验也越来越好。


那响应式布局到底怎么做呢?其实很简单,响应式其实就是css3中新增加的一个知识点,通过Media Query(媒介查询)来设置让页面在不同的页面都能做到正常适配


这就是一个比较简单的响应式页面,在屏幕600到799之间的时候,背景颜色显示为绿色,内容宽度调整为500px


四、弹性盒子

弹性盒子也是css3中新增加的一种布局模式。


弹性盒子也是一种为了适配不同屏幕的一种布局模式,但是弹性盒子主要是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。


所以一般一个模块中水平方向上平分显示的时候会经常使用到弹性盒子


五、圣杯布局

圣杯布局也叫双飞翼布局,就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染


当屏幕水平方向上缩放的时候,左右两侧的内容固定不变,中间内容的宽度会随着屏幕的变化而变化


在网页布局中还有其他的布局模式,当然这些布局模式可以叠加选择,也可以单独使用。掌握更多的布局模式,能够让我们在做页面的时候有更多的选择,这样就能更快的作出,适合在不同屏幕都可以适配的页面了


相关内容
浅谈弹性布局在网站建设过程中的奇妙之处

熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果,今天洛壹网络简单为大家讲解一下CSS弹性布局的奇妙之处。

网站建设过程中,我们要了解域名的重要性和能为我们带来什么

在日常的网络建设过程中,还是有相当一部分的客户,不明白域名的重要性以及域名能为企业带来什么样的便利,那么今天洛壹网络就来解释一下,什么是域名?

带你揭开BFC神秘的面纱

想要了解BFC的规则,前提必须是熟悉前端网页的多种布局手段,例如盒的显示模式display,三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。今天洛壹网络来为大家解析一下BFC,希望对各位新老朋友有所帮助。

新手前端指南:一小时搞懂 CSS 属性应用

在 CSS 中,字体属性和文本属性是分开的,这是很容易搞混的东西。字体属性用的是 font 属性,而在 font 下还包含若干常用的属性

浮动布局时,中间出现一块空白

浮动布局时,中间出现一块空白

MYSQL数据库密码如何修改

1.mysql数据库密码如何修改: 1)关闭mysqld程序 a.net stop mysql57 b.任务管理器中结束进程

PHP设置登陆失效时间

PHP设置登陆失效时间,第一种方法即设置php.ini配置文件,设置session.gc_maxlifetime和session.cookie_lifetime节点属性值,当然也可以使用ini_set函数改变当前上下文环境的属性值:

SSL证书:_chain.crt _public.crt .pem .key crt合并pem

在APACHE+PHP环境里,只需要.pem 和 .key文件。所以需要把xxxxxxx_public.crt 和 xxxxxxx_chain.crt合并成一个.pem 文件。

我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器