---
# System prepended metadata

title: 學生版_單元七 寫一座美麗城市 (繪圖)
tags: [2-13, sass，學生版, 動畫互動網頁特效入門（JS/CANVAS）, 互動程式設計]

---

---
tags: 互動程式設計,2-13,sass，學生版,動畫互動網頁特效入門（JS/CANVAS）
---
# 學生版_單元七 寫一座美麗城市 (繪圖)



## 前一章節的sass內容
### sass內容
```sass=
//指定顏色變數
$colorBlueRoofLight: #6fc5ff
$colorBlueRoofDark: #0058ff

$colorGreyLight: #fafaf5
$colorGreyNormal: #e3e2cf
$colorGreyDark: #bebdaf
$colorBackground: #2C2F36

$colorShadowBlue: #7cb1ff
$colorShadowBlueLight: #8dc9fc

$colorWindowGrey: #534d4d


//定義漸層

//屋頂的漸層
$roofGradient: linear-gradient(150deg, $colorBlueRoofLight, $colorBlueRoofDark)
//一整條從白天到晚上的背景顏色
$sceneGradient: linear-gradient(#1D2B49,#1A45A0,#91cdff,#fff)



//設定字體
@import url('https://fonts.googleapis.com/css?family=Playfair+Display')

*  
  font-family: "Playfair Display","微軟正黑體"
  
//會先找第一個字體，找不到中文字體就會往第二個字體




//設定Mixins
@mixin size($w,$h:$w,$bdrs:0)
  width: $w
  height: $h
  border-radius: $bdrs
  
@mixin flex($j:center,$a:center)
  display: flex
  justify-content: $j //主軸線:左右
  align-items: $a  //副軸線:上下

@mixin abpos($l:initial,$t:initial)
  position: absolute
  left: $l
  top: $t

```


