1. 列表
這裏的列表樣式指的是無序列表u1、有序列表ol的共用樣式
1.1 list-style
表示將列表的所有子樣式，都放在一個屬性當中聲明出來
1.2 list-style-image
它可以規定這個列表的標號是一幅圖片，起到美化界面的效果
1.2.1 文件組織形式
images內是一幅作爲標號的圖片
1.2.2 測試代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#othernews {
text-align:left;
font-size:14px;
line-height:1.5em;
list-style-image:url(images/bullet1.gif);
}
a:link {
color: #09f;/*淺藍*/
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #930;/*紅*/
}
a:hover {
text-decoration: underline;
color: #03c;/*深藍*/
}
a:active {
text-decoration: none;
color: #03c;/*深藍*/
}
</style>
</head>
<body>
<div id = "othernews">
相關閱讀:
<ul>
<li><a href="#" >迪拜華商財富縮水 瞻望前景信心猶豫</a></li>
<li><a href="#" >全球華商總資產恢復增至3.9萬億美元</a></li>
<li><a href="#" >華商基金胡宇權：行業不平衡將帶來投資機會</a></li>
</ul>
</div>
</body>
</html>
1.2.4 效果圖
可以看到標號前是一副圖片
1.3 list-style-type
type屬性設置標誌的類型，對於無序和有序列表可以取得以下的值：
其中前五條針對的是無序列表，第六條開始的表示的數字部分是針對有序列表
1.4 list-style-position
它設置的是這個標號或者說標誌的位置，常用的有inside和outside兩個取值
1.4.1 測試代碼
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.inside{
list-style-position: inside;
}
.outside{
list-style-position: outside;
}
</style>
</head>
<body>
<ul class="inside">
<li>HTML——網頁結構</li>
<li>CSS——網頁樣式</li>
<li>S——網頁交互</li>
</ul>
<ul class="outside">
<li>HTML-網頁結構</li>
<li>CSS——網頁樣式</li>
<li>S——網頁交互</li>
</ul>
</body>
</html>
1.4.2 效果圖
第一段無序列表它的標號是向右縮進到豎線列表的區域之內，第二種無序列表它的標號是突出在這個列表它的左側，這是inside和outside-個區別
2. 表格
2.1 基本屬性
2.2 基本屬性測試代碼
2.2.1 寬高邊界
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width: 500px;
height: 200px;
}
table,td{
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
</table>
</body>
</html>
“table，td”表示同時設置表格和單元格的屬性
2.2.2 collapse屬性
table{
width: 500px;
height: 200px;
border-collapse: collapse;
}
在上述代碼的table選擇器中添加border-collapse的設定，效果如下：
可以看到表格的邊框和單元格的邊框被合併了，將border-collapse設置成collapse，也就是疊加或者是坍縮的意思，這樣表格邊框和單元格邊框就重疊成一個了
2.3 奇偶選擇器
表格在星現數據的時候，爲了方便觀看，格行顯示不同的顏色，這種情況下我們用到一種特殊的選擇器，這種選擇器被稱爲奇偶選擇器
2.3.1 基本語法
tr:nth-child(odd){
background-color:#EAF2D3;
}
/*表示：tr的父元素table的奇數個子元素，不管這些子元素是tr還是th*/
2.3.2 測試代碼及效果圖
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
width: 500px;
height: 200px;
border-collapse: collapse;
}
table,td{
border: 1px solid #eee;
}
tr:nth-child(odd){
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table>
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
</table>
</body>
</html>
可以看到即使是第一行是th標籤，奇偶選擇器也是從第一行就開始生效，我們設計表格時往往表頭是另一種顏色，這是我們就需要對th標籤的樣式再設置以下，我們在上述代碼中添加：
th{
background-color:olivedrab;
}
這個時候我們想要的效果出來了