css的布局说简单也简单，说复杂也复杂，我们下面给大家举几个列子，为大家详细的讲解一下绝对定位的布局和相对定位布局以及网页布局。
遇到以上的不规则案例布局，如果使用float、padding等浮动实现比较麻烦，但使用position绝对定位即可很好简单地实现。接下来为大家介绍position绝对定位方法布局以上小的案例。
用到CSS样式和HTML标签及相应解释
1、要用到CSS样式单词及解释
position：绝对定位样式实现DIV定位布局其设置值absolute和relative应用
立即学习“前端免费学习笔记（深入）”；
width：宽度，设置对象宽度
height：高度，设置对象高度
line-height：行高，设置文本行高
left：设置div对象靠左距离
right：设置div对象靠左距离
top：设置div对象靠左距离
bottom：设置div对象靠左距离
background：背景，设置背景图片和颜色
color：设置字体颜色
font-size：设置字体大小
font-weight：设置字体加粗
2、用到HTML标签及解释
div标签：用于布局结构框架
系统特点：技术领先：系统基于被广泛使用的Windows平台开发，集百家之所长，技术领先、功能完备； 快速建店：只需简单设置，3分钟即可以建立一个功能完备的网上商城； 操作简便：软件操作界面由专业设计人员设计，采用人性化的布局，界面规范，操作简捷； 安装方便：只需传到您的虚拟空间即可； HTML编辑器：内置优秀的HTML在线编辑器； 可扩展性：软件构架灵活，考虑未来功能扩充之需要，具有较强的可扩展性
ul li标签：用于布局列表型数据列表
h3标签：用于布局栏目标题
绝对定位实际案例布局思维解释介绍
将隐藏文字后整图作为最外层大盒子DIV的背景图片，命名为bg.jpg。
隐藏文字后的图片素材，可直接保存使用
隐藏文字后的图片素材，可直接保存使用
这一个最外层DIV，设置好宽度高度、背景图片，同时设置position:relative。此盒子里分别布局3个小DIV盒子，分别设置好宽度高度，同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。
通过以上布局即可布局好三个DIV盒子，再分别布局栏目标题和内容即可实现。
绝对定位案例重要代码
以下是最外层DIV盒子及CSS代码和内容3个小盒子布局代码。
1、HTML代码
绝对定位 实例在线演示 DIV 以上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}
从以上图看出布局结构初现。再以上基础上分别布局栏目标题和对应内容即可完成此布局。
1、完整CSS代码
@charset "utf-8";
body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
/* \5B8B\4F53 代表 宋体，更多中文字体转 Unicode http://www.php.com/jiqiao/j325.shtml */
ol, ul ,li{list-style:none}
img {border: 0; vertical-align:middle}
body{color:#FFF;background:#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;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: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代码：
绝对定位 实例在线演示 DIV
关于CSS的布局的案列讲解就是这么多了，需要的朋友可以保存一下，也请大家持续关注本站的其他更新。
相关阅读：
