---
# System prepended metadata

title: 2019-10-08 上課程式碼
tags: [前端程式設計, 108-1]

---

# 2019-10-08 上課程式碼


## 按扭樣式

* button.css
```css=
.btn {
    /* border-style: solid; */
    /* border-width: 1px; */
    text-decoration: none;
    border-radius: 5px;
    padding: 6px;
    /* border-color: #777777; */
    background-color: #dddddd;
    color: #222222;
    box-shadow: inset -4px -4px 5px 0px #7b7b7b;
    border-color: #bbbbbb;
}

.btn:hover {
    background-color: #777777;
    color: #ffffff;
    box-shadow: inset -4px -4px 5px #333333;
}

.btn-green {
    background-color: #4CAF50;
    box-shadow: inset -4px -4px 5px #2E692E;
}

.btn-green:hover {
    background-color: #2e6931;
    box-shadow: inset -4px -4px 5px #153115;
}

div>a:nth-child(2n+0) {
    background-color: #4CAF50;
    box-shadow: inset -4px -4px 5px #2E692E;
}

div>a:nth-child(2n+0):hover {
    background-color: #2e6931;
    box-shadow: inset -4px -4px 5px #153115;
}
```

* index.css

```css=
body {
    font-family: 'Noto Sans TC', sans-serif;
}
```

* index.html

```htmlmixed=
<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>前端程式設計</title>

    <!-- 引用思源黑體字形 -->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="./css/index.css">

    <!-- 自訂義按鈕樣式 -->
    <link rel="stylesheet" href="./css/button.css">
</head>

<body>
    <h1>前端程式設計</h1>
    <p>課堂範例</p>

    <a class="btn" href="Emmet.html">Emmet 快速鍵</a>

    <a href="./table.html" target="_blank">Table 練習</a>

    <a href="./img.html" target="_blank">圖片練習</a>

    <a href="./text.html" target="_blank">span 練習</a>
</body>

</html>
```

###### tags: `前端程式設計` `108-1`