---
# System prepended metadata

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

---

# 2019-10-01 上課程式碼


## 圖片樣式

### 例子一
* 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;
    background-position-x: -25px;
    /* background-position-y: -50px; */
}
```

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

### 例子二

* img.css
```css=
img {
    width: 300px;
    height: 300px;
    border-width: 1px;
    border-color: #aaaaaa;
    border-style: solid;
    border-radius: 50%;
}

#img2 {
    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;
    background-position-x: -25px;
    /* background-position-y: -50px; */
}

.center {
    text-align: center;
    color: red;
}
```


* 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="燈塔"> 這段字會和img同行
    <div class="center">這裡要上下要有點空白</div>
    <div id="img2"></div>
</body>

</html>
```

### 例子三

* img.css
```css=
img {
    width: 300px;
    height: 300px;
    border-width: 1px;
    border-color: #aaaaaa;
    border-style: solid;
    border-radius: 50%;
}

#img2 {
    height: 290px;
    width: 290px;
    border-style: solid;
    border-width: 1px;
    border-color: #666666;
    border-radius: 50%;
    /* background-color: #2196F3; */
    background-image: url(../img/01.jpg);
    background-size: cover;
    background-position-x: -25px;
    /* background-position-y: -50px; */
}

.center {
    text-align: center;
    color: red;
}

.img-center {
    margin-left: auto;
    margin-right: auto;
}

.border {
    border-style: solid;
    border-width: 1px;
    border-color: #00aabb;
    padding: 5px;
}

.img-radius {
    border-radius: 50%;
    height: 300px;
    width: 300px;
}
```
* img.hrml
```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 class="border" src="./img/01.jpg" alt="燈塔"> 這段字會和img同行
    <div class="center border">這裡上下要有點空白</div>
    <div id="img2" class="img-center"></div>

</body>

</html>
```

## span練習

* text.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>span 練習</title>
    <link rel="stylesheet" href="./css/text.css">
</head>

<body>
    <h1>出師表 <span id="p1">諸葛亮</span></h1>

    <p id="p1">臣亮言：先帝創業未半，而中道崩殂。今天下三分，益州 疲弊，此誠危急存亡之秋也。然侍衛之臣，不懈於內；忠志之 士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開 張聖聽，以光先帝遺德，恢弘志士之氣；不宜妄自菲薄，引喻 失義，以塞忠諫之路也。宮中府中，俱為一體，陟罰臧否，不 宜異同。若有作姦犯科，及為忠善者，宜付有司，論其刑賞， 以昭陛下平明之治，不宜篇私，使內外異法也。
    </p>
    <p>侍中、侍郎 <span class="name">郭攸之</span>、<span class="name">費褘</span>、<span class="name">董允</span>等，此皆良實，志慮忠純 ，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以 咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行 淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議 舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優 劣得所。親賢臣，遠小人，此先漢所以興隆也；親小人，遠賢 臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎
        息痛恨於桓、靈也。侍中、尚書、長史；參軍，此悉貞良死節 之臣也，願陛下親之信之，則漢室之隆，可計日而待也。
    </p>
</body>

</html>
```

* text.css

```css=
h1 {
    color: #0099dd;
}

span#p1 {
    font-size: 20px;
    color: #888888;
}

span.name {
    color: #0000FF;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 2px;
}
```


* 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>
</head>

<body>
    <h1>這是標題</h1>
    <p>這是段落</p>

    <a href="https://www.google.com">Google</a>
    <br>
    <a href="Emmet.html">Emmet 快速鍵</a>
    <br>
    <a href="./table.html" target="_blank">Table 練習</a>
    <br>
    <a href="./text.html" target="_blank">span 練習</a>
</body>

</html>
```


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