# 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`