网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 推广营销 » 正文

页面布局的方式——前端

2019-8-7 12:53:54 | 作者:老铁SEO | 0个评论 | 人浏览

  经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

  在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多。在淘宝UED(User Experience Design)探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局。

  a、栏栅格系统:就是利用浮动实现的多栏布局,在bootstrap中用的非常多。

  b、多列布局:栅格系统并没有真正实现分栏效果(如word中的分栏),CSS3为了满足这个要求增加了多列布局模块。

  CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简称为Flex。

  Flexbox布局常用于设计比较复杂的页面,可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

  Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间,让你可以调节伸缩项目的相对大小和位置。例如,你可以确保伸缩容器中的多余空间平均分配多个伸缩项目,当然,如果你的伸缩容器没有足够大的空间放置伸缩项目时,浏览器会根据一定的比例减少伸缩项目的大小,使其不溢出伸缩容器。

  b、可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小;

  c、可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;

  f、可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

  瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。

  a、有效的降低了界面复杂度,节省了空间:我们不再需要臃肿复杂的页码导航链接或按钮了。

  b、对触屏设备来说,交互方式更符合直觉:在移动应用的交互环境当中,通过向上滑动进行滚屏的操作已经成为最基本的用户习惯,而且所需要的操作精准程度远远低于点击链接或按钮。

  c、更高的参与度:以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上,从而让他们更乐于沉浸在探索与浏览当中。

  例如,在电商网站当中,用户时常需要在商品列表与详情页面之间切换,这种情况下,传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。

  那些用来打造无限滚动的JS库虽然都自称很容易使用,但你总会需要在自己的产品中进行不同程度的定制化处理,以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐,你必须做好充分的测试与调整工作。

  最好考虑一下页脚对于你的网站,特别是用户的重要性;如果其中确实有比较重要的内容或链接,那么最好换一种更传统和稳妥的方式。

  千万不要耍弄你的用户,当他们一次次的浏览到页面底部,看到页脚,却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时,他们会变的越发愤怒。

  d、集中在一页当中动态加载数据,与一页一页的输出相比,究竟那种方式更利于SEO,这是你必须考虑的问题。对于某些以类型网站来说,在这方面进行冒险是很不划算的。

  其实站在用户的角度来看,这一点并非负面;不过,如果对于你的网站来说,通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略,那么单页无限滚动的方式对你并不适用。

  固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果,流式布局则不受窗口宽度影响,流式布局使用百分比宽度来限定布局元素,这样可以根据客户端分辨率的大小来进行合理的显示。

  响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

  响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

  一,静态布局(StaticLayout)在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置二,弹性布局(ElastcLa...博文来自:Sunday97的博客

  一、静态布局静态布局就是传统的网站形式,网页上的所有元素的尺寸一律使用px作为单位。1.布局特点不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布...博文来自:湮顾千古的博客

  一理解几种布局的概念1、静态布局(StaticLayout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;意思就是不管浏览器尺寸具体是多少...博文来自:刘玉刚

  现在已经很少有人提及,其实最早的页面布局是使用table布局的,那时候的网页设计师基本不会担心跑位的问题,...博文来自:dreamingbaobei3的博客

  前些日子无聊的时候学了下前端,说实话没有美感前端和搬砖没有区别,唯一值得一提的就是他的布局方法。我的这个方法用于写死网页,不含各种框架的自适应性功能,而且主要想记录一下思想。写前端不同于算法优化,算法...博文来自:Iguodala的博客

  武功山顶原文地址:→看过来写在前面由于知识有限,有的内容可能有点小错误什么的,仅供参考参考,欢迎大佬们指正,小花在这里谢过~小贴士(tofreshman):给每个块都加上颜色,更好辨识。关于代码:这里...博文来自:weixin_34378045的博客

  目前前端页面的设计主要分为pc端和移动端,针对不同的项目需要我们可能会采取不同的布局格式一,静态布局(staticlayout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特...博文来自:的博客

  一、静态布局(StaticLayout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站...博文来自:wy983948599的博客

  页面布局是前端面试中CSS部分经常考到的问题,本文列举几种简单页面布局的方法:绝对定位+marginfloatinline-blockflex附加:响应式布局其中几种方法在CSS代码上有相似之处,也有...博文来自:Nana_9457的博客

  题目:假设高度已知,请写出三栏布局,其中左栏,右栏宽度各为300px,中间自适应:1.浮动解决方案:2.绝对定位解决方案:3.flexbox解决方案:4.表格布局:5.网格布局:他们的优缺点分析:浮动...博文来自:ProswpuAlan的博客

  1、水平居中方法一:margin:0auto;是最常见的水平居中解决方案,但有其局限性:块级元素,已知宽度,父级元素有宽度方法二:text-align+inline-block在父级元素上设置text...博文来自:weixin_33871366的博客

  面试题之布局解决方案前端面试的时候关于布局方面总是会问这样一个问题—假设已知高度,完成三栏布局,两边栏,定宽,中间栏自适应宽度。这个问题总共有哪几种方案解决呢?...博文来自:simeng-han的博客

  页面布局是非常非常重要的内容,如果对布局的相关知识点掌握的不够好,在设计页面时将会出现一系列的问题。在本章的内容里,主要介绍浮动,绝对定位,相对定位,固定定位这四种定位。表格布局在下一章的内容中再来...博文来自:Allenyhy的博客

  常见的页面布局,左右自适应布局博文来自:wang839305939的博客

  目前针对web前端页面的设计主要分为pc端和移动端页面,针对不同的页面我们可能会采取不同的布局格式,在整个布局的选择上,没有一成不变的,也没有任何一种布局能够满足各个方面的需要,在众多的布局方式中,我...博文来自:gj1949的博客

  布局结构网页布局结构,通常分为三种:通栏多栏又分为:等分多栏与非等分多栏布局方式固定布局:使用像素(px)作为页面基本单位;弹性布局:使用百分比(%)作为页面基本单位;混合布局:使用像素(px)和百分...博文来自:ImagineCode 網誌

  前端就是给人看的界面,后台人员不仅要知道后台代码的编写,更要知道前端的布局。有时候要比前端人员知道的还要多,因为有可能前端人员是个21天精通ps的大师级人物。这时候你可以自己写前端。1.CSSCSS(...博文来自:lw_zhaoritian的博客

  1.关于Web页面动态布局的简单声明(1)此处介绍的动态布局类似于QQ空间或者Google首页的自定义页面(2)每个用户可以定制自己的页面,可以自由选择布局方式,自由选择模块 2.关于布局和模块的声...博文来自:影魔的专栏

  1浮动2绝对定位3Flexbox4表格布局5网格布局博文来自:邵阳肖敏的博客

  先说说三栏布局:整体高度已知,左右两边宽度固定,中间内容宽度自适应。总共是有五种实现方式,分别是:浮动解决方案、绝对定位解决方案、flexbox解决方案、table解决方案、网格布局解决方案。下面,上...博文来自:magi的博客

  布局我们可以把网页理解成是由一个个盒子排列组合而成的,那么盒子之间又是怎么排列布局的呢?网页常见的布局方式大概有五种:普通文档流布局、浮动布局(Float)、绝对布局(Absolute)、弹性布局(F...博文来自:suwu150

  1.固定布局 方法 里把加好,然后根据设计稿设定相应的宽度即可,其他地方类似于pc端。 优点 思路沿用pc端,上手比较快 缺点大屏手机显示网页比较宽,而固定布局宽度参照永远是固定的宽度(设计稿的大小)...博文来自:wy_Blog的博客

  前端布局方式汇总及概念浅析Jan122018更多文章参见: 前言又一个月没更博了,为了自己的第一...博文来自:廿四桥明月夜的博客

  这是由湖北大学一个大三女生,在强哥的指导下讲解的一个万年历的程序。涉及到的知识包括HTML,CSS,jQuery。万年历程序主要涉及到一些逻辑推理的知识,通过某个固定日期是星期几,来推导出某年某月的第一天是星期几,判断出当月一共有多少天,后将日期信息输出。讲解非常精彩,建议大家以听思路为主,然后自己根据讲解脉络去把案例做出来,一定会受益颇丰。

  欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~圣杯布局圣杯布局是一种三列布局,两边定宽,中间宽度自适应圣杯布局可以将整个tainer看做一个奖杯,div.left和di...博文来自:cpongo9的博客

  一、静态布局(StaticLayout)1.布局概念最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scro...博文来自:的博客

  前一段时间用了一下,现在说一下它的基本用法。首先就是引入axios,如果你使用es6,只需要在项目中安装axios模块//命令行安装npminstall--saveaxios//在所需要的组件中引入i...博文来自:夏婉轩的博客

  1、网页开发流程(整体——局部)1)分析各个模块,切图2)了解代码书写规范3)整体布局4)详细布局5)样式处理6)网页的优化和细节方面的处理2、如何开发网页1)div没有语义性,主要用于布局,独占一...博文来自:JesyWu的博客

  1. a标签与4个伪类:link选择所有未访问的链接(没有被点击过的链接); :visited选择已经被访问过的链接; :hover设置鼠标悬停时的链接样式 ;  :active选择所有激活的链接(正...博文来自:XJ5210224的博客

  1.通过img标签请求,实现局部刷新。实现方式向页面插入一个img标签,监听其加载,加载成功则表示请求成功,做出相应的处理;加载补充表示请求补充,也作出相应的处理。button.addEventLis...博文来自:fengfangyuan的博客

  1、前言本文主要介绍了实现页面布局的几种方法。以常见的左中右布局为例。2.代码实现公共样式部分out{margin-bottom:20px;...博文来自:weixin_33757609的博客

  一、静态布局(StaticLayout)即传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站...博文来自:优妮姐姐

  很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...博文来自:bingkingboy的博客

  前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什...博文来自:weixin_34378045的博客

  作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法。 1.什么是前端 简单来说,前端就是做网页(大神勿喷,本文一切从简) 2.论坛

  本文总结了个人在前端开发中经常遇到的布局问题,长期更新博文来自:fisher

  前端响应式布局前端网页布局分类♣固定宽度布局:以px为单位设置固定的宽度;♣流式布局:以百分比为单位设置相对布局;♣响应式布局:通过检测设备信息,决定网页的布局方式,一般情况下检测设备的宽度来实现(C...博文来自:的博客

  双飞翼布局一、什么是双飞翼布局双飞翼布局则是源于淘宝的UED,可以说是灵感来自于页面渲染。一起来看看淘宝的头部实现:就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。 二、HTML...博文来自:kaixinnijiutiaowu的博客

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:网页布局  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。