用户投稿
前言
这次找了 The F2E 前端修练时光屋 的稿件，找到了这份稿件(如果您有兴趣，可以再找自己喜欢的设计稿来练功)。
其实原本满逃避面对这件事情，因为对于自己手刻的能力还没有很大的自信，所以只挑了几个简单易懂的课堂实作来练习，但是业界总是要有一个强度才有转职机会，所以我就硬着头皮来刻了！
这次要刻划的画面如下：
看起来很单纯的页面，但里面暗藏很多小技巧。
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
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; } } }}结语
透过这次的练习，学习到以下几个部份：
无法直接与设计师沟通的状况下，要分析设计稿(就算我已经是设计背景出身，还是要试着揣摩设计师的思维)。可以观察设计稿中有些特效，有哪些是设计师很常用到的，代表受众可以接受的大概也就那些，个人觉得不用特别炫技，作品集要与市场接轨。有些比较不熟悉的语法可以趁机在刻这类作品中学习到，了解其观念，而不是死背！把每一次新的一两个语法稍微记起来，了解其原理，并记录在 Codepen 未来如果有机会使用到，但想不起来时，就可以变成字典来查找。附上完成网址，可以玩一下 Codepen！
对了，这是我第一次 push 一个网页到 GitHub 上，算是一个里程碑，继续努力~!
https://hsuchihting.github.io/hotel1103/hotel_index.html
微信扫一扫打赏
支付宝扫一扫打赏
