浅谈几种常用的布局方式

0

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

第一:固定布局





固定布局





我是一个固定的布局1

我是一个固定的布局2

例如,上面的代码,宽度,高度固定,页面由固定的网页包裹。,容器不能移动。,页面宽度和高度不随页面变化而变化。,这个布局对我们来说是熟悉的。,这种方法已经成为页面布局的主流。,这样澳门新葡京官网简单,容易定义,但由于屏幕尺寸不同,特别地,移动终端上的不同设备是不同的。,这种布局在灵活性方面不是很灵活。。

二 流式布局





流式布局





我是流式布局1

我是流式布局1

例如,上面的代码:以百分比为主要形式,让屏幕自适应,这种布局是灵活的。,它可以根据屏幕的情况而改变。,但是这种设计的效果是不容易控制的。,通用移动终端与REM结合使用较多。,PC端不用太多。。

三 弹性布局





弹性布局



1

2

3

4

5

6

7

8

 


例如,上面的代码,浮动部分和透明浮动部分主要与SOM兼容。,重点放在弹性布局上。,我是在PC端设计的。,使用REM的移动终端,弹性布局比前两个要晚。,但弹性布局函数仍然很强。,布局也很方便。,但是在PC端不推荐这种布局。,IE9以下的浏览器不支持。,另外火狐等一些浏览器也需要做兼容,大多数移动浏览器已经支持灵活的布局。,你可以尝试使用移动终端。。

四 浮动布局

    上面的布局演示浮动布局。,这里没有代码演示。,浮动布局关键字,float,您可以左或右设置。,他使元素从文件中流出,以达到目的。,它也是目前主流的布局方法。,但是在使用浮子之后,别忘了清理浮子。。

五 位置布局





位置布局





我是一个固定的位置。

我绝对定位在1

我绝对定位在2


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

六 margin和padding 

    这将不显示。,上述显示是有用的。,边缘是边缘。,填充内缘,外部距离是盒子和盒子之间的距离。,内边缘是盒子边缘与元素之间的距离。,因此,在使用时应有选择地使用。,此外,还会有保证金的保证金。,你可以测试你自己。。

最后,这是同样的事情。,没有静态的。布局方式,也没有办法满足各种需要。,你可以积累更多的经验。,用最有效的布局方法制作最美、最美的图案。