---
## sass 變數色卡網頁工具
https://codepen.io/frank890417/pen/MpKebd
![](https://i.imgur.com/1kpB0Zt.png)

### sass內容

```sass=
$colorBlueRoofLight: #6fc5ff
$colorBlueRoofDark: #0058ff

$colorGreyLight: #fafaf5
$colorGreyNormal: #e3e2cf
$colorGreyDark: #bebdaf
$colorBackground: #2C2F36

$colorShadowBlue: #7cb1ff
$colorShadowBlueLight: #8dc9fc

$colorWindowGrey: #534d4d
```
---
## 加上框線與絕對位置
### sass內容
```sass=




```



---
## 設定網頁與場景的寬高
### sass內容
```sass=
html,body
  +size(100%)
  margin:0
  +flex
.scene
  +size(700px,500px,15px)
```



---
## 文字內容設定
### pug內容
```pug=
.scene
  .lefttopText
    h5 A DAY<br> ON THE ISLAND
    h1 Aegean Sea<br> Night Sky
    p 動態互動<br>互動程式設計<br><br>基礎HTML/CSS練習
```

---
### sass內容
```sass=



```


---
## 加入第一個房子

![](https://i.imgur.com/FXBRXmk.png)



---
### pug內容
```pug



```


---

### sass內容
```sass=




```



---
## 第二個房子(1)

![](https://i.imgur.com/vlBEDAB.png)
### pug內容
```pug



```



---
### sass內容
```sass=





```



---
## 第二個房子(門)

![](https://i.imgur.com/uKqfvBf.png)
### sass內容
```sass=




```

---
## 第三個房子外加三面牆與三個窗子

![](https://i.imgur.com/WntUePw.png)



---
### pug內容

```pug=



```



---
### sass內容
```sass=



```

---
## 畫屋頂

![](https://i.imgur.com/IFCfDUX.png)



---
### pug內容
```pug=
.scene
  .lefttopText
    .blueblock
    h5 A DAY<br> ON THE ISLAND
    h1 Aegean Sea<br> Night Sky
    p 動態互動<br>互動程式設計<br><br>基礎HTML/CSS練習
  .building
    .house1
      .window
        .circle 
        .circle 
        .circle
    .house2
      .door
    .house3
      .wall
        .window 
      .wall
        .window 
      .wall
        .window
      .roof
        .rooftop
          .cross
```


---
### sass內容
```sass=



  
```


---

![](https://i.imgur.com/UF1uXHU.png)

### sass內容

```sass=
//指定顏色變數
$colorBlueRoofLight: #6fc5ff
$colorBlueRoofDark: #0058ff

$colorGreyLight: #fafaf5
$colorGreyNormal: #e3e2cf
$colorGreyDark: #bebdaf
$colorBackground: #2C2F36

$colorShadowBlue: #7cb1ff
$colorShadowBlueLight: #8dc9fc

$colorWindowGrey: #534d4d
//定義漸層

//屋頂的漸層
$roofGradient: linear-gradient(150deg, $colorBlueRoofLight, $colorBlueRoofDark)
//一整條從白天到晚上的背景顏色
$sceneGradient: linear-gradient(#1D2B49,#1A45A0,#91cdff,#fff)

//設定字體
@import url('https://fonts.googleapis.com/css?family=Playfair+Display')

*,*:before,*:after
  font-family: "Playfair Display","微軟正黑體"
  border: solid 2px black
  position: relative
//會先找第一個字體，找不到中文字體就會往第二個字體

//設定Mixins
@mixin size($w,$h:$w,$bdrs:0)
  width: $w
  height: $h
  border-radius: $bdrs
  
@mixin flex($j:center,$a:center)
  display: flex
  justify-content: $j //主軸線:左右
  align-items: $a  //副軸線:上下
  
=abpos($l:initial,$t:initial)
  position: absolute
  left: $l
  top: $t

html,body
  +size(100%)
  margin: 0
  +flex
.scene
  +size(700px,500px,15px)
  .lefttopText
    margin:
      left: 30px
      top: 30px
    h1
      font-size: 36px
      letter-spacing: 3px
      font-weight: 300
      margin-top: 0
    h5
      font-size: 14px
      letter-spacing: 1px
      margin-bottom: 0
      font-weight: 300
      opacity: 0.6
    p
      font-size: 14px
      letter-spacing: 2px      
      opacity: 0.6
      line-height: 24px
    .blueblock
      +size(20px,25px)
.building
  position: absolute
  right: 0
  bottom: 0
  
[class^="house"]
  position: absolute
  right: 0
  bottom: 0
  
.house1
  +size(180px,200px)
  .window
    +size(40px,100px,20px)
    margin-top: 40px
    margin-left: 70px
    +flex
    flex-direction: column
    .circle
      +size(20px,20px,50%)
      margin: 4px
      margin-left: 10px
.house2
  +size(240px,170px)
  right: 130px
  .door
    +size(40px,80px,20px 20px 0 0)
    position: absolute
    left: 45px
    bottom: 0
.house3
  +size(320px,300px)
  +flex
  .wall
    flex: 1
    height:100%
    +flex(center,flex-start)
    .window
      +size(24px,50px,12px 12px 0 0)
      margin-top: 30px
    =wall($flex)
      flex: $flex
    &:nth-child(1)
      +wall(10)
    &:nth-child(2)
      +wall(14)
    &:nth-child(3)
      +wall(10)
    &:before
      content: ""
      +size(105%,20px)
      display: block
      border: solid 2px 
      position: absolute
      top: -20px
=halfCir($r)
  +size($r*2,$r,$r $r 0 0)
.roof
  +halfCir(150px)
  position: absolute
  top: -170px
  right: 5px
  .rooftop
    +halfCir(14px)
    +abpos(50%,-14px)
    transform: translateX(-50%)
  .cross
    +size(4px,30px)
    position: absolute
    left: 50%
    transform: translateX(-50%)
    bottom: 10px
    &:before
      content: ""      
      display: block
      +size(20px,4px)
      position: absolute
      left: 50%
      transform: translateX(-50%)
      bottom: 10px
```


---

## 縮小建築物

![](https://i.imgur.com/SFTQDhH.png)


---
### sass內容
```sass=
.building
  position: absolute
  right: 0
  bottom: 0
  transform: scale(0.95)
```


---
# 顏色設定
## 全部背景顏色與字顏色

### sass內容
```sass=
html,body
  +size(100%)
  margin:0
  +flex
  background-color: $colorBackground
  color: white
```


---
## 顯示背景漸層(全部顯示)
![](https://i.imgur.com/ryEE4a8.png)

### sass內容
```sass
html,body
  +size(100%)
  margin:0
  +flex
  background-color: $colorBackground
  color: white
.scene
  +size(700px,500px,15px)
  background: $sceneGradient
```


---
## 先顯示上半部
![](https://i.imgur.com/pNe3gVy.png)
### sass內容
```sass=


```



---
## 加上.blueblock顏色
![](https://i.imgur.com/512AksU.png)


---

### sass內容
```sass=


```



---
## 第一房子陰影

![](https://i.imgur.com/EmkFH0W.png)

### sass內容
```sass=


```

---
第一房子窗戶

![](https://i.imgur.com/WBfwJXx.png)
### sass內容
```sass=


```



---
## 第二房子與第三房子的顏色與前後順序

![](https://i.imgur.com/YPzvOsr.png)





---

### 第二房子修正sass內容
```sass


```


---
### 第三房子修正sass內容
```sass=


```

---
### 第一房子修正sass內容
```sass=
.house1
    +size(180px,200px)
    z-index: 1    //++++++++
```
---
## 第三房子的牆壁顏色設定
![](https://i.imgur.com/YrVZmDL.png)


---

### sass內容
```sass
 


```



---

## 牆壁上沿

![](https://i.imgur.com/WUQfeNf.png)


---

### sass內容
```sass=


```

---

## 牆的窗戶顏色
![](https://i.imgur.com/42rOn1B.png)


## 第二房的門

### sass內容
```sass=


```

## 第三房三個窗戶
### sass內容
```sass=
 


```


---
## 第三房子屋頂

![](https://i.imgur.com/sQceM5X.png)


---

### sass內容
```sass



```



---
## 清除框線與加上陰影
![](https://i.imgur.com/2E0Vy9N.png)


---

### sass內容
```sass


```

單元七 寫一座美麗城市 (繪圖).md
選擇開啟工具

目前顯示的是「單元七 寫一座美麗城市 (繪圖).md」。