精华内容
下载资源
问答
  • 前端7大常用布局方式

    千次阅读 多人点赞 2019-10-21 16:35:51
    Web前端常用布局方式 页面的布局方式是块状元素依次从上至下、从左至右进行布局 布局的作用 对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。 适用性 ,根据不同行业情况进行不同...

    Web前端常用布局方式

    页面的布局方式是块状元素依次从上至下、从左至右进行布局

    布局的作用

    对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心,能吸引潜在的合作者。

    1. 适用性 ,根据不同行业情况进行不同效果的制作。
    2. 吸引性,视觉效果优秀的布局效果能瞬间吸引客户。

    布局方式

    一、静态布局

    静态布局是最为原始的布局方式,没有什么技术性可言,往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。

    .bor{
    	width: 360px;
    	height: 255px;
    	border: 1px solid black;
    	margin-bottom: 30px;
    }
    .bor p{
    	color: #000000;
    	font-size: 16px;
    }
    .border-pic{
    	width: 360px;
    	height: 255px;
    	margin-left: 10px;
    	margin-top: 10px;
    	overflow: hidden;
    }
    .border-pic img{
    	width: 360px;
    	height: 255px;
    }
    

    布局特点: 页面上的布局是按最初写代码时候的布局方式进行布局的,常规的pc网站是进行设置了宽度值进行布局的,不会随着pc端的屏幕的大小而变化。
    优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的,最让人容易以接受、学习的,没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上,这些官网的设备的尺寸是固定的,这种布局方式往往是最简单的方法。
    缺点: 不会随着pc端的屏幕大小而变化。

    二、弹性布局(flexbox)

    弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是,使用em或rem单位(lem=16px,1rem=10px)进行相对布局,相对使用百分比更加方便、灵活,相应同时支持浏览器的字体大小调整和缩放的等正常显示。
    优点:
    1.适应性强,在做多种不同的屏幕分辨率不同的界面是非常使用。
    2.随意按照宽度、比例划分元素的宽高。
    3.可以轻松的改变元素的显示顺序。
    4.网页布局实现快捷,维护起来更加容易。
    如果做移动端时,如果客户对细微的之处的要求不高,使用弹性布局进行制作是最好的选择,一份css+一份js调节font-size搞定。
    缺点: 浏览器兼容性较差,只能兼容到IE9及以上。

    三、自适应布局(bootstrap)

    自适应布局分别为不同屏幕不同分辨率定义布局,即是创建多个静态页面,每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上,但是布局中的元素位置会发生改变,但是在每个静态布局中,页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,在同一个设备下实际还是固定的布局。
    优点:
    1.对网站的复杂程度兼容性更大;
    2.对开发工程师来说制作的成本代价更低;
    3.代码执行效果更高效;
    4.测试时更加容易,运营相对更加精准。
    缺点: 在现如今的移动端设计百花齐放的时期之下,同一个网站往往需要为不同的设备制作不同的页面,不但会增加开发成本,还会因为客户的需求改变时,可能会改动多套代码、流程相比较来说较繁琐。

    四、流式布局(fluid)

    流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整,但是整体布局不变,也称之为栅栏系统。使用%百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
    缺点: 屏幕大小变化时,页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

    五、响应式布局

    响应式布局是css3增加的新布局方式,该布局方式2010年提出来的一个概念,说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。
    设计方法: 媒体查询+流式布局。通常使用@media媒体查询,和网格系统配合相对布局单位进行布局,实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。
    优点: 适应pc端和移动端,如果有足够的耐心,页面效果会很完美。
    缺点:
    1.只能适应主流的宽高;
    2.如果匹配足够多的设备屏幕的大小,对于工程师来说工作量不小,设计更需要多个版本,工作量增大。

    六、浮动布局

    浮动布局进行调用浮动属性改变页面中元素的位置,浮动布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂。浮动元素是脱离文档流的,但不脱离文本流。浮动元素有左浮动(float : left)和右浮动(float : right)两种

    .lian{
    	width: 90%;
    	padding-left: 5%;
    }
    .lian img{
    	float: right;
    	margin-top: -180px;
    }
    .phone ul li{
    	list-style: none;
        margin-top: 50px;
        margin-left: 70px;
        color: #808080;
    }
    .phone ul li img{
    	position: absolute;
    	margin-left: -80px;
    	float: left;
    	margin-top: -5px;
    }
    .view{
    	margin-top: 50px;
    	margin-left: -5px;
    	float: left;
    }
    .view input{
    	width: 120px;
    	height: 40px;
    	border-radius: 6px;
    	border: 1px solid #3CB371;
    	background-color: #3CB371;
    	font-size: 16px;
    	color: white;
    

    优点: 兼容性比较好
    缺点: 浮动带来的影响比较多,页面宽度不够的时候会影响布局。

    七、定位布局

    定位布局时利用position属性控制页面元素设置一些不规则布局。
    定位元素的各个属性:
    1.static 静态定位: HTML元素的默认值,即没有定位,元素出现在正常的流中。

    div.static {
        position: static;
        border: 3px solid #73AD21;
    }
    

    2.fixed 固定定位: 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关,因此不占据空间。Fixed定位的元素和其他元素重叠。

    p.pos_fixed{
        position:fixed;
        top:30px;
        right:5px;
    }
    

    3.relative 相对定位: 相对定位元素的定位是以自身为参照物。对象不可层叠、不脱离文档流,移动相对定位元素,但它原本所占的空间不会改变。通过 top,bottom,left,right 定位。

    h2.pos_top
    {
        position:relative;
        top:-50px;
    }
    

    4.absolute 绝对定位 absolute 定位使元素的位置与文档流无关,因此不占据空间。元素和其他元素重叠。通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位。

    h2{
        position:absolute;
        left:100px;
        top:150px;
    }
    

    5.sticky 粘性定位 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed,它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }
    

    6.z-index 因为页面中元素的定位与文档流无关,所以定位的元素可以覆盖在文档流上面。所以z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面/后面)。z-index的值必须取正整数,数值越大显示的优先级就越高。 如果两个定位元素重叠,而且还没有指定z - index,name最后定位在HTML代码中的元素将被显示在最前面。

    展开全文
  • Android布局是应用界面开发的重要一环,在Android中,共有五种布局方式,分别是:FrameLayout(框架布 局),LinearLayout (线性布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局),TableLayout...
  • 手机界面设计中12种常用布局

    万次阅读 2017-06-03 14:31:14
    手机界面设计中12种常用布局 转载自:手机界面设计中12种常用布局 - 轩枫阁总结下手机界面改版要考虑的布局,主要的分为以下2大类主导航 列表式 陈列馆式 九宫馆式 选项卡式 旋转木马 行为扩展式 多面板 图表式 ...



    手机界面设计中12种常用布局



    转载自: 手机界面设计中12种常用布局 - 轩枫阁

    总结下手机界面改版要考虑的布局,主要的分为以下2大类

    主导航

    1. 列表式
    2. 陈列馆式
    3. 九宫馆式
    4. 选项卡式
    5. 旋转木马
    6. 行为扩展式
    7. 多面板
    8. 图表式

    次导航

    1. 抽屉式
    2. 超级菜单式
    3. 弹出式
    4. 图片轮盘式

    其中,所有的主要导航都可以做为次级导航,但次级导航不太适合用作主要导航 。为什么?因为次导航是隐藏起来,隐而不见、只有触发时才显示。

    主导航

    69257825254a8d2e1ab436426d1feefc1427195647

     

     

    1、列表式

    1427195163_32_w995_h597

    特点:

    内容从上向下排列,导航之间的跳转要回到初始点,好比一条街上有理发店,饭店,你想从理发店到饭店,得先多理发店出来,才能进入饭店。

    优点:

    1、层次展示清晰

    2、视觉流线从上向下,浏览体验快捷。

    3、可展示内容较长的菜单或拥有次级文字内容的标题

    不足:

    1、导航之间的跳转要回到初始点

    2、同级内容过多时,用户浏览容易产生疲劳

    3、排版灵活性不是很高

    4、只能通过排列顺序、颜色来区分各入口重要程度

    场景:

    列表菜单适合用来显示平级菜单,且较长或拥有次级文字内容的标题。

     

    2、陈列馆式

    1427195179_53_w987_h597

    特点:

    布局比较灵活,设计师可以平均分布这些网络,也可根据内容的重要性不规则分布,相对列表式,其优点在于同样的高度下可放置更多的菜单,更具有流动性,曝布流就属于其中一种。

    优点:

    1、直观展现各项内容

    2、方便浏览经常更新的内容

    不足:

    1、不适合展现顶层入口框架

    2、容易形成界面内容过多,显得杂乱

    3、设计效果容易呆板

    场景:

    适合以图片为主的单一内容浏览型的展示

     

    3、九宫格

    1427195192_33_w1002_h597

    特点:

    相比陈列馆式,布局比较稳定为一行三列式布局。

    优点:

    1、清晰展现各入口

    2、容易记住各入口位置,方便快速查找

    不足:

    1、菜单之间的跳转要回到初始点

    2、无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式明朗

    3、容易形成更深的路径

    4、不能直接展现入口内容

    5、不能显示太多入口次级内容

    场景:

    适合入口比较多的展示,而且导航之间切换不是很频繁的情况,也就是业务之间相对独立,没有太多的瓜葛。

     

    4、选项卡式

    1427195207_47_w997_h600

    特点:

    导航一直存在,具有选中态,可快速切换到另一个导航。

    优点:

    1、减少界面跳转的层级

    2、分类位置固定

    3、清楚当前所在的入口位置

    3、轻松在各入口间频繁跳转且不会迷失方向

    4、直接展现最重要入口的内容信息

    不足:

    功能入口过多时,该模式显得笨重不实用

    场景:

    大部分放在底部,方便用户操作,切换的时候,选中状态高亮显示,有少数放在顶部。

    适合分类少及其内容同时展示,导航菜单项数量为3-5个;各导航菜单项之间内容/功能有显著差异;用户在各个导航选项之间需要非常频繁的切换操作

     

    5、旋转木马

    1427195220_37_w996_h599

    特点:

    重点展示一个对象,通过手势滑动按顺序查看更多

    优点:

    1、单页面内容整体性强,聚焦度高

    2、线性的浏览方式有顺畅感、方向感

    不足:

    1、受屏幕宽度限制,它可显示的数量较少,需要用户进行主动探索

    2、由于各页面内容结构相似,容易忽略后面的内容

    3、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面

    场景:

    适合数量少,聚焦度高,视觉冲击力强的图片展示

     

    6、行为扩展式

    1427195230_14_w996_h596

    特点:

    能在一屏内显示更多的细节,无需页面的跳转

    优点:

    1、减少界面跳转的层级

    2、对分类有整体性的了解

    3、清楚当前所在的入口位置

    不足:

    分类位置不固定,当展开的内容比较多时,跨分类跳转不方便

    场景:

    适合分类多及其内容同时展示

    内容展示的信息多

     

    7、多面板

    1427195241_31_w997_h598

    特点:

    能同时呈现比较多的分类及内容。

    优点:

    1、减少界面跳转的层级

    2、对分类有整体性的了解

    3、分类位置固定

    4、清楚当前所在的入口位置

    不足:

    2、界面比较拥挤

    场景:

    适合分类多及其内容同时展示

    内容展示的信息不多

     

    8、图表式

    1427195256_37_w997_h596

    特点:

    用图表的形式直观的呈现信息

    优点:

    1、总体性强

    2、直观

    不足:

    1、详情信息显示的有限

    场景:

    适合总-分结构或表现时间段内的趋势走向的展示

     

    次导航

    1427195270_45_w1031_h1257

    1、抽屉式

    1427195292_23_w996_h598

    特点:

    突出核心功能,隐藏其它功能。

    优点:

    1、不占用宝贵的屏幕空间,让用户首先能聚焦于内容

    2、导航的菜单项目不受数量限制,应用的所有信息组织入口都可以加入到抽屉导航中

    3、扩展性强,配置灵活,一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中

    不足:

    1、隐藏框架中其他入口、用户需要一定记忆成本

    2、对入口交互的功能可见性要求高

    3、容易与应用内的其他交互模式冲突,比如侧滑手势操作

    场景:

    适合功能较多,信息结构较复杂的产品,用户的注意力聚焦在主信息流的浏览上,不用频繁切换“子产品模块”,且扩展性比较好

     

    2、超级菜单式

    1427195310_83_w1004_h600

    特点:

    默认具有选中态,导航/分类比较多,可快速切换到另一个导航/分类。

    优点:

    1、层次展示清晰

    2、浏览时产生流畅体验

    3、可展示内容较长的标题

    4、可展示标题的次级内容

    不足:

    1、菜单之间的跳转要回到初始点

    2、同级内容过多时,用户浏览容易产生疲劳

    3、排版灵活性不是很高

    4、只能通过排列顺序、颜色来区分各入口重要程度

    场景:

    比较复杂的信息架构,导航分类比较多。

     

    3、弹出式

    1427278618_59_w1327_h598

    特点:

    没有跳出感,适合内容比较少和简单操作的呈现。

    优点:

    1、在原有界面上进行操作,不必跳出界面,体验比较连贯

    2、在用户需要的时候才显示(重要提示除外),不主动干扰

    不足:

    1、显示的内容有限

    场景:

    适合内容较少的显示

     

    4、图片轮盘式

    1427195342_47_w996_h597

    特点:

    节省空间,可使用箭头,圆点或显示不全的图片告诉用户还有更多的内容可查看。

    优点:

    1、查看更多内容不必跳出界面,体验连贯。

    2、节省空间。

    不足:

    横屏宽度有限,更多的内容有数量上限制,如微信只展示5个好友信息。

    场景:

    适合图片或信息组块更多的展示方式。

    小结

    以上都是基本布局,在实际的设计中,我们可以像搭积木一样组合起来完成复杂的界面设计,例如手游吧的顶部导航用的是选项卡,下面采用多面板的布局。

    另外要考虑到各种布局的优劣,并有最完美的布局,要考虑信息结构、重要层次以及数量上的差异,提供最适合的布局,以增加产品的易用性和交互体验。
    转载自:腾讯KM平台 – nikoli

    展开全文
  • Android界面五种常用布局方式

    千次阅读 2014-08-05 00:23:19
    Android界面五种常用布局方式   Android的界面由布局和组件协同完成,布局相当于整体框架,而组件则是框架里面的内容。组件按布局方式一次排列,就组成了用户所能看见的界面。Android的五大布局分别是...

    Android界面五种常用布局方式

            

    Android的界面由布局和组件协同完成,布局相当于整体框架,而组件则是框架里面的内容。组件按布局方式一次排列,就组成了用户所能看见的界面。Android的五大布局分别是LinearLayout(线性布局)、FrameLayout(单帧布局)、RelativeLayout(相对布局)、AbsoluteLayout(绝对布局)、TableLayout(表格布局)。

     

    LinearLatout按照垂直或水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后。如果是垂直排列,那么将是一个N行单列的结构,每行只会有一个元素,而不论这个元素的宽度是多少;如果是水平排列,那么将是一个单行N列的结构。如果搭建两行两列的结构,通常是先垂直排列两个元素,每个元素里再包含一个LinearLayout进行水平排列。

     

    FrameLayout是五大布局中最简单的一种布局,在这个布局中,整个界面被当成一块备用的空白区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的元素直接覆盖在前面的子元素之上,将前面的子元素部分或全部遮挡。

     

    AbsoluteLayout是绝对布局。在此布局中的子元素android:layout_xandroid:layout_y属性将生效,用于描述该子元素的坐标位置。屏幕上左上角为坐标原点(0,0),第一个0代表横坐标,向右移动此值增大,第二个代表纵坐标,向下移动此值增大,在此布局中的子元素可以相互重叠。在四级开发中,通常不采用此布局方式,因为它的界面代码过于刚性,以至于不能很好的适配各种终端。

     

    RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将会生效。例如android:layout_below,android:layout_above等。子元素就通过这些属性和个自的ID配合指定位置关系。注意在指定位置关系时,引用的ID必须在引用前被定义,否则将出现异常。RelativeLayoutAndroid五大布局中较为灵活的一种布局方式,比较适合一些复杂的界面布局。

     

     

    TableRow(表格布局)是LinearLayout的子类,它的AndroidLayout_widthLayout_height属性恒为MATCH_PARENTWRAP_CONTENT。所以它的子元素都是横向排列,并且宽高一致。这样的设计使得每个tablerow里的子元素都都相当于表格中的单元格一样。在TableRow中,单元格可以为空,但是不能跨列。

    展开全文
  • 浅谈几种常用布局方式

    万次阅读 2016-11-28 16:13:37
    目前针对web前端页面的设计主要分为pc端和移动端页面,针对不同的页面我们可能会采取不同的布局格式,在整个布局的选择上,没有一成不变的,也没有任何一种布局能够满足各个方面的需要,在众多的布局方式中,我这边...

          目前针对web前端页面的设计主要分为pc端和移动端页面,针对不同的页面我们可能会采取不同的布局格式,在整个布局的选择上,没有一成不变的,也没有任何一种布局能够满足各个方面的需要,在众多的布局方式中,我这边主要针对以下几种布局方式简单的发表一下个人的看法。

    第一:固定布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>固定布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fixedlayout{
    width:800px ;
    background:gray;
    padding:10px;
    margin:100px auto ;
                    overflow: hidden;
    }
    .left{
    width: 380px;
    height: 200px;
    background: blue;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    margin:0px 15px ;
    float: left;
    }
    .right{
    width: 380px;
    height: 200px;
    background: red;
    text-align: center;
    line-height:200px ;
    display: inline-block;
    float: left;
    }

    </style>
    </head>

    <body>
    </body>
    <div class="fixedlayout">
    <div class="left">
    我是固定布局1
    </div>
    <div class="right">
    我是固定布局2
    </div>
    </div>
    </html>

    如上述代码,宽度,高度固定,页面被一个固定网页包裹,容器不能移动,页面的宽高不随页面的变化而变化,这种布局大家比较熟悉,这种方式一度成为页面布局的主流方式,这样布局设计简单,更容易定义,但是由于屏幕尺寸的不同,特别是移动端各个设备的不同,这种布局在灵活性方式可用度不高。

    二 流式布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fixedlayout{
    width:80%;
    background:gray;
    padding:10px;
    margin:100px auto ;
                    overflow: hidden;
    }
    .left{
    width:40%;
    height: 200px;
    background: blue;
    text-align: center;
    line-height: 200px;
    display: inline-block;
    margin:0px 15px ;
    float: left;
    }
    .right{
    width: 40%;
    height: 200px;
    background: red;
    text-align: center;
    line-height:200px ;
    display: inline-block;
    float: left;
    }

    </style>
    </head>

    <body>
    </body>
    <div class="fixedlayout">
    <div class="left">
    我是流式布局1
    </div>
    <div class="right">
    我是流式布局1
    </div>
    </div>
    </html>

    如上述代码:以百分比为主要形式,让屏幕自适应,这种布局方式定义灵活,能够根据屏幕的情况变化,但是这种方式设计的效果不太容易控制,一般移动端结合rem用的比较多,pc端用的不是非常多。

    三 弹性布局

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>弹性布局</title>
    <style type="text/css">
      .outer {
            width:1000px; 
            padding: 10px;
            margin:120px auto ;
            background: red;
            display: -webkit-box;      
            display: -moz-box;        
            display: -ms-flexbox;      
            display: -webkit-flex;    
            display: flex;    
            -webkit-box-pack: space-between;
            -webkit-justify-content: space-between;
            -ms-flex-pack: space-between;
            justify-content: space-between;
            -webkit-flex-wrap:wrap;
            -webkit-box-lines:multiple;
            -moz-flex-wrap:wrap;
            flex-wrap:wrap;
            overflow: hidden;
        }
       /*.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
       .clearfloat{zoom:1}*/
        #div1 {
        width:230px;
        height:200px ;
        display: inline-block;
        margin: 0px 0px 6px 0px;
        *margin: 0px 0px 6px 16px;
        margin: 0px 0px 6px 16px\9;
        background: blue;
        text-align: center;
        line-height:200px ;
        float: left;
        position: relative;
        }
    #div1-1{
    width: 20px;
    height:20px ;
    position: absolute;
    left: 25%;
    top:30% ;
    border:1px solid black ;
    text-align: center;
    line-height:20px;
    }
    </style>
    </head>
    <body>
    <div class="outer clearfloat">
        <div id="div1">1</div>
        <div id="div1">2</div>
        <div id="div1">3</div>
        <div id="div1">4</div>
        <div id="div1">5</div>
        <div id="div1">6</div>
        <div id="div1">7</div>
        <div id="div1">8</div>  
       </div>
    </div>
    </body>
    </html>

    如上述代码,浮动部分和清楚浮动部分主要是兼容添加的一些代码,重点看弹性布局的部分,这里面我是在pc端设计的,移动端用rem,弹性布局相对前两种出现的比较晚些,但是弹性布局功能还是很强大的,布局也非常方便,但是此布局形式在pc端并不推荐使用,ie9以下浏览器均不支持,另外火狐等一些浏览器也需要做兼容,移动端目前绝大部分浏览器都已经支持弹性布局,在移动端大家可以尝试使用。

    四 浮动布局

         此布局上述都有演示浮动布局,此处就不做代码演示,浮动布局关键词,float,可以设置left或者right,他使元素脱离文档流进而达到布局的目的,也是目前一个比较主流的布局方式,但是使用浮动的结束以后,别忘记清除浮动哦。

    五 定位布局

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>定位布局</title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    html,body{
    width:100% ;
    height: 100%;
    }
    .fix{
      width:200px ;
      height: 200px;
      background:yellow ;
      position: fixed;
      left:50% ;
      top:50% ;
      z-index:10 ;
      margin-left:-100px ;
      margin-top:-100px ;
    }
    .location{
    width:960px;
    height: 500px;
    background:gray;
    padding:10px;
    margin:100px auto ;
    position: relative;
                   }
    .div1{
    width: 300px;
    height:300px ;
    background:red ;
    position: absolute;
    left:10%;
    top:20% ;
    text-align: center;
    line-height: 300px;
    }
    .div2{

    width: 300px;
    height:300px ;
    background:blue ;
    position: absolute;
    left:50%;
    top:20% ;
    text-align: center;
    line-height: 300px;
    }

    </style>
    </head>

    <body>
    </body>
    <div class="fix">
    我是固定定位
    </div>
    <div class="location">
    <div class="div1">
    我是绝对定位1
    </div>
    <div class="div2">
    我是绝对定位2
    </div>
    </div>

    </html>

    定位布局也是目前比较常用的一种布局方式,关键词: position: fixed;固定布局,将元素固定在一个位置,不随页面移动而移动,position: relative;相对定位,相对于元素自身定位,不脱离文档流,相当于定义一个参照物,一般和绝对定位结合使用,position: absolute;绝对定位,脱离文档流,一般和相对定位结合使用,如果不定义相对定义,将会相对于整个浏览器定位,所以定位布局,一般情况下都是相对定位和绝对定位结合着来,相当定位相当于划定一个势力范围,制定一个封闭的容器块,然后绝对定位就行对于相对定位来定位,从而达到有效的布局。

    六 margin和padding 

         这个就不做展示,上面显示都有用到,margin是外边距,padding内边距,外边距是盒子与盒子之间的距离,内边距是盒子的边和盒子内部元素的距离,因此在使用的时候应该有选择的使用,另外margin会出现吃边距的情况,大家可以自己测试下。

    最后,还是那句话,没有一成不变的布局方式,也没有任何一种方式能够满足各方面的需求,大家可以多积累些经验,根据自己的需要使用最有效布局方式做出最帅最美的页面。

    展开全文
  • 1.网页设计布局 “国”字型布局: 国型布局也称为同型布局布局结构与“国”字相似而得名 是一些大型网站所喜欢的类型 页面最上部分一般放置网站的标志和导航栏或Banner广告, 接下来是网站的主要内寄,左右分列...
  • 移动端开发常用布局

    千次阅读 2019-03-29 19:47:03
    移动web常用布局知识 在移动web中常用的布局四种 流式布局(百分比布局) Flex布局(弹性布局) 响应式布局 rem布局 一、流式布局(百分比布局) 所谓的流式布局就是我们常说的百分比布局,页面中盒子的...
  • android 常用布局有哪些

    千次阅读 2012-04-28 16:05:49
     在 android 中我们常用布局方式有这么几种: 1.LinearLayout ( 线性布局 ) :(里面只可以有一个控件,并且不能设计这个控件的位置,控件会放到左上角)  线性布局分为水平线性和垂直线性二者的属性分别为: ...
  • 相信,随着产品设计的迭代更新,还会更酷的布局出现,让我们一起来看看是哪几种。 手机由于屏幕尺寸的限制,可显示内容要比PC屏幕少得多。在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱...
  • web页面常用布局(pc端布局和移动端布局) 什么是web布局呢? 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分...
  • UI(1)---手机界面设计中12种常用布局

    万次阅读 2018-05-11 20:56:38
    手机界面设计中12种常用布局手机界面设计中12种常用布局转载自:手机界面设计中12种常用布局 - 轩枫阁总结下手机界面改版要考虑的布局,主要的分为以下2大类主导航列表式陈列馆式九宫馆式选项卡式旋转木马行为扩展式...
  • 企业网站首页设计常见的6种布局方式

    万次阅读 多人点赞 2017-11-15 21:21:10
    在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就了把企业站常用的页面布局方式总结一下的想法,让大家...
  • WPF常用布局介绍

    万次阅读 多人点赞 2017-01-06 11:44:00
    本文简要介绍了WPF中布局常用控件及布局相关的属性
  • 前端常用的几种布局方式(推)

    千次阅读 2019-10-22 16:12:34
    最为传统的一种布局方式,网页上的所有元素都是用px为单位进行设定的。 3级标题 布局特点: 不论屏幕的大小,页面宽高始终不变,始终维持最初设计时的样式大小来显示;常规的PC端网页都是用的静态布局,也就是设置了...
  • 本内容主要包含常用的web开发中所需要用到的布局方式,可以作为参考引用到自己的项目开发中。
  • 小程序开发——常用布局

    万次阅读 2018-04-22 14:57:10
    小程序的布局分为两类:横向布局和纵向布局 横向布局 从左到右 如: .wxss文件 .rowLayout { display: flex; flex-direction: row; } .wxml (views是我在.json定义的数组,四个元素) ...
  • ExtJs常用布局--layout详解(含实例)

    万次阅读 2016-05-23 18:27:14
    ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 本文所有实例代码已提供下载,下载链接:ExtJs常用布局--layout详解实例...
  • 手机界面设计中9种常用布局

    千次阅读 2012-11-10 08:18:37
    合理的布局设计可以使信息变得井然有序,用户可以很容易地找到自己想要的信息,产品的交互效率和信息的传递效率都得到提升。下面来看看手机界面设计中常用到的一些布局。 1,竖排列表 竖排列表是最常用的布局
  • QT 常用布局管理器

    千次阅读 2019-09-07 00:03:24
    Qt布局管理详解 详解 QT 布局管理界面 图文并茂 QT主要布局管理器分类 QHBoxLayout(水平布局) 把子窗口从左到右排列在一个水平行上。 QWidget *window = new QWidget; QPushButton *button1 = new ...
  • qDebug()各国表现方式:"(Qt::SystemLocaleDate); QString longWeek = dt3.longDayName(dt3.dayOfWeek()); //将返回的星期的数字改成“星期x”的字符串 QString longMonth = dt3.longMonthName(dt3.month()); ...
  • 首先需要明确的一点是,这些布局方式只是一个分类,并不是说他们只是单独使用,不能用其他的方式。 A.flex布局 flex是css3新增的一个属性,布局非常的灵活方便,本文侧重于布局方式的介绍,flex的相关概念以及使用...
  • 页面布局方式有哪些?

    千次阅读 2020-07-08 13:18:26
    常见的页面布局方式有六种:双飞翼、多栏、弹性、流式、瀑布流、响应式布局 (1)、双飞翼布局 经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早...
  • Cadence 16.6PCB设计布局布线常用功能学习笔记

    万次阅读 多人点赞 2018-09-17 01:36:22
    本文主要介绍在使用Allegro布局布线时常用的功能。 一、布局常用的设置 1、PCB editor的工具栏介绍:最下面command命令可以设置快捷方式,输入坐标等。左边两个红框,上面的是电气连接线,下面的是非电气特性的...
  • 关于APP界面布局设计的八种优缺点

    万次阅读 2016-08-25 11:48:18
    学习UI设计的时候,经常要接触到页面的布局布局方式会直接影响一个APP的视觉效果,好的布局方式,往往能带来舒服的视觉效果,更能得到用户的接受与好评。然而万变不离其宗,移动端页面常用布局,不外乎以下8种...
  • 相对布局(RelativeLayout):也是常用布局之一,可以设置某一个控件相对于包裹它的(父容器)或者是和它一起被包裹的另一个控件(兄弟组件)的位置。 适用于较复杂的布局,主要针对的是线性布局嵌入多层的问题。...
  • 方式一,使用&lt;...标签布局,结构不灵活。方式二,&lt;jsp:include&gt;标签 优点:结构清晰灵活 缺点:网络流量增大(每个jsp页面返回都需要包含菜单,header,footer等信息)方式三...
  • xamarin forms常用布局stacklayout详解

    千次阅读 2018-10-07 22:03:45
    顾名思义,StackLayout是一种可以在上下方向、左右方向堆叠的布局,简单而又常用布局,我们需要掌握它的三个重要属性,最重要的是布局方向和布局定位
  • Qt的5种常用布局搭建

    万次阅读 2017-04-27 16:43:05
    界面开发首先要对整个界面进行布局,使窗体上的所有的控件必须一个合适的尺寸和位置。那么做出来的界面才看起来美观。 那么如何对界面进行布局呢?Qt提供了一些类负责排列窗体上的控件,主要:QHBoxLayout,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,398
精华内容 35,759
关键字:

常用的布局设计方式有