<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{ background: #06F;}
.box01{background: #0F3;width: 800px; height: 200px;}
.box02{background: #669;width: 500px; height: 300px;}
.box03{background: blueviolet;width:800px; height: 200px;}
.box-fd{float: left;}
.clear{clear: left;}
.p01{background: #36f;}
.p02{background: #666;}
.p03{background: #c0c;}
.p-display{display: inline; display: inline-block; margin: 0 -3px;}/*块级改成内联*//*inline-block块改成内联保持块的属性*/
.span01{ background: beige;}
.span02{ background: red;}
.span03{ background: greenyellow;}
.span-display{ display: block; width: 100px;}/*内联改变成块*/
</style>
</head>
<body>
<div id="box">
<div class="box01 box-fd">box01</div>
<div class="box02 box-fd">box02</div>
<div class="box03 box-fd">box03</div>
<div class="clear"></div>
</div>
<p class="p01 p-display">林兴</p>
<p class="p02 p-display">林兴</p>
<p class="p02 p-display">林兴</p>
<span class="span01 span-display">林兴2</span>
<span class="span02 span-display>林兴2</span>
<span class="span03 span-display>林兴2</span>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{ background: #06F;}
.box01{background: #0F3;width: 800px; height: 200px;}
.box02{background: #669;width: 500px; height: 300px;}
.box03{background: blueviolet;width:800px; height: 200px;}
.box-fd{float: left;}
.clear{clear: left;}
.p01{background: #36f;}
.p02{background: #666;}
.p03{background: #c0c;}
.p-display{display: inline; display: inline-block; margin: 0 -3px;}/*块级改成内联*//*inline-block块改成内联保持块的属性*/
.span01{ background: beige;}
.span02{ background: red;}
.span03{ background: greenyellow;}
.span-display{ display: block; width: 100px;}/*内联改变成块*/
</style>
</head>
<body>
<div id="box">
<div class="box01 box-fd">box01</div>
<div class="box02 box-fd">box02</div>
<div class="box03 box-fd">box03</div>
<div class="clear"></div>
</div>
<p class="p01 p-display">林兴</p>
<p class="p02 p-display">林兴</p>
<p class="p02 p-display">林兴</p>
<span class="span01 span-display">林兴2</span>
<span class="span02 span-display>林兴2</span>
<span class="span03 span-display>林兴2</span>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
