现金分享

当前位置:主页 > 现金分享 >

浅谈几种常用的布局方式

      目前,网页首页的设计主要分为PC终端。,对于不同的页面,我们可以采用不同的版式格式。,论总体布局的选择,没有常量,也没有任何布局满足需求的各个方面。,在许多方面的布局,我方主要针对以下几种简单的布局方法进行阐述。

第一:固定布局





固定布局







我是一个固定的布局1


我是一个固定的布局2



如上述代码,宽度,高度固定,页面由固定的网页包裹,容器不能移动,页面的宽度不会随着页面的变化而改变。,每个人都熟悉这种布局。,这种方法已经成为页面布局的主流。,这样布局设计简单,容易定义,但是因为屏幕的大小不同,特别地,移动终端的不同设备。,这种布局灵活性不高。。

二 流式布局





流式布局







我是一个流程布局1


我是一个流程布局1



如上述代码:作为主要形式的百分比,屏幕自适应,这种布局是灵活定义的。,能够根据屏幕上的情况改变,但是这种设计的效果是不容易控制的。,通用移动终端结合更多REM,PC端使用得不多。

三 弹性布局





弹性布局




1

2

3

4

5

6

7

8
 




如上述代码,浮动部分和透明浮动部分主要与SOM兼容。,聚焦弹性布局部分,我是在PC端设计的。,移动终端REM,与前两个相比,弹性布局相对较晚。,但是布局的灵活性仍然强大。,布局也很方便。,但是在PC端不推荐这种布局。,IE9中的以下浏览器不支持,有些浏览器,比如Firefox,需要兼容。,大多数移动浏览器已经支持灵活的布局。,在移动端,你可以尝试使用它。。

四 浮动布局

    此布局具有上面的演示浮动布局。,这里没有代码演示,浮动布局关键字,float,你可以左右设置,他使元素从文件中流出,以达到目的。,它也是一个更主流的布局。,但在浮游结束之后,别忘了清理浮标。。

五 位置布局





位置布局






我是固定位置



我绝对定位在1


我绝对定位在2




位置布局也是目前比较常用的一种布局方式,关键词: position: 固定的;固定的布局,将元素固定在一个位置,不要随页面移动,position: 相对定位,相对于元素本身的位置,不在文档流之外,等同于定义引用,综合定位与绝对定位联合应用,position: 绝对定位,文档流外,综合定位与相对定位的结合应用,如果未定义相对定义,将相对于整个浏览器定位,所以位置布局,通常,相对定位和绝对定位相结合。,等效位置相当于圈定一个影响范围。,封闭集装箱,然后使用绝对定位来定位相对定位。,从而实现有效的布局。

六 margin和padding 

    这不是显示器,以上说明所有有用的,边缘是边缘,填充内缘,距离是盒子和盒子之间的距离。,内边缘是盒子边缘与元素之间的距离。,所以在使用时应该有选择。,保证金将有保证金。,你可以自己测试。

最后,或者那个句子,没有常量布局方式,也没有办法满足各种需要。,你可以积累更多的经验,用最有效的布局方法制作最美、最美的图案。

咨询热线:  Copyright © 2016-2017 bwin - bwin官网 - bwin娱乐 版权所有