TimHsu 已發佈 2019-11-6

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

前言

這次找了 The F2E 前端修練時光屋 的稿件,找到了這份稿件(如果您有興趣,可以再找自己喜歡的設計稿來練功)。

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

這次要刻劃的畫面如下:

images

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

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>[email protected]</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

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 的介紹

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

.container

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

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

info_box

.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 的內容

.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 屬性介紹,文章傳送門

將 .room# 的項目一起設定

.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

對了,這是我第一次 push 一個網頁到 GitHub 上,算是一個里程碑,繼續努力~!
https://hsuchihting.github.io/hotel1103/hotel_index.html

關於筆者

暱稱:TimHsu

介紹:前端工程師

Vue.js AngularJS

文章列表 文章列表