下面我們來看一個分級屬性的例子，代碼如下所示：
<html>
<head>
<title> fenji css </title>
<style type=“text/css”>//*定義CSS*//
<!--
p{display：block；white-space：normal}
//*定義顯示內容為“block”，意思是在新的地區裡顯示； white-space的屬性
normal使多重空白合成為一個*//
em{display：inline}
//*定義EM的顯示內容為“inline” 目的是為了其控制下的文本顯示中不折行*//
li{display：list-item；list-style：square}
//*定義li的顯示內容為“list-item”，顯示在清單項目中加入一個符號標記， 而
list-style屬性值定義為square使清單項目前的標記為方塊*//
img{display：block} //*定義圖片屬性為block使圖片在新的位置開啟*//
-->
</style>
</head>
<body>
<p><em>sample</em>text<em>sample</em>text<em>sample</em>
text<em>sample</em> text<em>sample</em></p>//*定義一段文本*//
<ul>//*定義清單項目*// <li>list-item 1</li>
<li>list-item 2</li> <li>list-item 3</li> </ul>
<p><img src="/UploadPic/2007-4/20074114515501.jpg"” width=“280”height=“185”
alt=“invisible”></p>//*定義一幅圖片*//
</body>
</html>
上段代碼的顯示效果如下圖：
我們看到由於定義了<p>的屬性為Block，所以文本、列表、圖片都在不同的位置上開啟，Inline屬性使文本不折行，list-style-type的屬性值為square使清單項目前的符號為方塊；
如果我們在上面的代碼中做一些改動，則將以另一種效果顯示，我們在<head>中把“EM”的display屬性值改為block，使其都在新的位置開啟；li的“list-style”屬性值改為“Upper-roman”（大寫羅馬符號），img的“display”屬性值改為“none”（讓圖片不顯示）。 修改後的顯示效果如下圖：
我們看到分級屬性也能達到排版的部分功能，幾處代碼的改動就可以使頁面發生很大的變化。自己來試一試其他的效果吧！
下一節我將向您介紹滑鼠屬性。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
