web网页 页面布局的几种方式(转)
web网页 页面布局的几种方式
- 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网页 页面布局的几种方式(转)的更多相关文章
- JSP错误页面处理的两种方式
JSP错误页面处理的两种方式: 方法1(真能针对单一页面生效,不推荐): 出错页面实例 <%@ page language="java" contentType=" ...
- 实现CSS等分布局的4种方式
× 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...
- js关闭当前页面(窗口)的几种方式总结(转)
js关闭当前页面(窗口)的几种方式总结 1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...
- 实现CSS等分布局的5种方式
前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...
- 仿联想商城laravel实战---5、无刷新的增删改查(动态页面更新的三种方式(html))
仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...
- MVC web api 返回JSON的几种方式,Newtonsoft.Json序列化日期时间去T的几种方式。
原文链接:https://www.muhanxue.com/essays/2015/01/8623699.html MVC web api 返回JSON的几种方式 1.在WebApiConfig的Re ...
- html 指定页面字符集的两种方式
1.html指定页面字符集的两种方式 方式一: <meta charset="utf-8"> 方式二: <meta http-equiv="Cont ...
- ASP.Net中页面传值的几种方式
开篇概述 对于任何一个初学者来说,页面之间传值可谓是必经之路,却又是他们的难点.其实,对大部分高手来说,未必不是难点. 回想2016年面试的将近300人中,有实习生,有应届毕业生,有1-3年经验的,有 ...
- web 文件上传的几种方式
问题 文件上传在WEB开发中应用很广泛. 文件上传是指将本地图片.视频.音频等文件上传到服务器上,可以供其他用户浏览或下载的过程. 以下总结了常见的文件(图片)上传的方式和要点处理. 表单上传 这是传 ...
随机推荐
- 《Advanced Bash-scripting Guide》学习(九):备份最后一天所有修改的文件
本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者 杨春敏 黄毅 Example 3-4. 备份最后一天所有修改的文件 #!/bin/bash # ...
- coco2d-js 节点的属性和动作
记录一些coco简单的属性和动作,位置,锚点,透明度,大小,移动等 /*属性*/ if(!true){ var sprite1 = new cc.Sprite(res.Sp1); var sprite ...
- InnoDB参数详解
1.查询5.5版本的InnoDB参数并注释:[root@localhost etc]# grep -i innodb my.cnf; t_innodb; otherwise, slaves may d ...
- 《Javascript高级程序设计》阅读记录(七):第七章
<Javascript高级程序设计>中,2-7章中已经涵盖了大部分精华内容,所以摘录到博客中,方便随时回忆.本系列基本完成,之后的章节,可能看情况进行摘录. 这个系列以往文字地址: < ...
- [SP16549]QTREE6
luogu vjudge 题意 给你一棵n个点的树,编号1~n.每个点可以是黑色,可以是白色.初始时所有点都是黑色.支持两种操作: 0 u:询问有多少个节点v满足路径u到v上所有节点(包括)都拥有相同 ...
- IntellJ IDEA快捷键汇总
今天开始使用IDEA,各种不习惯,一会Eclipse一会IDEA来回切换,需要一个熟悉的过程,记录一下常用的快捷键. IDEA常用快捷键 Alt+回车 导入包,自动修正Ctrl+N 查找类Ctrl+ ...
- keepalived之 Keepalived 原理(定义、VRRP 协议、VRRP 工作机制)
1.Keepalived 定义 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以利用其来避免单点故障.一个LVS服务会有2台服务器运行Keepalived,一台为主服务器 ...
- js性能优化文章集锦
总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/ ...
- 最终还是选择了markdownpad2
markdownpad2使用 最终 哈哈,最后还是选择了markdownpad2,经过探索才知道这个玩意多么好用. 点击,下载. 碰到的问题 1.win10出现HTML无法渲染得对话框 结果是,官网有 ...
- Linux测试程序 - 多线程
#include <sched.h> #include <pthread.h> main(){ pthread_t id0, id1, id2; ret=pthread_cre ...