# 2019-09-24 上課筆記 ## 表格練習 * table.html ```htmlmixed= <!DOCTYPE html> <html lang="en"> <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> </head> <body> <h1>作業成績</h1> <table border="1px"> <tr> <th>學號</th> <th>姓名</th> <th>分數</th> </tr> <tr> <td>b001</td> <td>張三</td> <td>34</td> </tr> <tr> <td>b002</td> <td>李四</td> <td>76</td> </tr> <tr> <td>b003</td> <td>王五</td> <td>100</td> </tr> </table> <hr> <!-- table>(tr>th*3)+(tr>td*3)*3 --> <table> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html> ``` ## 圖片樣式 * img.css ```css= img { width: 300px; height: 300px; border-width: 1px; border-color: #aaaaaa; border-style: solid; border-radius: 50%; } div { height: 300px; width: 300px; border-style: solid; border-width: 1px; border-color: #666666; border-radius: 50%; /* background-color: #2196F3; */ background-image: url(../img/01.jpg); background-size: cover; } ``` * img.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 rel="stylesheet" href="./css/img.css"> </head> <body> <img src="./img/01.jpg" alt="燈塔"> <div></div> </body> </html> ``` ###### tags: `前端程式設計`