1.專案符號樣式list-style-type
無序列表：none disc circle square(無，黑點，圓圈，方格)
有序列表：decimal decimal-leading-zero,lower-alpha,upper-alpha,lower_roman,upper-roman
<!DOCTYPE html>
<html>
<head>
<title>List Style Type</title>
<style type="text/css">
ol {
list-style-type: lower-roman;}
</style>
</head>
<body>
<h1>The Complete Poems</h1>
<h2>Emily Dickinson</h2>
<ol>
<li>Life</li>
<li>Nature</li>
<li>Love</li>
<li>Time and Eternity</li>
<li>The Single Hound</li>
</ol>
</body>
</html>
2.專案影像
list-style-iamge
<!DOCTYPE html>
<html>
<head>
<title>List Style Image</title>
<style type="text/css">
ul {
list-style-image: url("images/star.png");}
li {
margin: 10px 0px 0px 0px;}
</style>
</head>
<body>
<h1>Index of Translated Poems</h1>
<h2>Arthur Rimbaud</h2>
<ul>
<li>Ophelia</li>
<li>To Music</li>
<li>A Dream for Winter</li>
<li>Vowels</li>
<li>The Drunken Boat</li>
</ul>
</body>
</html>
3.標記的定位
list-style-position
outside:標記位於文字塊的左側
inside:標記位於文字塊的內部，並縮排文字塊。
<!DOCTYPE html>
<html>
<head>
<title>List Style Position</title>
<style type="text/css">
ul {
width: 250px;}
li {
margin: 10px;}
ul.illuminations {
list-style-position: outside;}
ul.season {
list-style-position: inside;}
</style>
</head>
<body>
<h3>Illuminations</h3>
<ul class="illuminations">
<li>That idol, black eyes and yellow mop, without parents or court ...</li>
<li>Gracious son of Pan! Around your forehead crowned with flowerets ...</li>
<li>When the world is reduced to a single dark wood for our four ...</li>
</ul>
<h3>A Season in Hell</h3>
<ul class="season">
<li>Once, if my memory serves me well, my life was a banquet ...</li>
<li>Hadn't I once a youth that was lovely, heroic, fabulous ...</li>
<li>Autumn already! - But why regret the everlasting sun if we are ...</li>
</ul>
</body>
</html>
4.list-style略寫，快捷方式。
ul {
list-style: inside circle;
width: 300px;}
li {
margin: 10px 0px 0px 0px;}
5.表格屬性
width:寬度
padding:每個單元格邊框與其內容之間的空隙
text-transform將表格標題中的內容轉換為大寫。
letter-spacing,font-size字型間隔，字型大小
border-top.border-bottom表格邊框
text-align文字對齊
background-color背景色
:hover懸停
<!DOCTYPE>
<html>
<head>
<title>Table Properties</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #111111;}
table {
width: 600px;}
th, td {
padding: 7px 10px 10px 10px;}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;}
tr.even {
background-color: #efefef;}
tr:hover {
background-color: #c3e6e5;}
.money {
text-align: right;}
</style>
</head>
<body>
<h1>First Edition Auctions</h1>
<table>
<tr>
<th>Author</th>
<th>Title</th>
<th class="money">Reserve Price</th>
<th class="money">Current Bid</th>
</tr>
<tr>
<td>E.E. Cummings</td>
<td>Tulips & Chimneys</td>
<td class="money">$2,000.00</td>
<td class="money">$2,642.50</td>
</tr>
<tr class="even">
<td>Charles d'Orleans</td>
<td>Poemes</td>
<td class="money"></td>
<td class="money">$5,866.00</td>
</tr>
<tr>
<td>T.S. Eliot</td>
<td>Poems 1909 - 1925</td>
<td class="money">$1,250.00</td>
<td class="money">$8,499.35</td>
</tr>
<tr class="even">
<td>Sylvia Plath</td>
<td>The Colossus</td>
<td class="money"></td>
<td class="money">$1031.72</td>
</tr>
</table>
</body>
</html>
6.空單元格的邊框empty-cells
（1）show顯示（2）hide隱藏（3）inherit繼承
<!DOCTYPE html>
<html>
<head>
<title>Empty Cells</title>
<style type="text/css">
td {
border: 1px solid #0088dd;
padding: 15px;}
table.one {
empty-cells: show;}
table.two {
empty-cells: hide;}
</style>
</head>
<body>
<table class="one">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
<table class="two">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
</table>
</body>
</html>
7.單元格之間的空隙
border-spacing 產生空隙
border-collapse 單元格會擠壓到一起
<!DOCTYPE html>
<html>
<head>
<title>Gaps Between Cells</title>
<style type="text/css">
td {
background-color: #0088dd;
padding: 15px;
border: 2px solid #000000;}
table.one {
border-spacing: 5px 15px;}
table.two {
border-collapse: collapse;}
</style>
</head>
<body>
<table class="one">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table class="two">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>