Download presentation
Presentation is loading. Please wait.
1
UI 软件 设计 页面布局（三）
2
目录 CSS布局定位 1 常用布局方法 2 练习 3 小结 4 — * —
3
浮动定位 UI DESIGN float（浮动）属性： float:none|left|right 取值： none: 默认值。对象不飘浮 left: 文本流向对象的右边 right: 文本流向对象的左边 CSS布局定位 — * —
4
Position定位 UI DESIGN position（定位）属性： position:static|absolute|fixed|relative 取值： static: 默认值。无特殊定位，对象遵循HTML定位规则 absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性，相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义 fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 CSS布局定位 — * —
5
#box_relative { position: relative; left: 30px; top: 20px; }
相对定位 UI DESIGN #box_relative { position: relative; left: 30px; top: 20px; } CSS布局定位 — * —
6
#box_relative { position: absolute; left: 30px; top: 20px; }
绝对定位 UI DESIGN #box_relative { position: absolute; left: 30px; top: 20px; } CSS布局定位 — * —
7
<div id="box"></div> </body>
居中布局 UI DESIGN 使用自动空白边让设计居中 #box{width:720px; margin:0 auto;} 使用CSS样式 <body> <div id="box"></div> </body> 常用布局方式 — * —
8
<div id="left">左列</div>
两列固定宽度布局 UI DESIGN <div id="left">左列</div> <div id="right">右列</div> #left{ width:200px; height:200px; background-color:#09F; border:2px solid #06F; float:left; } #right{ width:200px; height:200px; background-color:#09F; border:2px solid #06F; float:left; } 常用布局方式 — * —
9
<div id="left">左列</div>
两列固定宽度居中布局 UI DESIGN <body> <div id="box"> <div id="left">左列</div> <div id="right">右列</div> </div> 在前面添加一个BOX #box{ width:408px; margin:0 auto; } 常用布局方式 — * —
10
<div id="left">左列</div>
两列宽度自适应布局 UI DESIGN <div id="left">左列</div> <div id="right">右列</div> #left{ width:20%; height:200px; background-color:#09F; border:2px solid #06F; float:left; } #right{ width:70%; height:200px; background-color:#09F; border:2px solid #06F; float:left; } 常用布局方式 — * —
11
<div id="left">左列</div>
两列右列宽度自适应布局 UI DESIGN <div id="left">左列</div> <div id="right">右列</div> #left{ width:200px; height:200px; background-color:#09F; border:2px solid #06F; float:left; } #right{ height:200px; background-color:#09F; border:2px solid #06F; } 常用布局方式 — * —
12
练习 UI DESIGN — * —
13
小结 UI DESIGN 布局 小结 — * —
14
Thank You
Similar presentations
