精华内容
下载资源
问答
  • 五种经典网页布局设计

    万次阅读 多人点赞 2018-03-04 16:56:42
    网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:...

    不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。

    在开始一个新的网页设计项目的时候,不知道你会不会有那么一瞬间的犹豫:“这个项目要从哪里着手呢?”伴随着这种犹豫的,是“做点前所未有的作品”的冲动。不过,很多时候,这些冲动和犹豫都在需求的磨合、设计的细化中,逐步淡化。相比大家也都发现了,网页布局在很多时候都是相似的,甚至可以说,有些布局模式是长盛不衰的。

    这些布局模式,或者说框架,几乎是“约定俗成”的,它们为用户所熟知,它们本身也更贴合用户对内容的识别模式和使用习惯。今天的文章,我们一同来聊聊五种拥有持久生命力的优秀网页布局,也许你的下一个网页设计项目可以直接从这五种布局模式入手,无需过多犹豫和纠结。

    1、顶部大图Banner+简单的栅格

    armando

    无论屏幕多大,这种布局都能够为用户展示充足的内容,供用户浏览和探索。虽然这种布局随着屏幕、设备而有所差异,有的设计师会倾向于设计成固定宽或者横跨整个页面的布局,但是总体的模式都大同小异。

    ·导航栏
    ·顶部大图,图片上叠有文字标题
    ·2~4个分栏,承载不同类别的信息,有的会有图标
    ·主要的内容区域
    ·页脚

    这种布局设计干净清爽,有足够强的视觉表现力,并且常常采用的响应式设计,断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用来帮你实现。

    rodesk

    原理:这种布局中,每个元素都各司其职,并且整个流程是富有逻辑的,顶部大图足以营造氛围,给予用户特定的体验,下面的次一级元素能够做的很好的支撑。

    相关趋势:越来越多这类网页开始采用色彩丰富的插画式的图标,而扁平化的设计和这种布局页面有着天然的契合。

    2、单页设计,单栏布局

    pop-up

    单页式设计这几年非常火,它非常适宜于展现极简的内容,或者专注呈现一个主题。当网站的主题集中,内容也比较固定的时候,无需复杂的布局来呈现,单页单列式的布局足以应付一切。

    ·导航
    ·主要内容区域,文字+图片为主
    ·页脚

    采用这种布局模式的时候,空间的控制至关重要,相当考验设计师设计留白和布局平衡的功力。元素和元素之间的疏密关系是需要设计师反复推敲的,如果空间控制不合理会给用户一种混乱的感觉,如果过于紧密则会产生局促感。

    原理:单页式设计适合于小网站或者小型项目的展示,它可以用来制造一个简单的介绍页面,让简单的内容显得不那么单调,强化内容的形式感和重量感。对于内容简单的博客网站而言,单页式设计也是不错的选择。

    相关趋势:和单页设计结合最紧密的应该是动效设计和视差滚动,他们可以让单页式设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。

    3、自定义栅格

    seb

    那些被整齐分割出来的网页布局从来都没有过时过。无论是分割得细碎的网页区域还是大块的页面区块,大多都需要借助一套干净整齐的栅格来支撑。在此基础上,内容按部就班地被置于不同的区块中,被精心地组织展示出来。

    在设计师的作品集页面中,你可以发现各种各样自定义的栅格布局。自定义栅格展示内容的优势在于,它可以同时呈现大量的视觉化的内容,看起来足够丰富又不会落于下乘。下面这个图库的效果看起来就相当震撼。

    在栅格中填充色彩,还可以用来承载文字内容。不同的区块之间不一定非要用线条进行分割,可供选择的方案有很多,不过千万要控制好栅格尺寸和间距。控制不好的细节,整个设计的平衡感可能会被破坏。

    原理:栅格的优势在于它的组织性,对于用户而言,它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容,在视觉上也更加协调自然。

    相关趋势:栅格很容易被人视为卡片这样的元素,可以为其加入翻转等各式各样的动效,呈现出更多的信息和视觉层次。

    4、经典的F式布局

    motive

    研究表明,用户在浏览网页的时候,习惯于沿着F式的阅读轨迹来浏览信息,也就是说,用户喜欢从左到右阅读,然后向下移动,再继续从左到右阅读。

    这种F式的阅读模式对应的网页布局就是F式布局,最关键的信息靠左显示,从上到下尽量保持在一条线上。

    ·页头和导航
    ·靠左的一栏相对较宽,展示主要的内容
    ·靠右常为侧边栏,展示相关链接等内容
    ·页脚

    原理:人的行为很容易受到习惯的影响,而研究也证实了人思考、行为确实是模式化的。从左到右,自上而下,人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性,便于用户理解和交互。

    相关趋势:F式布局中侧边玩法很多,有的设计师会将导航与之结合,或者在页面顶部加上大图Banner。

    5、极简分层

    berkeley

    极简化的设计一直都在流行,它的流行不是没有原因的。开放式的空间让用户感觉更加轻松,也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层,可以让信息更有层次,也使得极简的页面拥有了细节。

    这种设计并不复杂,但是让页面更加有趣了,它可以适配更多不同类型的项目了。这也解释了为什么用户如此的喜爱类似Apple 官网这样的设计。

    apple

    原理:极简化的页面中加入简单的几个分层,让页面有了视觉焦点,尤其是当设计者想要引导用户关注到某个关键的内容的时候,这种页面布局很很容易实现这一点。

    相关趋势:微妙的阴影和渐变常常被用在这样的页面当中,强化元素之间的层次感。虽然这些设计手法一度“过时”,但是现在大有卷土重来之势,而Material Design 这样的设计风格就是它们的冲锋号。

    结语

    许多设计手法、设计趋势都常常会被人质疑,但是如果撇开情感因素,从最基本的设计原理上来推导这些趋势的时候,能够从根本上判读这些设计手法是否真的是有价值的。

    今天所谈及的这些布局是经过时间洗炼的经典设计,挑选合适的设计趋势同这些布局结合起来,常常能够带来不错的效果。

    展开全文
  • 教程名称:DIV CSS网页布局源码实例集锦课程目录:【】27款后台管理页面设计 DIV CSS【】29款DIV CSS导航菜单源码实例【】6个js Css div html超漂亮新闻幻灯片特效源码【】DIV CSS网页布局商业案例精粹(源代码)...
  • 前端网页 (页面布局) 教程

    千次阅读 2020-09-18 17:17:54
    页面布局 一.盒模型: 1.所谓盒模型,就是浏览器为页面中的每个HTML元素(标签)生成的矩形盒子。这些盒子们都要按照可见 板式模型在页面上排布。可见的板式模型主要由三个属性控制: (1)position属性:position属性...

    页面布局
    一.盒模型:
    1.所谓盒模型,就是浏览器为页面中的每个HTML元素(标签)生成的矩形盒子。这些盒子们都要按照可见 板式模型在页面上排布。可见的板式模型主要由三个属性控制:
    (1)position属性:position属性控制页面上元素间的位置关系。
    (2)display属性:display属性控制元素是堆叠、并排或者不在页面上显示。
    (3)float属性:float属性提供控制的方法,以便于把元素组成成多栏布局。
    2.所谓的盒模型,顾名思义就是盒子,这个盒子叫盒模型,也叫元素,也可以叫标签。
    3.那么盒子的作用呢,肯定是用来装东西的,代码盒子可以装图片,装字,装链接,还有就是可往盒子 里面装盒子。
    4.我们看一下一个网页是如何用盒子堆起来的。这张图片是一个已完成的网页(这只是一部分)。
    在这里插入图片描述

    注意:如有侵权,请联系删除,谢谢!
    5.上面的网页就是由各个盒子堆起来的,下面这张图对盒子做了简易的划分。
    在这里插入图片描述

    6.不管多难多简单的页面都是由一个个大小不一的盒子堆叠而成。我觉得我划分得还是可以的。要是每个盒子堆得好看,就要用到上面所说的三大属性了position(定位),display(指定生成的框类型),
    Float(浮动)。

    二.向页面添加一个盒子(元素)
    1.HTML中有非常多的元素,最常用的就是div元素,也就是div标签。
    2.在之前的创建好的HTML文件中添加一个div元素(盒子)。
    3.我使用的编程工具是Adobe Dreamweaver CC 2019

    代码:
    <!doctype html>

    演示
    我是一个div盒子

    图示:
    在这里插入图片描述

    效果:
    在这里插入图片描述

    3.接下来给这个盒子设置一下大小和加一个边框。
    代码:
    <!doctype html>

    演示
    我是一个div盒子

    图示:

    在这里插入图片描述

    效果:在这里插入图片描述

    这样子就把盒子的长度,高度,边框 给设置好了。是不是感觉非常简单呢!
    属性说明:
    (1)width:指定元素的长度,单位为:px(像素)或 %(百分比)
    (2)Height:指定元素的高度,单位为:px(像素)或 %(百分比)
    (3)Border:指定元素的边框:2px(边框的大小),单位为:px(像素)
    solid (指定边框为实线)
    #FF6C6E (颜色值)

    4.我们再给元素加上背景图片

    代码:
    <!doctype html>

    演示
    我是一个div盒子

    图示:
    在这里插入图片描述

    效果:
    在这里插入图片描述

    这里我调整了元素的大小,为了让背景图片显示得跟和谐。
    属性说明:
    (1)background-image:设置元素的背景图片,Url指的是图片的路径
    (2)background-size: 规定背景图片的尺寸,cover(让图片始终占满整个背景)

    注意:写完每个属性后必须加一个英文状态的:分号,分号的作用是将每个属性分开,代码里的符号都是英文状态的哦,这是一种规范。所以好习惯要养成。

    展开全文
  • 以html语言为基础,围绕最新的css技术精髓展开深入讲解,包括认识网站开发、网页文字和图片、超链接、表格、多媒体、滚动字幕、列表、表单、框架、设置文本样式、设置网页背景样式、设置边框边距、元素布局网页...
  • 实现效果: jQuery网页全屏自适应图片瀑布流布局代码,能够自适应网页的大小,这样的效果还是很酷炫的,在项目中,需要用到瀑布流,还是用自适应的会更佳,php中文网推荐下载!
  • 许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解...
  • 相关文章:用CSS建设网站的实例原文博客:veerle翻译整理:西米CC来自国外博客veerle的一个系列教程,分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细,但是其中提及的很多技巧和经验...
  • 制作网页常用布局

    千次阅读 2019-10-25 19:57:22
    网页布局就是以最合适浏览器的方式将图片和文字排放在页面的不同位置。网页需要在各种尺寸的浏览器进行显示,包括手机、平板电脑等,这时候网页布局就会显得十分重要。下面为您介绍几种网页布局的几种常用方式。 1...

    网页布局就是以最合适浏览器的方式将图片和文字排放在页面的不同位置。网页需要在各种尺寸的浏览器进行显示,包括手机、平板电脑等,这时候网页的布局就会显得十分重要。下面为您介绍几种网页布局的几种常用方式。

    1.固定布局:指定网页的宽度为固定值进行布局
    使用固定布局时,首先要规定网页的宽度(如1200px等),其次还要知道固定宽度布局将处于浏览器窗口的位置,默认情况下会在浏览器左侧,多余的空白在浏览器中间。
    这里需要提醒一点:现在很多网页布局都是使用1000px或者以下的主要原因是为了兼容分辨率为1024x768的显示器。
    下面是该布局的代码实现:
    HTML部分代码:

     <body>
            <div class="container1">头部盒子</div>
            <div class="container2">
                <div class="left">左侧盒子</div>
                <div class="right">右侧盒子</div>
            </div>
            <div class="clearboth"></div><!--空盒子不放任何内容用于清除上面盒子的浮动效果-->
            <div class="container3">底部盒子</div>
        </body>
    

    CSS部分代码:

    <style>
                .container1,.container2,.container3{
                    width:1000px;
                    margin: 0 auto;/*让盒子居中*/
                }
                .container1{
                    height:200px;
                    margin-bottom: 10px;
                    background-color: yellow;
                }
                .left{
                    width:200px;
                    height:500px;
                    background-color: violet;
                    float:left;
                }
                .right{
                    width:780px;
                    height:500px;
                    margin-left:20px;
                    background-color:turquoise;
                    float:right;
                }
                .clearboth{
                    margin:0px;
                    padding:0px;
                    border:0px;
                    clear:both;
                }
                .container3{
                    margin-top:10px;
                    background-color: tomato;
                    height:200px
                }
            </style>
    

    下面是效果图:在这里插入图片描述
    这里还是想要提醒一下关于盒子宽度的问题,盒子的宽度有两种:1.特定盒子的尺寸(也就是设置了宽度width的盒子)会随padding、margin、border的添加而扩展,进而占据更多的水平空间。事实上,通过width设置的只是内容的宽度而不是盒子本身的宽度,所以在设置左边盒子和右边盒子的时候要考虑增加margin等会不会超出盒子宽度,如果我上面margin设置的是30px 那么右边的盒子将会被挤下去,这点要特别注意。2.无尺寸限制的盒子(没有设置width的盒子)则会扩展到与它的包含元素同宽,即,无尺寸的盒子增加margin、padding、border时会导致内容的宽度变化。所以在设置盒子宽度时大家需考虑到这点,以免写出的代码与自己想要的效果不一致。

    2.流式布局:布局可随浏览器窗口进行放缩
    在流式布局中,网页中的网页区域允许变宽或变窄,从而填充浏览器窗口中可用的空间,不会控制内容的宽度,文本允许按照需要重新流动。其主要技术分为两点:一、通常使用百分比值设置宽度或者把宽度设置为自动。二、网页宽度一般都不固定,让人感觉页面有一种伸缩性。
    下面是该布局的代码实现部分:
    HTML部分代码:

     <body>
            <div class="container1">头部盒子</div>
            <div class="container2">
                <div class="left">左侧盒子</div>
                <div class="right">右侧盒子</div>
            </div>
            <div class="clearboth"></div><!--空盒子不放任何内容用于清除上面盒子的浮动效果-->
            <div class="container3">底部盒子</div>
        </body>
    

    CSS部分代码:

    <style>
                .container1,.container2,.container3{
                    width:80%;/*百分比宽度为80%,是占其父容器的80%,其父容器为body*/
                    margin: 0 auto;/*让盒子居中*/
                    min-width: 500px;
                }
                .container1{
                    height:200px;
                    margin-bottom: 10px;
                    background-color: yellow;
                }
                .left{
                    width:30%;/*百分比宽度为30%,占据父容器的30%,其父容器为container2*/
                    height:500px;
                    background-color: violet;
                    float:left;
                }
                .right{
                    width:66%;/*百分比宽度为66%,占据父容器的66%,其父容器为container2*/
                    height:500px;
                    margin-left:20px;
                    background-color:turquoise;
                    float:right;
                }
                .clearboth{
                    margin:0px;
                    padding:0px;
                    border:0px;
                    clear:both;
                }
                .container3{
                    margin-top:10px;
                    background-color: tomato;
                    height:200px
                }
            </style>
    

    下面是效果图:
    首先是浏览器没有缩放时的效果图:
    在这里插入图片描述
    其次是浏览器放缩后的效果图:
    在这里插入图片描述
    从上面两张效果图可以看到不管浏览器是否放缩,它里面的盒子也会跟着放缩。这里也做几点提醒:1.流式布局需要特别注意的是容器的百分比是以父元素为基准进行计算的。2.流失布局的内容元素通常不设置高度,内容会根据宽度的变化调整,高度会自动随之变化。3.由于没有设置高度,所以有时难免出现参差不齐的现象,这时候可以通过设置最小宽度或最大宽度等方式进行适当的控制。

    3.弹性布局:用来为盒子模型提供最大灵活性的一种布局
    采用flex布局的元素称为flex容器简称容器,它的所有子元素自动生成为容器的成员,称为flex项目,简称项目。这个容器有两个轴,一个水平主轴一个垂直交叉轴,起点终点都是容器的边界。
    在这里插入图片描述
    这里分别介绍容器和项目的几个属性:
    一、容器的属性:
    1.flex-direction(决定主轴方向的属性):row、row-reverse、column、column-reverse
    2.flex-wrap(决定换行方式的属性):nowrap、wrap、wrap-reverse
    3.flex-flow(是前两个属性的简写形式)
    4.justify-content(决定项目在主轴上的对其方式的属性):flex-start、flex-end、center、space-between、space-around
    5.align-items(决定项目在交叉轴上对其方式的属性):flex-start、flex-end、center、baseline、stretch
    6.align-content(决定多根轴线对其方式的属性):flex-start、flex-end、center、space-between、space-around
    二、项目是属性:
    1.order(定义项目的排列顺序的属性)
    2.flex-grow(定义项目放大比例的属性)
    3.flex-shrink(定义项目缩小比例的属性)
    4.flex-basis(定义在分配空间之前,项目占据主轴空间的属性)
    5.flex:前三个属性的简写默认值为:0 1 auto
    6.align-self(定义允许某个项目可以与其他项目不一样的对其方式,可覆盖align-items属性)
    三、下面应用这些属性来加深一下理解:
    HTML和CSS部分代码:

    <body>
            <div class="container1">
                <div class="container11">盒子一</div>
                <div class="container12">盒子二</div>
                <div class="container13">盒子三</div>
                <div class="container14">盒子四</div>
                <div class="container15">盒子五</div>
                <div class="container16">盒子六</div>
                <div class="container17">盒子七</div>
            </div>
        </body>
    
    .container11,.container12,.container13,.container14,.container15,.container16,.container17{
                    width:150px;/*这里统一设置进而容器的宽度高度外边距*/
                    margin:10px;
                    height:50px;
                }
                .container11{
                    background-color: lightcoral;
                }
                .container12{
                    background-color: lightgreen;
                }
                .container13{
                    background-color: lightsalmon;
                }
                .container14{
                    background-color: hsl(44, 84%, 51%);
                }
                .container15{
                    background-color: #a83204;
                }
                .container16{
                    background-color: #34680a;
                }
                .container17{
                    background-color: mediumslateblue;
                }
    

    这里注意一下,容器中要设置display:flex;属性

    .container1{
                    display:flex;
                    background-color: lightslategrey;
                }
    

    1.flex-direction举例:

    .container1{
                    display:flex;
                    background-color: lightslategrey;
                    flex-direction:column; /*以列显示*/
                }
    

    效果图:
    在这里插入图片描述2.flex-wrap举例

    .container1{
                    display:flex;
                    background-color: lightslategrey;
                    flex-direction:row-reverse; /*反向按行排列*/
                    flex-wrap:wrap;/*换行*/
                }
    

    效果图:
    在这里插入图片描述
    随着浏览器窗口的缩小,如果一行排列不下会换到下一行。

    3…justify-content举例

    .container1{
                    display:flex;
                    background-color: lightslategrey;
                    flex-direction:row-reverse; /*反向按行排列*/
                    justify-content:space-between;/*两端对齐,项目之间的间隔都相等*/
                }
    

    效果图:
    在这里插入图片描述
    这里需要提醒的一点是,需要注意一下是否设置容器高度,如果没有设置那么容器高度会随内容的增加而改变,在介绍这些属性时,我都没有设置容器的高度,但是当里面的项目是以列排列的话,容器会相应变宽。这里大概列举了三个容器的属性值来说明flex布局,其他属性大家可以下来自己进行尝试。

    总结一下:
    对于上面介绍的三种页面布局方式根据各自所需进行选择,这里比较推荐使用流失布局和弹性布局,流失布局在使用 的时候根据浏览器缩小整个布局不会发生变化,而弹性布局是CSS3引用的一种比较方便简单的布局方式,使用弹性布局会比使用float、position来布局显得方便。

    展开全文
  • CSS高级技巧:网页布局

    2020-12-09 18:36:43
    上一篇CSS教程 文章:CSS高级技巧:文字环绕图片 布局 CSS至关重要的作用, CSS的设计初衷. CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用...
  • 网页布局的分类

    千次阅读 2018-10-29 14:53:27
    布局特点:不管浏览器具体尺寸是多少,网页布局始终按照最初写代码时候的布局来显示。常规的pc的网站都是静态的(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度,就会出现滚动条,如果大于这...

    一、静态布局(Static Layout)

    即传统web设计,网页上的所有元素的尺寸一律使用px作为单位。

    1. 布局特点:不管浏览器具体尺寸是多少,网页布局始终按照最初写代码时候的布局来显示。常规的pc的网站都是静态的(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度,就会出现滚动条,如果大于这个宽度,则内容居中外加背景,这种设计常见于pc端。
    2. 设计方法:
      • pc:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮挡的部分;
      • 移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.
      • 在移动端开发中采用静态布局的两种方式:流布局与响应式网页设计有什么区别?
        • 在viewport meta标签上设置width=320,页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放,从而刚好占满整个屏幕。
        • 设在viewport meta标签上设置content"width=640,user-scalable=no,页面的各个元素也采用px作为单位。由于640px超出了手机宽度,浏览器会自动缩小页面至刚好全屏。
    • 优点:这种布局方式对设计师和CSS编写者来说都是最简单的,亦没有兼容性问题。
    • 缺点:显而易见,即不能根据用户的屏幕尺寸做出不同的表现。
    • 当前,大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。这种方法不是一种完全兼容未来网页的制作方法,我们需要一些适应未知设备的方法。

    二、流式布局(Liquid Layout)

    流式布局(Liquid)的特点(也叫"Fluid")是页面元素的宽度按照屏幕分辨率进行适配的调整,但整体布局不变。代表作栅栏系统(网络系统)。
    网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。

    • 布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】
    • 设计方法:使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域(viewport)和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围,以免过大或过小影响阅读。
      这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺寸跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即:这些东西无法变得“流式”),显示非常不协调。

    三、自适应布局(Adaptive Layout)

    自适应布局的特点是分别为不同的屏幕分辨率定义布局,即:**创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。**改变屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以吧自适应布局看作是静态布局的一个系列。

    • 布局特点:屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化。
    • 设计方法:使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。

    四、响应式布局(Responsive Layout)

    随着CSS3出现了,媒体查询技术,又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的web浏览器等等)都能显示出令人满意的效果,对CSS编写者而言,在实现上不拘泥于具体手法,但通常是糅合了流式布局+弹性布局,再搭配媒体查询技术使用。分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即:**页面元素宽度随着窗口调整而自动适配。**即:创建多个流式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
    响应式布局几乎已经成为优秀页面布局的标准。

    • 布局特点:每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
    • 设计方法:媒体查询+流式布局。通常使用#media媒体查询和网格系统(Grid System)配合相对布局单位进行布局,实际上就是综合响应式、流动等上述技术通过CSS给单一网页不同设备返回不同样式的技术统称。
    • 优点:适应pc和移动端,如果有足够的耐心,效果完美
    • 缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。
      响应式页面在头部会加上这一段代码:
    <meta name="applicable-device" content="pc,mobile">
    <meta http-equiv="Cache-Control" content="no-transform ">
    

    总结:

    响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度;不同点是响应式的模板在不同设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式。流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方向水流一样,一部分一部分的加载,静态的就是采用固定宽度的了。
    流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少);响应式是用于解决不同设备之间不同分辨率之间的兼容问题(一般是pc、平板、手机等设备之间较大的分辨率差异)。
    如何实现响应式布局:应运而生的web页面响应式布局

    五、弹性布局(rem/em布局)

    1、rem,em区别:rem,em都是顺应不同网页字体大小展现而产生的。其中,em是相对其父元素,在实际应用中相对而言会带来很多不便;而rem是始终相对于html大小,即页面根元素。

    2、使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,因为em是相对父级元素的原因没有得到推广。【中国站点制作网页的时候,习惯用CSS强制定义字体大小,保证每个人都看到一致的效果,包括网易、搜狐这些门户网站在内的大部分站点,用的都是绝对单位px(像素)。但是,如果从网站易用性方面考虑,字体大小应该是可变的,一些视力不是那么好的人需要放大字体才能看得清页面内容。然而,占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性,相当一部分外国站点已经使用em作为字体单位。】
    3、这类布局的特点是,包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。

    4、浏览器的默认字体高度一般为16px,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。

    Set body font-size to 62.5% for Easier em Conversion:
    If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).
    那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢?

    因为有些浏览器默认的不是16px,或者用户修改了浏览器默认的字体大小(因浏览器分辨率大小,视力,习惯等因素)。如果我们将其设置为10px,一定会影响在这些浏览器上的效果,所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

    html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
    body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
    h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
    

    实际项目设置成 font-size: 62.5%可能会出现问题,因为chrome不支持小于12px的字体,计算小于12px的时候,会默认取12px去计算,导致chrome的em/rem计算不准确。

    针对这个现象,可以尝试设置html字体为100px,body 修正为16px,这样 0.1rem 就是 10px,而body的字体仍然是默认大小,不影响未设置大小的元素的默认字体的大小。

    5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。例如:p{ text-indent: 2em; }

    6、使用rem单位的弹性布局在移动端也很受欢迎。
    工具ViewtoREM:PX转换到REM(自动预处理)
    rem的定义:font size of the root element,rem是相对于根元素来设置字体大小的,这就意味着,我们只需要根据自己的需求在根元素确定一个参考值。
    rem与em、px的区别:
    px:像素,比较精确的单位,但不好做响应式布局
    em:以父节点font-size大小为参考点,标准不统一,容易造成混乱
    REM支持的浏览器:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

    对于不同尺寸的屏幕,可以统一假设屏幕宽度为640px后编写CSS(当然你也可以假定统一为320px)。此时,我们设定html元素的font-size为40px(同样,只是举例),然后各处(元素尺寸、文字大小)使用rem作为单位,随后搭配媒体查询或JS,根据屏幕的大小来动态控制html元素的font-size(特定屏幕尺寸下,html元素的font-size应当设置为何值,是使用这个方案时设计师和程序员需要反复考虑后确定的,以下试举一段相关的CSS媒体查询代码),即可自动改变所有用rem定义尺寸的元素的大小(且CSS编写者在脑中进行换算的计算过程比em简单得多)。

    html {
        font-size : 20px;
    }
    @media only screen and (min-width: 401px){
        html {
            font-size: 25px !important;
        }
    }
    @media only screen and (min-width: 428px){
        html {
            font-size: 26.75px !important;
        }
    }
    @media only screen and (min-width: 481px){
        html {
            font-size: 30px !important; 
        }
    }
    @media only screen and (min-width: 569px){
        html {
            font-size: 35px !important; 
        }
    }
    @media only screen and (min-width: 641px){
        html {
            font-size: 40px !important; 
        }
    }
    

    其实在移动端使用所谓的弹性布局,是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于(根据屏幕尺寸)调整页面的各元素的尺寸、文字大小时比较好用。其实,使用vm、vh等后起之秀的单位,可以实现完美的流式布局(高度和文字大小都可以变得“流式”),弹性布局就不再必要了。
    优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应。

    缺点:这种rem+js只不过是宽度自适应,高度没有做到自适应,一些对高度,或者元素间距要求比较高的设计,则这种布局没有太大的意义。如果只是宽度自适应,更推荐响应式设计。

    响应式和弹性布局之间的对比:

    响应式布局:改变浏览器宽度,“布局”会随之变化,不是一成不变的,例如导航栏在大屏幕下是横排,在小屏幕下是竖排,在超小屏幕下隐藏为菜单,也就是说如果有足够的耐心,在每一种屏幕下都应该有合理的布局,完美的效果。

    rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。

    结论:

    1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
    2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
    3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

    转自:静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    展开全文
  • (虽然感觉很2,没有哪个UI设计师会这样设计一个网页。但是觉得这种排版好有趣哦~) 答案就是,用动态div啦~ 把文字分成4块,环绕着图片图片的大小和div的大小事先规定。再用js来计算每个div里显示多少文字。 这样...
  • Flex是一种弹性盒子,属于CSS3的一种新的布局模式。它相较于我们之前介绍的布局方法更高级、更有效、更好用。现在主流的浏览器对Flex都有较好的支持,可以放心用。学会了flex在以后的布局中,会节省很多时间。
  • 最近项目中需要处理与图片相关的布局,不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果,你就...
  • CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
  • 网页排版与布局

    千次阅读 2019-10-06 15:47:02
    一 网站的层次结构 制作便于浏览页面的一个大敌就是视觉干扰,它包含两类: a,混乱页面主次不清,所有东西都引人注目 b,背景干扰 1.把页面分割成清晰明确的不同区域很...二 网页布局形式 整个页面可以分为几个部分,...
  • 前言 说到九宫格是不是想到了九宫格火锅那...上图是一个九宫格示意图,现在我们把它想象到一个网页中(想象不到就看上图图片~~),在网页中这个布局由最外层绿色的大的div标签包裹,在绿色的div标签中有许多蓝色的小的di
  • <title>jQuery倾斜分割布局幻灯片切换特效</title> <link rel="stylesheet" type="text/css" href="css/... 这是一款非常有创意滑动鼠标滚轮控制切换的jQuery CSS3网页倾斜分割布局幻灯片切换特效。
  • 4.若系统为win7或vista,或者web浏览器不是IE,使用下面的方法使用该工具,首先复制要转PDF网页的网址,然后运行html2pdf.exe,html2pdf.exe会自动读取剪切板中的网址,开始进行转换,转换后的文档保存在...
  • HTML网页布局实例

    千次阅读 2018-08-25 14:07:59
    在没有学习div之前,网页布局是件非常麻烦的事情,由于缺乏足够多的规则对网页的内容进行组织,因此,显得十分麻烦。而div便是为网页布局而生。div最大的特点便是可以进行任意的嵌套,并且嵌套的div之间互相独立,...
  • 网页布局

    千次阅读 2016-07-30 23:37:05
    一、新式布局案例1、垂直分割布局2、块状分割布局3、单屏布局二、网页布局的结构类型 T型布局 这是一个形象的说法,是指页面的定不是“网站标志+广告条”,左面是主菜单,右面是主要内容。这种布局的优点是页面...
  • <link rel="stylesheet" type="text/css" href="css/default.css?3.1.64"> <link rel="stylesheet" type="text/... 这是一款非常有创意滑动鼠标滚轮控制切换的jQuery CSS3网页倾斜分割布局幻灯片切换特效。
  • 网页框架与布局

    千次阅读 多人点赞 2016-10-17 18:51:56
    1、网页框架与布局 从我们的需求以及美观方面,现在于网页布局上考虑的就是以下几点: (1)视觉框架 固定的模版,相同的布局框架,标志性的醒目信息栏 (2)面板规划 用可移动或收起的面板显示大量信息 (3)...
  • 通过学院展示网站介绍目前流行的flex布局技术、float浮动技术以及postion定位技术以及使用jq库实现图片轮播放大等效果。压缩包里面包括ppt、案例、项目源码等资料齐全。可用于简单的网页制作课程答辩等
  • 自适应网页(响应式布局)+弹性布局

    万次阅读 2017-06-11 19:19:50
    1.自适应网页 1.声明viewport元标签 注:width=device-width 让宽度为设备宽度  initial-scale=1 设置初始缩放比例  user-scalable=no 设置用户是否可以手动缩放 2.使用流式布局  实现方案:float:left ...
  • 固定布局: 以px来设置宽度! 流式布局: 以百分比来设置宽度!在宽度较小时,行宽会变得非常窄且难阅读。因此我们要给它添加以px或者em为单位的min-width,从而防止布局变得太窄! 弹性布局: 相对于字号...
  • PHP div+css实现的网页上中下简单布局
  • jQuery网页全屏自适应图片瀑布流布局代码
  • 这是一款非常有创意滑动鼠标滚轮控制切换的jQuery+CSS3网页倾斜分割布局幻灯片切换特效。
  • 网页布局是指网页整体的布局,虽然网页的内容是很重要额,但是如果网页布局很乱,用户看起来也会感觉很不舒服。当用户打开一个网页时,第一印象就是网页漂不漂亮,然后才会去看网页内容。 网页大小 设计网页的第一步,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,392
精华内容 36,156
关键字:

网页图片布局