<div>Box-2</div>
<div>Box-3</div>
<span>Box-4</span>
<span>Box-5</span>
<span>Box-6</span>
<div>Box-7</div>
<span>Box-8</span>
2、为HTML内容定义CSS样式:
<div style="display:inline">Box-1</div>
<div style="display:inline">Box-2</div>
<div style="display:inline">Box-3</div>
<span style="display:block">Box-4</span>
<span style="display:block">Box-5</span>
<span style="display:block">Box-6</span>
<div style="display:none">Box-7</div>
<span style="display:none">Box-8</span>
把前三个块级标级<div>展示样式定义为inline(即按行级样式进行展示);同时把中间三个行级<span>展示样式定义为block(即按块级样式进行展示);把最后块级<div>和行级<span>两个展示样式定义none(即不显示),其效果如下:
其实display是一个非常有用的属性,通过设置它的显示与否形成动画效果,下面一段代码来源于w3school的教程:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("p").click(function()
{
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body>
</html>
这段代码引入了JQuery,后面会陆续涉及到,目前看不懂没有关系,它的意思是说当单击<p>标记的内容时,它会自动隐藏,其中的$(this).hide()就是JQuery封装了display:none属性。