. DIV CSS绝对定位布局案例 position布局实例 - 长沙天助网
欢迎进入【长沙天助网】一站式网站建设服务平台!
公司官网 服务标准 网站建设
建站上【长沙天助网】建站服务平台企业花一样的钱,做不一样的网站!

全国销售热线:
130-8055-9997

全国客服热线:
0731-83299082

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

2017-02-17 15:56:21   来自:tuiweb.cn
 DIVCSS5为大家实例讲解绝对定位布局。绝对定位我们要用到样式position:absolute和position:relative,同时需要top、bottom、left、right配合布局实现DIV绝对定位。通过真实案例演示与介绍绝对定位布局方法技术。
Css div绝对定位案例截图遇到以上的不规则案例布局,如果使用float、padding等浮动实现比较麻烦,但使用position绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。一、用到CSS样式和HTML标签及相应解释   -   TOP1、要用到CSS样式单词及解释
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标签:用于布局栏目标题二、绝对定位实际案例布局思维解释介绍   -   TOPDIVCSS5将隐藏文字后整图作为最外层大盒子DIV的背景图片,命名为bg.jpg。
隐藏文字后的图片素材,可直接保存使用这一个最外层DIV,设置好宽度高度、背景图片,同时设置position:relative。此盒子里分别布局3个小DIV盒子,分别设置好宽度高度,同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。通过以上布局即可布局好三个DIV盒子,再分别布局栏目标题和内容即可实现。同时此案例我们会在DIVCSS5提供的免费初始化模板基础上进行布局,以便兼容各大浏览器。三、绝对定位案例重要代码   -   TOP以下是最外层DIV盒子及CSS代码和内容3个小盒子布局代码。1、HTML代码
<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>绝对定位 实例在线演示 DIVCSS5</title> 

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

<!-- www.divcss5.com --> 

</head> 

<body> 

<div id="wrapper"> 

<div class="box1"></div> 

<div class="box2"></div> 

<div class="box3"></div> 

</div> 

</body> 

<ml> 
以上HTML布局一个大盒子使用ID,里面三个小DIV盒子使用CLASS。2、CSS代码
#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 

/* position:relative是绝对定位关键,父级设置 */ 

.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 

.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 

.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 

/* 三个小盒子使用position:relative同时设置宽度 高度 left right top bottom实现布局与准确定位 */ 
特别说明:以上三个小盒子绝对定位宽度、高度、top、left、right、bottom的准确值必须通过PS软件获得,相信参加DIVCSS5培训同学通过上课已经学会获取各属性和值的方法。(DIVCSS5课堂中介绍和视频操作演示过各值PS如何获得的技术技巧)这里就不再详细介绍与讲解。3、大概效果截图
在DW软件中效果截图从以上图看出布局结构初现。再以上基础上分别布局栏目标题和对应内容即可完成此布局。四、完整案例代码   -   TOP1、完整CSS代码
@charset "utf-8"; 

/* DIVCSS5-CSS初始化模板-www.divcss5.com */ 

body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px "5B8B4F53",Arial, Helvetica, sans-serif} 

/* 5B8B4F53 代表 宋体,更多中文字体转 Unicode http://www.divcss5.com/jiqiao/j325.shtml */ 

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

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

body{color:#FFF;background:#FFF; text-align:center} 

a{color:#FFF;text-decoration:none}  

a:hover{color:#BA2636;text-decoration:underline} 

/* 根据本实例 设置超链接字体与没有超链接字体演示为白色 */ 

 

#wrapper{ margin:0 auto;position:relative;width:610px;height:559px;background:url(bg.jpg) no-repeat} 

/* position:relative是绝对定位关键,父级设置 */ 

 

.box1{ position:absolute; width:147px; height:140px; left:198px; top:14px} 

.box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px} 

.box3{position:absolute; width:132px; height:188px; right:28px; bottom:67px} 

/* position:absolute是绝对定位关键,子级设置同时lef right top bottom配合使用 */ 

 

h3.title{ height:32px; line-height:32px; font-size:14px; font-weight:bold; text-align:left} 

/* 标题统一设置 */ 

ul.list{ text-align:left; width:100%; padding-top:8px} 

ul.list li{ width:100%; text-align:left; height:22px;overflow:hidden} 

/* 加了overflow:hidden防止内容过多后自动换行 隐藏超出内容 */ 


上一篇:联系我们 下一篇:企业网站设计边框设计来增色