---
# System prepended metadata

title: 旅館預約服務練習紀錄-首頁練習

---

# 旅館預約服務練習紀錄-首頁練習

![](https://i.imgur.com/nx4P5bc.jpg)

## 前言

這次找了 [The F2E 前端修練時光屋](http://https://challenge.thef2e.com/) 的稿件，找到了這份稿件(如果您有興趣，可以再找自己喜歡的設計稿來練功)。

其實原本滿逃避面對這件事情，因為對於自己手刻的能力還沒有很大的自信，所以只挑了幾個簡單易懂的課堂實作來練習，但是業界總是要**有一個強度**才有轉職機會，所以我就硬著頭皮來刻了！

### 這次要刻劃的畫面如下：

![](https://i.imgur.com/3AvtT31.jpg)


看起來很單純的頁面，但裡面暗藏很多小技巧。

## HTML

```html
<body>
    <div class="container">
        <div class="info_box">
            <a href="hotel_index.html" class="logo"><img src="img/logo.svg" alt=""></a>
            <div class="info">
                <p class="h5"><strong>好室旅店。HOUSE HOTEL</strong></p>
                <p>花蓮縣花蓮市國聯一路1號</p>
                <p>03-8321155</p>
                <p>HOUSE@HOTEL.COM</p>
            </div>
        </div>
        <!-- info_box end  -->
        <div class="room_box">
            <div class="room_1">
                <a href="#">Single Room</a>
            </div>
            <div class="room_2">
                <a href="#">Double Room</a>
            </div>
            <div class="room_3">
                <a href="#">Twin Room</a>
            </div>
            <div class="room_4">
                <a href="#">Deluxe Single Room</a>
            </div>
            <div class="room_5">
                <a href="#">Deluxe Double Room</a>
            </div>
            <div class="room_6">
                <a href="#">Deluxe Twin Room</a>
            </div>


        </div>
    </div>

</body>
```
看起來算是單純，結構也很清楚。

## SCSS
來看一下 SCSS，其中有很多小技巧在當中：

### body
```css
body {
    background: linear-gradient(to left, #333, rgba(#333, 0.6), #333),
        url(../img/house/photo-1507149833265-60c372daea22.jpeg);
    background-repeat: repeat-y;
    //為了讓灰色漸層背景可以直式反覆在 body 內
    background-size: cover;
    font-family: Noto Sans CJK TC;

}
```

因為這次底圖是有圖案的，而不是單純色塊，所以這裡使用一個新的小技巧，就是把漸層跟底圖寫在一起，果然 Google 是前端工程師的好朋友，當我不知道怎麼寫的時候就上網找一下關鍵字。另外也寫了 `background-repeat: repeat-y` 這段語法，原因是要讓灰色漸層填滿畫面，不然只會到房間預覽圖的下方，最下面會有一塊底圖的顏色。
可以參考[這篇有 background 的介紹](http://https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds)。

這邊要提一下，寫完之後有效果還是要到 Chrome 開發者工具看一下是否有正常運作。

### .container
```css
.container {
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
    display: flex;
}
```

這次 `container` 裡面使用了 `display: flex` 的技巧，為了就是要把房間預覽圖可以橫向排列，就不用再使用 `float` 了。

### info_box
```css
.info_box {
    width: 30%;
    padding-top: 150px;

    .logo {
        text-align: center;
    }

    .info {
        color: #fff;
        font-size: 12px;
        margin-top: 200px;
        text-shadow: 0px 3px 6px #000;
        //複製 XD 文件內容
        text-align: left;

        .h5 {
            font-weight: regular;
        }

        p {
            font-weight: light;
            line-height: 1;
        }
    }

}

```

### 使用 Bootstrap 的概念分配畫面區塊
因為每個螢幕不同，如果還要算左右欄位的像素，真的會很麻煩，所以這邊使用百分比，這樣就很好分配了！

## 針對 room_box 的內容

```css
.room_box {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 150px;
    // 使用 flex-wrap 的屬性產生斷行

    .room_1 {
        background-image: url(https://picsum.photos/275/275?random=1);
    }

    .room_2 {
        background-image: url(https://picsum.photos/275/275?random=2);
    }

    .room_3 {
        background-image: url(https://picsum.photos/275/275?random=3);
    }

    .room_4 {
        background-image: url(https://picsum.photos/275/275?random=4);
    }

    .room_5 {
        background-image: url(https://picsum.photos/275/275?random=5);
    }

    .room_6 {
        background-image: url(https://picsum.photos/275/275?random=6);
    }

    // 將圖片設定成 background-image 
```

裡面有寫一行 `flex-wrap: wrap` 是用來斷行用的
可以參考這一篇 Flex 屬性介紹，[文章傳送門](http://https://wcc723.github.io/css/2017/07/21/css-flex/)

## 將 .room# 的項目一起設定

```css
.room_1,
    .room_2,
    .room_3,
    .room_4,
    .room_5,
    .room_6 {

        width: 275px;
        height: 275px;
        text-align: center;
        line-height: 275px;
        background-size: cover;
        background-position: center center;

        a {
            display: block;
            width: 100%;
            height: 100%;
            color: transparent;
            // 將 a 連結的屬性改變成 block，讓寬跟高都自適應 100%

            &:hover {
                color: #fff;
                background-color: rgba(55, 70, 11, 0.6);
                text-decoration: none;

            }

        }
    }
}
```

## 結語
透過這次的練習，學習到以下幾個部份：
1. 無法直接與設計師溝通的狀況下，要分析設計稿(就算我已經是設計背景出身，還是要試著揣摩設計師的思維)。
2. 可以觀察設計稿中有些特效，有哪些是設計師很常用到的，代表受眾可以接受的大概也就那些，個人覺得不用特別炫技，作品集要與市場接軌。
3. 有些比較不熟悉的語法可以趁機在刻這類作品中學習到，了解其觀念，而不是死背！
4. 把每一次新的一兩個語法稍微記起來，了解其原理，並記錄在 Codepen 未來如果有機會使用到，但想不起來時，就可以變成字典來查找。

附上完成網址，可以玩一下 [Codepen](https://codepen.io/hnzxewqw/pen/XWbjYzY)！