這次找了 The F2E 前端修練時光屋 的稿件，找到了這份稿件(如果您有興趣，可以再找自己喜歡的設計稿來練功)。
其實原本滿逃避面對這件事情，因為對於自己手刻的能力還沒有很大的自信，所以只挑了幾個簡單易懂的課堂實作來練習，但是業界總是要有一個強度才有轉職機會，所以我就硬著頭皮來刻了！
看起來很單純的頁面，但裡面暗藏很多小技巧。
Tim Hsu
<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，其中有很多小技巧在當中：
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 {
max-width: 1280px;
height: auto;
margin: 0 auto;
display: flex;
}
這次 container 裡面使用了 display: flex 的技巧，為了就是要把房間預覽圖可以橫向排列，就不用再使用 float 了。
.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;
}
}
}
因為每個螢幕不同，如果還要算左右欄位的像素，真的會很麻煩，所以這邊使用百分比，這樣就很好分配了！
.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_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;
}
}
}
}
透過這次的練習，學習到以下幾個部份：
附上完成網址，可以玩一下 Codepen！
對了，這是我第一次 push 一個網頁到 GitHub 上，算是一個里程碑，繼續努力~!
https://hsuchihting.github.io/hotel1103/hotel_index.html
iThome鐵人賽
看影片追技術
