一、HTML
li：清單項目
ul：項目清單
ol：編號清單
二、無標誌與無編號
1. 沒有標誌
list-style:none;
2. 不使用編號
list-style-type: none;
三、語言與數字樣式
1. 實心圓形符號
list-style-type: disc;
- 7月 19 週一 202102:01
[ CSS ] 項目符號及編號樣式 - HTML的li與ul、ol
- 12月 26 週六 202002:43
[ CSS ] child與of-type指定位置
一、介紹
選擇位置的方法有兩種
1. child：first-child、last-child、nth-child
2. of-type：first-of-type、last-of-type、nth-of-type
二、程式語法
- 5月 21 週四 202017:24
[ CSS ] 連結a標籤的變化
一、介紹
a:link：正常
a:visited：執行過
a:hover：按下
a:active：按住
二、程式語法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style type="text/css">
a:link {
color: #DB1F22;
}
a:visited {
color: #2338DB;
}
a:hover {
color: #0F862B;
}
a:active {
color: #EDE022;
}
</style>
</head>
<body>
<a href="#">連結樣式</a>
</body>
</html>
- 5月 17 週日 202020:10
[ CSS ] 陰影效果 - 區塊與文字
一、介紹：
1. box-shadow 區塊陰影
常用於圖片、表單的周邊加上陰影
2. text-shadow 文字陰影
只用於文字上。
二、程式範例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style type="text/css">
#t1{
box-shadow:6px 6px 3px -1px #cccccc;
//區塊陰影效果 box-shadow：右移，下移，透明度範圍，增減四邊陰影大小，顏色
}
p{
text-shadow: 5px 2px 2px #088008;
//文字陰影效果 text-shadow：右移，下移，透明度範圍，顏色
}
</style>
</head>
<body>
<table width="400" border="1" id="t1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<br>
<p>文字~~~文字!!!</p>
</body>
</html>
- 5月 13 週三 202001:17
[ CSS ] border 邊框樣式屬性
一、定義
元件的都能用，例如div、表單...等
二、樣式
nono：無
dotted：點綴
dashed：虛線
solid：固體
double：雙線
groove：凹槽，顏色不能用太深會看不出來。
ridge：嶺
inset：嵌入
outset：起始
hidden：隱形
三、用法
1. 表單用double要3px才會顯示
table {
border: double #1F40AB 3px;
}
- 5月 13 週三 202000:30
[ CSS ] @media 說明 - 響應式網頁設計
一、意思
使用媒體查詢是一種流行的技術，可以向筆記本電腦，平板電腦和手機提供定制的樣式。
媒體查詢可用於檢查以下事情，例如：
1. 視窗的寬度和高度
2. 設備的寬度和高度
3. 方向（平板電腦/手機處於橫向還是縱向模式？）
4. 解析度
二、用法
1. media：
screen：用於計算機屏幕，平板電腦，智能手機等。
print：用於印表機
handheld：手持式
aural：聽覺設備
braille：盲文點字機設備
projection：投影設備
tty：聽障人士使用的 Teletype 機器
tv：電視
1
系統 (1)