• 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

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

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

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

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

    1、要用到时时彩走势图后一样式单词及解释
    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.cuhw.com.cn --> 
    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.cuhw.com.cn */ 
    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 //www.cuhw.com.cn/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.cuhw.com.cn --> 
    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="//www.cuhw.com.cn/wenji/w558.shtml">不会程序能学会CSS吗?</a></li> 
    15. <li><a href="//www.cuhw.com.cn/wenji/w556.shtml">DIVCSS学习难吗?</a></li> 
    16. <li><a href="//www.cuhw.com.cn/peixun/">我要参加DIVCSS5的培训</a></li> 
    17. <li><a href="//www.cuhw.com.cn/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="//www.cuhw.com.cn/html/">CSS基础教程</a></li> 
    24. <li><a href="//www.cuhw.com.cn/htmlrumen/">HTML基础教程</a></li> 
    25. <li><a href="//www.cuhw.com.cn/wenji/">CSS问题</a></li> 
    26. <li><a href="//www.cuhw.com.cn/css-tool/">CSS制作工具</a></li> 
    27. <li><a href="//www.cuhw.com.cn/jiqiao/">DIV CSS技巧</a></li> 
    28. <li><a href="//www.cuhw.com.cn/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="//www.cuhw.com.cn/cssrumen/">DIV CSS入门</a></li> 
    35. <li><a href="//www.cuhw.com.cn/htmlrumen/">HTML入门教程</a></li> 
    36. <li><a href="//www.cuhw.com.cn/shili/">CSS实例</a></li> 
    37. <li><a href="//www.cuhw.com.cn/">DIVCSS5首页</a></li> 
    38. <li><a href="//www.cuhw.com.cn/template/">DIV CSS??槟0?/span></a></li> 
    39. <li><a href="//www.cuhw.com.cn/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标签进行布局。希望大家一定亲自实践,这样才算真正掌握。从自己实践中会体会到真正时时彩走势图后一布局技巧方法。

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

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

  • 中办印发《关于进一步激励广大干部新时代新担当新作为的意见》 2019-09-07
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-09-07
  • 【互动话题】我为两会建言献策 2019-07-18
  • 还是中国足球队最牛,因为他稳定;中国股市就不一样了,怎么形容呢?唉,还不如中国足球! 2019-07-18
  • 新生代农民工市民化与城镇化发展 2019-07-04
  • 习近平应约同俄罗斯总统普京通电话 2019-07-02
  • 中粮集团混改再按“快进键” 2019-07-02
  • 人的本质,要能反映出人与动物的本质不同。过去有个网友说“劳动是人的本质”;真理先生现说是“财富占有”!???,能解释一下么? 2019-06-30
  • [鄙视]又一个“风水帖”。深坛什么时候成了“算命平台”了?!这些伪公知砖家不深入农村了解农民,凭一点表象就信口开河,“辛苦劳作的农民没有富起来”是这“4点原因” 2019-06-22
  • 击鼓-热门标签-华商生活 2019-06-22
  • 河北定州:秸秆回收变废为宝 2019-05-14
  • 妹妹半个多世纪前嫁到安徽 八旬老人想再见她一面 2019-05-14
  • 在这里,读懂2017——人民日报十大评论文章 2019-05-14
  • 步飘恒的专栏作者中国国家地理网 2019-05-14
  • 【奋斗者说】银河麒麟孔金珠:核心技术只有靠自己干出来 2019-05-13
  • 悠洋棋牌手机版 三全中是什么意思 山西11选5三码遗漏组六 浙江快乐时时彩走势图 香港二肖中特图 内部透码黄大仙救世彩报 山西快乐十分出号规律 南通棋牌游戏大厅 福彩开奖公告 凤凰娱乐网址 青海快三开奖走势图29 大神棋牌最新版 双色球技巧 内蒙古时时彩昨天开奖 广西快3预测 最新信誉手机棋牌游戏