# 旅館預約服務練習紀錄-首頁練習
## 前言
這次找了 [The F2E 前端修練時光屋](http://https://challenge.thef2e.com/) 的稿件，找到了這份稿件(如果您有興趣，可以再找自己喜歡的設計稿來練功)。
其實原本滿逃避面對這件事情，因為對於自己手刻的能力還沒有很大的自信，所以只挑了幾個簡單易懂的課堂實作來練習，但是業界總是要**有一個強度**才有轉職機會，所以我就硬著頭皮來刻了！
### 這次要刻劃的畫面如下：
看起來很單純的頁面，但裡面暗藏很多小技巧。
## 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)！
Sign in with Wallet
Connect another wallet