欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS模块 >

div css绝对定位布局案例 不规律业务流程CSS布局实例

div css绝对定位布局案例 不规律业务流程CSS布局实例,position布局实例position:absolute,position:relative绝对定位实例布局。关于业务流程不规律布局css div布局实例,采用绝对定位position实现布局。

一般不规律的布局比如此业务流程布局,我们采用css position绝对定位布局可以非常简单的来实现此网页布局。

div css绝对定位业务流程布局实例图
采用div css绝对定位业务流程布局实例图

一、为什么采用css绝对定位   -   TOP

此案例如果通过普通float浮动定位很难实现,而且会浪费很多代码,可能通过float:leftfloat:right浮动比较复杂。所以对于这种不规律的DIV布局,建议采用position css绝对定位布局,非常简单。只需要在ps软件中测量出子级(服务定义、卡种定义、结算方式定义、结算成功、销售开单、会员卡办理)在外层div定位位置(left、right、top、bottom)即可布局出此实例。

二、使用关键css样式单词及解释   -   TOP

1、position:relative
父级赋予其定位

2、position:absolute
子级设置其样式,相等于父级设置定位样式

3、left、top、right、bottom
对子级设置定位在父级位置

css模块实例布局代码中给大家详细介绍作用用法。

相关教程:
1、css position
2、left、top、right、bottom
3、另外一个CSS绝对定位实例

三、DIV绝对定位案例代码及解释   -   TOP

1、实例对应html代码与解释

  1. <div id="divcss5"> 
  2. <div class="title"><img src="images/tit.gif" alt="业务流程" /></div> 
  3. <div class="divcss5"> 
  4. <div class="no no1"><a href="#" title="服务定义">服务定义</a></div> 
  5. <div class="no no2"><a href="#" title="卡种定义">卡种定义</a></div> 
  6. <div class="no no3"><a href="#" title="结算方式定义">结算方式定义</a></div> 
  7. <div class="no no4"><a href="#" title="结算成功">结算成功</a></div> 
  8. <div class="no no5"><a href="#" title="销售开单">销售开单</a></div> 
  9. <div class="no no6"><a href="#" title="会员卡办理">会员卡办理</a></div> 
  10. </div> 
  11. </div> 

首先我们设置一个“id="divcss5"”盒子里放一个装标题盒子(<div class="title">)和一个装流程内容的盒子(<div class="divcss5">),而其它的“<div class="no no1">”这些是具体装流程图内容。

本实例主要内容是“<div class="divcss5">”内的布局,首先我们将业务流程内容作为“<div class="divcss5">”背景,然后再分别使用六个子div盒子分别装具体业务流程内容。

2、实例对应CSS代码与解释

  1. #divcss5{ margin:0 auto; width:862px} 
  2. /*定位最外层盒子宽度与布局居中(margin:0 auto css布局居中功能)*/ 
  3. #divcss5 .title{ padding-bottom:24px;} 
  4. /*设置装业务标题盒子距离下一个盒子距离为24px*/ 
  5. #divcss5 .divcss5{ position:relative; background:url(process.gif) no-repeat 0 0; height:361px;} 
  6. /*position:relative声明绝对定位父级,设置高度361px,宽度默认继承其父级862宽度,
    将整个流程图作为图片设置为背景*/ 
  7. .no{ position:absolute;width:211px; height:49px} 
  8. /*公用六个内容class设置宽度、高度、定位子级*/ 
  9. .no a{ display:block; width:100%; height:100%; text-indent:-9999px} 
  10. /*隐藏超链接内文字功能*/ 
  11. .no1{ left:50px; top:0} 
  12. /*定位第一个“服务定义”内容距离父级左边距离50px、距离上为0距离*/ 
  13. .no2{ left:18px; top:137px} 
  14. /*定位第二个“卡种定义”内容距离父级左边距离18px、距离上为137px距离*/ 
  15. .no3{ left:60px; top:268px} 
  16. /*定位第三个“结算方式定义”内容距离父级左边距离60px、距离上为268px距离*/ 
  17. .no4{ right:49px; top:0} 
  18. /*定位第四个“结算成功”内容距离父级右边距离49px、距离上为0距离*/ 
  19. .no5{ right:17px; top:138px} 
  20. /*定位第五个“销售开单”内容距离父级右边距离17px、距离上为138px距离*/ 
  21. .no6{ right:59px; top:268px} 
  22. /*定位第六个“会员卡办理”内容距离父级右边距离59px、距离上为268px距离*/ 

以上采用css注释为大家介绍每段CSS代码意义与功能。具体left、right、top、bottom定位距离使用ps软件切片工具准确测量获得。

CSS绝对定位具体距离值ps切片划分截图
DIV+CSS绝对定位具体距离值ps切片划分截图

3、绝对定位position案例浏览器效果截图

css绝对定位案例浏览器效果截图
css绝对定位案例浏览器效果截图

四、css position绝对实例在线演示与下载   -   TOP

1、在线演示

查看案例

2、打包下载

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m780.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2015-07-21 16:56 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。