遇到以上的不规则案例布局,如果使用float、padding等浮动实现比较麻烦,但使用position绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。
一、用到CSS样式和HTML标签及相应解释 - TOP
DIVCSS5将隐藏文字后整图作为最外层大盒子DIV的背景图片,命名为bg.jpg。
这一个最外层DIV,设置好宽度高度、背景图片,同时设置position:relative。此盒子里分别布局3个小DIV盒子,分别设置好宽度高度,同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。
通过以上布局即可布局好三个DIV盒子,再分别布局栏目标题和内容即可实现。
同时此案例我们会在DIVCSS5提供的免费初始化模板基础上进行布局,以便兼容各大浏览器。
以下是最外层DIV盒子及CSS代码和内容3个小盒子布局代码。
- >
- html>
- head>
- metacharset='utf-8'/>
- title>绝对定位 实例在线演示 DIVCSS5title>
- linkhref='images/style.css'rel='stylesheet'type='text/css'/>
- head>
- body>
- divid='wrapper'>
- divclass='box1'>div>
- divclass='box2'>div>
- divclass='box3'>div>
- div>
- body>
- html>
以上HTML布局一个大盒子使用ID,里面三个小DIV盒子使用CLASS。
- #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如何获得的技术技巧)这里就不再详细介绍与讲解。
从以上图看出布局结构初现。再以上基础上分别布局栏目标题和对应内容即可完成此布局。
- @charset 'utf-8';
- /* DIVCSS5-CSS初始化模板-www.divcss5.com */
- body, div, ul, li,h3{margin:0; padding:0;font-style: normal;font:12px/22px '\5B8B\4F53',Arial, Helvetica, sans-serif}
- /* \5B8B\4F53 代表 宋体,更多中文字体转 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防止内容过多后自动换行 隐藏超出内容 */
- >
- html>
- head>
- metacharset='utf-8'/>
- title>绝对定位 实例在线演示 DIVCSS5title>
- linkhref='images/style.css'rel='stylesheet'type='text/css'/>
- head>
- body>
- divid='wrapper'>
- divclass='box1'>
- h3class='title'>新闻动态h3>
- ulclass='list'>
- li>ahref='http://www.divcss5.com/wenji/w558.shtml'>不会程序能学会CSS吗?a>li>
- li>ahref='http://www.divcss5.com/wenji/w556.shtml'>DIVCSS学习难吗?a>li>
- li>ahref='http://www.divcss5.com/peixun/'>我要参加DIVCSS5的培训a>li>
- li>ahref='http://www.divcss5.com/css-tool/t720.shtml'>jQuery所以版本集合整理a>li>
- ul>
- div>
- divclass='box2'>
- h3class='title'>DIVCSS5栏目h3>
- ulclass='list'>
- li>ahref='http://www.divcss5.com/html/'>CSS基础教程a>li>
- li>ahref='http://www.divcss5.com/htmlrumen/'>HTML基础教程a>li>
- li>ahref='http://www.divcss5.com/wenji/'>CSS问题a>li>
- li>ahref='http://www.divcss5.com/css-tool/'>CSS制作工具a>li>
- li>ahref='http://www.divcss5.com/jiqiao/'>DIV CSS技巧a>li>
- li>ahref='http://www.divcss5.com/css-texiao/'>DIV+CSS+JS特效a>li>
- ul>
- div>
- divclass='box3'>
- h3class='title'>网站栏目h3>
- ulclass='list'>
- li>ahref='http://www.divcss5.com/cssrumen/'>DIV CSS入门a>li>
- li>ahref='http://www.divcss5.com/htmlrumen/'>HTML入门教程a>li>
- li>ahref='http://www.divcss5.com/shili/'>CSS实例a>li>
- li>ahref='http://www.divcss5.com/'>DIVCSS5首页a>li>
- li>ahref='http://www.divcss5.com/template/'>DIV CSS模块模板a>li>
- li>ahref='http://www.divcss5.com/w3c/'>DIV CSS WEB标准a>li>
- ul>
- div>
- div>
- body>
- html>
2、完整案例下载(包括HTML+CSS+PSD文件)
以上实例主要使用position绝对定位样式使用,通过position实现绝对定位布局。同时此案例还用到了H3、UL LI标签进行布局。希望大家一定亲自实践,这样才算真正掌握。从自己实践中会体会到真正DIV CSS布局技巧方法。
我要分享到: