作为一个前端学习的新手,学习css这块内容还是挺吃力的,所以经常去看看视频,对自己快速掌握很有帮助,今天看到一个很不错的案例。
新手在页面布局时往往很依赖div来分割页面,例如下面这个页面:
这是一个聊天的页面,页面有头像,ID,聊天内容以及时间。看到这个页面我的第一思路是用三个div来进行操作。首先一个大的div,在大的div中分左右两个子div, 然后在左div中添加图片,右边的div中添加文本信息。代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>talk</title>
<style type="text/css">
body{margin:0; padding:0;}
.demo1{width:620px; position:relative; overflow:hidden}
.demo1 .left{width:100px; float:left}
.demo1 .left img{margin-left:20px; }
.demo1 .right{width:458px; padding:20px; float:right; background: #07c; border: #999 1px}
.demo1 .right p{ line-height:25px; font-size:16px;}
.demo1 .right span{ position:absolute; top:20px; right:20px;
font-size:15px}
<body>
<div class="demo1">
<div class="left">
<img src="../../../picture/头像.png" width="80" height="100" /> </div>
<div class="right">
<h3>大智若愚</h3>
<p>上周,Mozilla已于全球发布了Firefox OS 2.5版本,同时发布了早期的测试版本——Firefox OS 2.5开发者预览版(Developer Preview)App,可供开发者下载至 Android设备上一睹为快。目前最新版本的Firefox OS提供以下功能:
· 附加组件:如同大家在PC桌面版浏览器所爱用的附加组件(Add-on),Firefox OS附加组件现可扩增为单一App、多个App,甚至可作为系统App。
· 隐私浏览模式搭配追踪保护(Tracking Protection)功能:追踪保护为Firefox的隐私新功能,让用户可跨多个网站控制本身浏览活动受到追踪的方式。
·</p>
<span>18分钟前</span>
</div>
</div>
</body>
</html>
overflow:hidden
这一句很关键,它可以解决float带来的缺陷,float不仅可以水平浮动,还可以立体浮动,
overflow:hidden清除了浮动,保证了格式的正确。
但是三个div对于这个页面来说,没有必要,可以缩减为两个div,将左边的div去掉,样式表:
.demo2{width:620px; position:relative; overflow:hidden}
.demo2 img{float:left; margin-left:20px}
.demo2 .right{width:458px; padding:20px; float:right; background: #07c; border: #999 1px}
.demo2 .right p{ line-height:25px; font-size:16px;}
.demo2 .right span{ position:absolute; top:20px; right:20px;
font-size:15px}
主体为:
<div class="demo2">
<img src="../../../picture/头像.png" width="80" height="100" />
<div class="right">
<h3>大智若愚</h3>
<p>上周,Mozilla已于全球发布了Firefox OS 2.5版本,同时发布了早期的测试版本——Firefox OS 2.5开发者预览版(Developer Preview)App,可供开发者下载至 Android设备上一睹为快。目前最新版本的Firefox OS提供以下功能:
· 附加组件:如同大家在PC桌面版浏览器所爱用的附加组件(Add-on),Firefox OS附加组件现可扩增为单一App、多个App,甚至可作为系统App。
· 隐私浏览模式搭配追踪保护(Tracking Protection)功能:追踪保护为Firefox的隐私新功能,让用户可跨多个网站控制本身浏览活动受到追踪的方式。
·</p>
<span>18分钟前</span>
</div>
</div>
这样减少了div的使用,还完全实现了功能。
其实我们还可以进一步优化代码,再减少一个div,样式表为:
.demo3{width:458px; padding:20px; background: #07c; border: #999 1px; margin-left:120px; position:relative}
.demo3 img{float:left; margin:-20px 0 0 -120px}
.demo3 p{ line-height:25px; font-size:16px;}
.demo3 span{ position:absolute; top:20px; right:20px;}
主体为:
<div class="demo3">
<img src="../../../picture/头像.png" width="80" height="100" />
<h3>大智若愚</h3>
<p>上周,Mozilla已于全球发布了Firefox OS 2.5版本,同时发布了早期的测试版本——Firefox OS 2.5开发者预览版(Developer Preview)App,可供开发者下载至 Android设备上一睹为快。目前最新版本的Firefox OS提供以下功能:
· 附加组件:如同大家在PC桌面版浏览器所爱用的附加组件(Add-on),Firefox OS附加组件现可扩增为单一App、多个App,甚至可作为系统App。
· 隐私浏览模式搭配追踪保护(Tracking Protection)功能:追踪保护为Firefox的隐私新功能,让用户可跨多个网站控制本身浏览活动受到追踪的方式。
</p>
<span>18分钟前</span>
</div>
这样就把原来的三个div缩减为一个div,优化了代码。这里不得不提到这一句:
.demo3 img{float:left; margin:-20px 0 0 -120px}
margin的值是负的,可以实现图片移出边框。
三个代码效果都一样: