菜鸟教程在线编辑器

AI 编程工具
 
                <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {color: red;font-weight:bold;}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>

<h1>display 属性</h1>

<h2>display: none:</h2>
<div>
君者，舟也；庶人者，水也。 <p class="ex1">这里测试效果!</p> 水则载舟，水则覆舟。
</div>

<h2>display: inline:</h2>
<div>
君者，舟也；庶人者，水也。 <p class="ex2">这里测试效果!</p> 水则载舟，水则覆舟。
</div>

<h2>display: block:</h2>
<div>
君者，舟也；庶人者，水也。 <p class="ex3">这里测试效果!</p> 水则载舟，水则覆舟。
</div>

<h2>display: inline-block:</h2>
<div>
君者，舟也；庶人者，水也。 <p class="ex4">这里测试效果!</p> 水则载舟，水则覆舟。
</div>

</body>
</html>
              