---
# System prepended metadata

title: 2019-09-24 上課筆記
tags: [前端程式設計]

---

# 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: `前端程式設計`