R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R 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实例 >

              DIV CSS绝对定位布局案例 position布局实例

              DIVCSS5为大家实例讲解绝对定位布局。绝对定位我们要用到样式position:absoluteposition:relative,同时需要top、bottom、left、right配合布局实现DIVCSS5学习网绝对定位。通过真实案例演示与介绍绝对定位布局方法技术。

              Css div绝对定位案例截图
              Css div绝对定位案例截图

              遇到以上的不规则案例布局,如果使用float、padding等浮动实现比较麻烦,但使用position绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。

              一、用到CSS样式和HTML标签及相应解释   -   TOP

              1、要用到DIVCSS5学习网样式单词及解释
              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标签:用于布局结构框架
              ul li标签:用于布局列表型数据列表
              h3标签:用于布局栏目标题

              二、绝对定位实际案例布局思维解释介绍   -   TOP

              DIVCSS5将隐藏文字后整图作为最外层大盒子DIV的背景图片,命名为bg.jpg。

              隐藏文字后的图片素材,可直接保存使用
              隐藏文字后的图片素材,可直接保存使用

              这一个最外层DIV,设置好宽度高度、背景图片,同时设置position:relative。此盒子里分别布局3个小DIV盒子,分别设置好宽度高度,同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。

              通过以上布局即可布局好三个DIV盒子,再分别布局栏目标题和内容即可实现。

              同时此案例我们会在DIVCSS5提供的免费初始化模板基础上进行布局,以便兼容各大浏览器。

              三、绝对定位案例重要代码   -   TOP

              以下是最外层DIV盒子及CSS代码和内容3个小盒子布局代码。

              1、HTML代码

              1. <!DOCTYPE html> 
              2. <html> 
              3. <head> 
              4. <meta charset="utf-8" /> 
              5. <title>绝对定位 实例在线演示 DIVCSS5</title> 
              6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
              7. <!-- www.tommstudio.com --> 
              8. </head> 
              9. <body> 
              10. <div id="wrapper"> 
              11. <div class="box1"></div> 
              12. <div class="box2"></div> 
              13. <div class="box3"></div> 
              14. </div> 
              15. </body> 
              16. </html> 

              以上HTML布局一个大盒子使用ID,里面三个小DIV盒子使用CLASS。

              2、CSS代码

              1. #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 
              2. /* position:relative是绝对定位关键,父级设置 */ 
              3. .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 
              4. .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 
              5. .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 
              6. /* 三个小盒子使用position:relative同时设置宽度 高度 left right top bottom实现布局与准确定位 */ 

              特别说明:以上三个小盒子绝对定位宽度、高度、top、left、right、bottom的准确值必须通过PS软件获得,相信参加DIVCSS5培训同学通过上课已经学会获取各属性和值的方法。(DIVCSS5课堂中介绍和视频操作演示过各值PS如何获得的技术技巧)这里就不再详细介绍与讲解。

              3、大概效果截图

              在DW软件中效果截图
              在DW软件中效果截图

              从以上图看出布局结构初现。再以上基础上分别布局栏目标题和对应内容即可完成此布局。

              四、完整案例代码   -   TOP

              1、完整CSS代码

              1. @charset "utf-8"; 
              2. /* DIVCSS5-CSS初始化模板-www.tommstudio.com */ 
              3. body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif} 
              4. /* \5B8B\4F53 代表 宋体,更多中文字体转 Unicode http://www.tommstudio.com/jiqiao/j325.shtml */ 
              5. ol, ul ,li{list-style:none} 
              6. img {border: 0; vertical-align:middle} 
              7. body{color:#FFF;background:#FFF; text-align:center} 
              8. a{color:#FFF;text-decoration:none}  
              9. a:hover{color:#BA2636;text-decoration:underline} 
              10. /* 根据本实例 设置超链接字体与没有超链接字体演示为白色 */ 
              11.  
              12. #wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 
              13. /* position:relative是绝对定位关键,父级设置 */ 
              14.  
              15. .box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 
              16. .box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 
              17. .box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 
              18. /* position:absolute是绝对定位关键,子级设置同时lef right top bottom配合使用 */ 
              19.  
              20. h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} 
              21. /* 标题统一设置 */ 
              22. ul.list{ text-align:left; width:100%; padding-top:8px} 
              23. ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden} 
              24. /* 加了overflow:hidden防止内容过多后自动换行 隐藏超出内容 */ 

              2、完整HTML代码

              1. <!DOCTYPE html> 
              2. <html> 
              3. <head> 
              4. <meta charset="utf-8" /> 
              5. <title>绝对定位 实例在线演示 DIVCSS5</title> 
              6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 
              7. <!-- www.tommstudio.com --> 
              8. </head> 
              9. <body> 
              10. <div id="wrapper"> 
              11. <div class="box1"> 
              12. <h3 class="title">新闻动态</h3> 
              13. <ul class="list"> 
              14. <li><a href="http://www.tommstudio.com/wenji/w558.shtml">不会程序能学会CSS吗?</a></li> 
              15. <li><a href="http://www.tommstudio.com/wenji/w556.shtml">DIVCSS学习难吗?</a></li> 
              16. <li><a href="http://www.tommstudio.com/peixun/">我要参加DIVCSS5的培训</a></li> 
              17. <li><a href="http://www.tommstudio.com/css-tool/t720.shtml">jQuery所以版本集合整理</a></li> 
              18. </ul> 
              19. </div> 
              20. <div class="box2"> 
              21. <h3 class="title">DIVCSS5栏目</h3> 
              22. <ul class="list"> 
              23. <li><a href="http://www.tommstudio.com/html/">CSS基础教程</a></li> 
              24. <li><a href="http://www.tommstudio.com/htmlrumen/">HTML基础教程</a></li> 
              25. <li><a href="http://www.tommstudio.com/wenji/">CSS问题</a></li> 
              26. <li><a href="http://www.tommstudio.com/css-tool/">CSS制作工具</a></li> 
              27. <li><a href="http://www.tommstudio.com/jiqiao/">DIV CSS技巧</a></li> 
              28. <li><a href="http://www.tommstudio.com/css-texiao/">DIV+CSS+JS特效</a></li> 
              29. </ul> 
              30. </div> 
              31. <div class="box3"> 
              32. <h3 class="title">网站栏目</h3> 
              33. <ul class="list"> 
              34. <li><a href="http://www.tommstudio.com/cssrumen/">DIV CSS入门</a></li> 
              35. <li><a href="http://www.tommstudio.com/htmlrumen/">HTML入门教程</a></li> 
              36. <li><a href="http://www.tommstudio.com/shili/">CSS实例</a></li> 
              37. <li><a href="http://www.tommstudio.com/">DIVCSS5首页</a></li> 
              38. <li><a href="http://www.tommstudio.com/template/">DIV CSS??槟0?/span></a></li> 
              39. <li><a href="http://www.tommstudio.com/w3c/">DIV CSS WEB标准</a></li> 
              40. </ul> 
              41. </div> 
              42. </div> 
              43. </body> 
              44. </html> 

              3、效果截图

              CSS实例最终浏览器效果截图
              CSS实例最终浏览器效果截图

              五、CSS实例演示与下载   -   TOP

              1、在线演示

              查看案例

              2、完整案例下载(包括HTML+CSS+PSD文件)

              六、DIVCSS实例总结   -   TOP

              以上实例主要使用position绝对定位样式使用,通过position实现绝对定位布局。同时此案例还用到了H3、UL LI标签进行布局。希望大家一定亲自实践,这样才算真正掌握。从自己实践中会体会到真正DIVCSS5学习网布局技巧方法。

              查看另外一个div css绝对定位案例

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

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

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