认识达内从这里开始

认真做教育专心促就业

运城计算机培训网页设计的布局方式有几种

发布：佚名
来源：互联网
时间：2017-03-20 14:30

我们在晋城达内的网站上曾经发布过关于如何提高设计师工作能力的其中一种方法就是讲一些通用的设计元素进行组件化封装，这样可以方便我们在以后的设计中进行调用。那么，我们今天就邀请运城计算机培训的老师给大家讲解一下，我们在进行网页设计的布局过程中，应该如何来利用这些设计组件吧。

运城计算机培训网页设计的布局方式有几种

当然了，在讲之前，我们先来了解一下，网页的布局方法有几种吧。

首先，我们要讲的就是比较传统的定点定位网页设计方法。

网页布局中有两个概念：行内元素和块元素。它们是非此即彼的关系，网页里只要是你能看见的东西，一定不是行内元素就是块元素。

浮动有两个方向，向左和向右。被加上了浮动属性的元素，表现都会变得类似于行内元素，根据内容变化尺寸。第一行的左右浮动元素都可以是块元素，但它们却排在了一行里。

第二行和第三行是一组对比，表现了非浮动元素与浮动元素混合排列时的规则。第二行的文字是一个常规布局的元素，可以看到左右浮动的元素各就各位，常规布局的文字很灵活地填充空隙，就像报纸排版一样。而第三行里的情况，文字段落也加上左浮动属性，并且限定宽度，它就会跟在左浮动元素的右侧。

绝对定位

另一种打破常规的布局方式是绝对定位。这就毫无章法可言了，像狗皮膏药一样想贴哪里贴哪里，还可以像图里这样层叠着贴。总之，绝对定位的元素不会占据常规布局和浮动布局中的任何空间，而是直接挡住它背后的内容。不过,既然可以层叠，就有谁在前谁在后的问题。这和设计工具里的图层是一样的，当然有办法可以控制。

流式布局

现在要讲的是两个更宏观的概念：流式布局与弹性布局。

我们前面有提到常规布局，那个概念与这两者不能相提并论。其实这两种布局都是基于前面提到的原理实现的，只是区别在于对待自适应问题上采取了不同的策略。

弹性布局

弹性布局则是另一种思路。根据屏幕尺寸变化，让界面上所有元素等比例放大缩小。所以无论在什么尺寸的设备上，看到的画面都是一样的，信息容量相同。只是到了大屏幕上，会变得像老年手机那样硕大无比。

这两种自适应方式都有各自的用途，不能说哪种一定更好。但我们在设计时可以考虑一下这个问题，什么类型的设计适合哪种布局。

达内时代科技集团致力于培养面向电信和金融领域的Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择运城计算机培训，不再孤军奋战，轻轻松松做IT高薪白领。运城达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。

< 上一篇：运城达内培训如何为色盲群体设计网站

下一篇：运城达内计算机培训如何设计用户中心功能 >