web网页 页面布局的几种方式

转载 2017年06月16日 12:19:40
  • 2218

网页基本布局方式:

(1)流式布局 Fluid

流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素,但是流布局使用的是百分比,这位网页提供了很强的可塑性和流动性。换句话说,通过设置百分比,我们不需要考虑设备尺寸或者屏幕宽度大小了,可以为每种情形找到一种可行的方案,应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。

(2)固定布局 Fixed

在固定布局中,网页的宽度是必须指定为一个像素值,一般为960px。过去,开发人员发现960px是最适合作为网格布局的宽度,因为960可以整除3,4,5,6,8,10,12和15。在今天,在web开发中还是比较普遍使用固定宽度布局的,因为这种布局具有很强的稳定性与可控性。但是同时也有一些劣势,固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。

(3)弹性布局 Elastic

弹性布局跟流布局很像,主要不同是大小单位。弹性布局的大小单位不是像素或者百分比,而是em或者rem,避免了根据px局部在高分辨率下几乎无法辨识的缺点,又相对于%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,需要一段时间适应而且不易从其他布局转换过来。

(4)伸缩 Flex box

使用css3 Flex系列属性进行相对布局。对于富媒体和复杂排版的支持非常大,但是存在兼容性问题。

(5)响应式

使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备做好的体验。

web网页 页面布局的几种方式(转)的更多相关文章

  1. JSP错误页面处理的两种方式

    JSP错误页面处理的两种方式: 方法1(真能针对单一页面生效,不推荐): 出错页面实例 <%@ page language="java" contentType=" ...

  2. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  3. js关闭当前页面(窗口)的几种方式总结(转)

    js关闭当前页面(窗口)的几种方式总结     1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...

  4. 实现CSS等分布局的5种方式

    前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...

  5. 仿联想商城laravel实战---5、无刷新的增删改查(动态页面更新的三种方式(html))

    仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...

  6. MVC web api 返回JSON的几种方式,Newtonsoft.Json序列化日期时间去T的几种方式。

    原文链接:https://www.muhanxue.com/essays/2015/01/8623699.html MVC web api 返回JSON的几种方式 1.在WebApiConfig的Re ...

  7. html 指定页面字符集的两种方式

      1.html指定页面字符集的两种方式 方式一: <meta charset="utf-8"> 方式二: <meta http-equiv="Cont ...

  8. ASP.Net中页面传值的几种方式

    开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...

  9. web 文件上传的几种方式

    问题 文件上传在WEB开发中应用很广泛. 文件上传是指将本地图片.视频.音频等文件上传到服务器上,可以供其他用户浏览或下载的过程. 以下总结了常见的文件(图片)上传的方式和要点处理. 表单上传 这是传 ...

随机推荐

  1. 算法练习4---冒泡排序java版

    冒泡排序的基本思想:在要排序的一组数中,对当前还未排好序的范围内的全部数,自上而下对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即:每当两相邻的数比较后发现它们的排序与排序要求相反 ...

  2. hdu 1846 Brave Game(bash)

    Brave Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  3. MySql简单分页存储过程

    BEGIN DECLARE startIndex int; select COUNT(*) INTO RecordCount from test; SET startIndex = (PageInde ...

  4. cassandra 集群并发测试脚本

    prepare: create keyspace ycsb WITH REPLICATION = { }; USE ycsb; CREATE TABLE users ( firstname text, ...

  5. Hash Join 一定是选择小表作为驱动表吗

    原来自己也是一直认为oralce会选择小表作为驱动表,以前一直也没注意,今天看了落落大神的实验,才发现,oralce查询时不一定选择小表作为驱动表. 如果对大表增加了约束,大表也会作为驱动表. 实验见 ...

  6. 23 Python 面向对象

    面向过程 VS 面向对象 面向过程的程序设计的核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西. 优点是:极大的降低了写程序的复 ...

  7. 掌握sudo的使用

    “sudo”是Unix/Linux平台上的一个非常有用的工具,它允许系统管理员分配给普通用户一些合理的“权利”,让他们执行一些只有超级用户或其他 特许用户才能完成的任务,比如:运行一些像mount,h ...

  8. 关于nginx做代理,uwsgi gunicorn等服务器做后端时

    (1) 响应数据过大 被截断的问题 通常看buffers参数的设置(缓冲从后端服务器的应答) uwsgi的参数是 uwsgi_buffers 4 128k gunicorn 设置代理参数 proxy_ ...

  9. server2012/win8 卸载.net framework 4.5后 无法进入系统桌面故障解决【转】

    都重装过一次了,第二次被坑了,真的是痛苦的经历 只剩下的cmd什么命令都不能执行啊,powershell也执行不了呀[网上都是说powershell切换的] 故障:服务器装的是windows2012 ...

  10. JavaScript,Dom,jQuery

    JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript 语言的规则编写相应代码,浏览器可以解释出相应的处理. 注 ...