HTML5绝对定位图片合成,DIV CSS绝对定位布局案例

相对于定位咱们要用到名目position:absolute与position:relative，同时需要top、bottom、left、right配合组织完成DIV绝对定位。经由着实案例演示与引见相对于定位结构方法技术。

Css div绝对定位案例截图

遇到以上的不规则案例组织，要是使用float、padding等浮动实现比拟穷苦，但使用position相对于定位即可很好简单地完成。此后CSS5为大家介绍position绝对定位门径结构以上小的案例。

一、用到CSS名堂和HTML标签及相应讲明

1、要用到CSS花式单词及讲明

position：绝对定位花式完成DIV定位结构其设置值absolute与relative运用

width：宽度，配置对象宽度

height：高度，设置对象高度

line-height：行高，配置文本行高

left：配置div对象靠左距离

right：配置div对象靠左间隔

top：配置div对象靠左隔绝距离

bottom：配置div对象靠左隔断

bac公斤round：靠山，设置装备摆设后援图片与色调

color：配置字体色彩

font-size：配置字体大小

font-weight：设置字体加粗

2、用到HTML标签及诠释

div标签：用于构造结构框架

ul li标签：用于布局列表型数据列表

h3标签：用于布局栏指标题

二、相对于定位现实案例组织思维讲明先容

CSS5将潜伏翰墨后整图作为最外层大盒子DIV的后盾图片，命名为bg.jpg。

潜伏笔墨后的图片素材，可直接糊口生涯使用

这一个最外层DIV，设置好宽度高度、靠山图片，同时设置装备摆设position:relative。此盒子里分袂布局3个小DIV盒子，分袂设置装备摆设好宽度高度，同时设置position:absolute相对定位再使用left、right、top、bottom这几个花色定位好这3个盒子地位。

颠末以上组织便可结构好三个DIV盒子，再分袂构造栏指标题与内容便可实现。

同时此案例咱们可在CSS5提供的收费初始化模板根蒂前程行机关，以便兼容各大涉猎器。

三、相对于定位案例需要代码

下列是最外层DIV盒子及CSS代码与内容3个小盒子机关代码。

1、HTML代码

html>

绝对定位 实例在线演示 CSS5

以上HTML构造一个大盒子使用ID，里面三个小DIV盒子使用CLASS。

2、CSS代码

#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat}

/* position:relative是相对定位环节，父级配置 */

.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px}

.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}

.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}

/* 三个小盒子使用position:relative同时配置宽度 高度 left right top bottom实现构造与准肯定位 */

额定阐明：以上三个小盒子相对定位宽度、高度、top、left、right、bottom的准确值必需颠末PS软件失去，置信退出CSS5培训同砚通过上课曾经学会获取各属性和值的门径。(CSS5课堂中引见和视频哄骗演示过各值PS若何获取的技能手法)这里就不再具体先容与教学。

3、大要造诣截图

在DW软件中成绩截图

从以上图看出布局结构初现。再以上根抵上分袂机关栏目题目与对应模式便可完成此机关。

四、残缺案例代码

1、完整CSS代码

@charset "utf-8";

/* CSS5-CSS初始化模板-css5.com.cn */

body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}

/* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode //www.css5.com.cn/jiqiao/325.shtml */

ol, ul ,li{list-style:none}

img {border: 0; vertical-align:middle}

body{color:#FFF;bac公斤round:#FFF; text-align:center}

a{color:#FFF;text-decoration:none}

a:hover{color:#BA2636;text-decoration:underline}

/* 遵循本实例 设置装备摆设超链接字体与不有超链接字体演示为白色 */

#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;bac千克round:url(bg.jpg) no-repeat}

/* position:relative是相对定位关头，父级设置装备摆设 */

.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px}

.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}

.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px}

/* position:absolute是相对定位症结，子级设置装备摆设同时lef right top bottom配合使用 */

h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left}

/* 问题抗衡配置 */

ul.list{ text-align:left; width:100%; padding-top:8px}

ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden}

/* 加了overflow:hidden预防内容过多后主动换行 窜伏凌驾模式 */

2、残缺HTML代码：

html>

相对定位 实例在线演示 CSS5

新闻动态

• 不会按次能学会CSS吗？
• DIVCSS学习难吗？
• 我要列入CSS5的培训
• jQuery所以版本鸠合整理

CSS5栏目

• CSS根基教程
• HTML底子教程
• CSS问题
• CSS制作器材
• DIV CSS才智
• DIV+CSS+JS特效

网站栏目

• DIV CSS入门
• HTML入门教程
• CSS实例
• CSS5首页
• DIV CSS模块模板
• DIV CSS WEB标准