设为首页 - 加入收藏
您的当前位置:主页 > 资源代码 > 效果代码 > 正文

使用DIV和CSS绝对定位的实例讲解

来源:未知 编辑:站长沙龙小陈 时间:2022-01-14 15:41

相对于定位咱们要用到名目position:absolute与position:relative,同时需要top、bottom、left、right配合组织完成DIV绝对定位。经由着实案例演示与引见相对于定位结构方法技术。


Css div绝对定位案例截图

遇到以上的不规则案例组织,要是使用float、padding等浮动实现比拟穷苦,但使用position相对于定位即可很好简单地完成。此后CSS5为大家介绍position绝对定位门径结构以上小的案例。

一、用到CSS名堂和HTML标签及相应讲明

1、要用到CSS花式单词及讲明
position:绝对定位花式完成DIV定位结构其设置值absolute与relative运用
width:宽度,配置对象宽度
height:高度,设置对象高度
line-height:行高,配置文本行高
left:配置div对象靠左距离
right:配置div对象靠左间隔
top:配置div对象靠左隔绝距离
bottom:配置div对象靠左隔断
bac公斤round:靠山,设置装备摆设后援图片与色调
color:配置字体色彩
font-size:配置字体大小
font-weight:设置字体加粗

2、用到HTML标签及诠释
div标签:用于构造结构框架
ul li标签:用于布局列表型数据列表
h3标签:用于布局栏指标题

二、相对于定位现实案例组织思维讲明先容

CSS5将潜伏翰墨后整图作为最外层大盒子DIV的后盾图片,命名为bg.jpg。


潜伏笔墨后的图片素材,可直接糊口生涯使用

这一个最外层DIV,设置好宽度高度、靠山图片,同时设置装备摆设position:relative。此盒子里分袂布局3个小DIV盒子,分袂设置装备摆设好宽度高度,同时设置position:absolute相对定位再使用left、right、top、bottom这几个花色定位好这3个盒子地位。

颠末以上组织便可结构好三个DIV盒子,再分袂构造栏指标题与内容便可实现。

同时此案例咱们可在CSS5提供的收费初始化模板根蒂前程行机关,以便兼容各大涉猎器。

三、相对于定位案例需要代码

下列是最外层DIV盒子及CSS代码与内容3个小盒子机关代码。

1、HTML代码


  1. <!DOCTYPE html> 

  2. <html> 

  3. <head> 

  4. <meta charset="utf-8" /> 

  5. <title>绝对定位 实例在线演示 CSS5</title> 

  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 

  7. <!-- css5.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软件失去,置信退出CSS5培训同砚通过上课曾经学会获取各属性和值的门径。(CSS5课堂中引见和视频哄骗演示过各值PS若何获取的技能手法)这里就不再具体先容与教学。

3、大要造诣截图

在DW软件中成绩截图

从以上图看出布局结构初现。再以上根抵上分袂机关栏目题目与对应模式便可完成此机关。

四、残缺案例代码

1、完整CSS代码


  1. @charset "utf-8"; 

  2. /* CSS5-CSS初始化模板-css5.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.css5.com.cn/jiqiao/325.shtml */ 

  5. ol, ul ,li{list-style:none} 

  6. img {border: 0; vertical-align:middle} 

  7. body{color:#FFF;bac公斤round:#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;bac千克round: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>相对定位 实例在线演示 CSS5</title> 

  6. <link href="images/style.css" rel="stylesheet" type="text/css" /> 

  7. <!-- css5.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.css5.com.cn/wenti/558.shtml">不会按次能学会CSS吗?</a></li> 

  15. <li><a href="//www.css5.com.cn/wenti/556.shtml">DIVCSS学习难吗?</a></li> 

  16. <li><a href="//www.css5.com.cn/peixun/">我要列入CSS5的培训</a></li> 

  17. <li><a href="//www.css5.com.cn/tools/720.shtml">jQuery所以版本鸠合整理</a></li> 

  18. </ul> 

  19. </div> 

  20. <div class="box2"> 

  21. <h3 class="title">CSS5栏目</h3> 

  22. <ul class="list"> 

  23. <li><a href="//www.css5.com.cn/html/">CSS根基教程</a></li> 

  24. <li><a href="//www.css5.com.cn/htmlrumen/">HTML底子教程</a></li> 

  25. <li><a href="//www.css5.com.cn/wenti/">CSS问题</a></li> 

  26. <li><a href="//www.css5.com.cn/tools/">CSS制作器材</a></li> 

  27. <li><a href="//www.css5.com.cn/jiqiao/">DIV CSS才智</a></li> 

  28. <li><a href="//www.css5.com.cn/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.css5.com.cn/css/">DIV CSS入门</a></li> 

  35. <li><a href="//www.css5.com.cn/htmlrumen/">HTML入门教程</a></li> 

  36. <li><a href="//www.css5.com.cn/shili/">CSS实例</a></li> 

  37. <li><a href="//www.css5.com.cn/">CSS5首页</a></li> 

  38. <li><a href="//www.css5.com.cn/mokuai/">DIV CSS模块模板</a></li> 

  39. <li><a href="//www.css5.com.cn/w3c/">DIV CSS WEB标准</a></li> 

  40. </ul> 

  41. </div> 

  42. </div> 

  43. </body> 

  44. </html> 

 

相关推荐:

    本文网址:http://www.shlzwl.cn/a/ziyuan/xiaoguodaima/177725.html ,喜欢请注明来源。

站长沙龙 www.shlzwl.cn 中国百万站长的福音,一站式服务。网站地图

Copyright © 2002-2019 站长沙龙 客服

Top