R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > DIV+CSS???/a> >

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

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

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

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

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

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

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

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

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

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

              css??槭道季?/a>代码中给大家详细介绍作用用法。

              相关教程:
              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.tommstudio.com/template/m780.shtml

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

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