藍色憂鬱
文章一覽:http://blue9210.weebly.com/

目前分類:CSS隨筆 (4)

瀏覽方式: 標題列表 簡短摘要

我是一個後端工程師,因為公司部門沒有專門的前端設計人員,所以切版也得自己來,去年幫公司切了一個簡單的畫面(上方橫幅、左方選單),雖然畫面看似簡單,但我的成品常會有跑版、換了瀏覽器就破版的狀況,來回修改了好多次。

 

那時就覺得CSS好難,為何總是和我想像的六角學員不一樣?讓我渴望進修相關技能,也因此看了許多Youtube影片、網路文章,但學習總是片段的,常常照著影片做完,沒多久又忘了原理,好想有個系統性的學習,後來在臉書上看到切版直播班的廣告,沒有多做考慮就報名了。

 

一開始的先修影片中,最讓我印象深刻的就是flex排版,原來用flex排版這麼方便,以前總是隨便亂嘗試CSS語法,嘗試好多屬性才能達成我要的畫面,但也不知道原理;現在我可以精準的看出版面該如何分配、用什麼CSS語法,節省許多google的時間,光是學到Flex排版就讓我覺得物超所值。

 

直播課程的部分,老師教了好多從前沒有注意的小地方,像是css reset、圖片下方會有2-3px的高度之類的小常識。前兩周的內容、作業對我而言都很簡單,但是到了第三周RWD開始難度就直線上升,要注意的地方真的好多,還好大家在Slack上都很友善,願意回答我的任何疑問。

 

另一個讓我覺得物超所值的部分是學到SCSSGulp,去年切版時,前輩就問我會不會寫SCSS,但我不會,當時就很想要學,但又看不懂網路的教學。SCSS大大改善了我把code寫得很亂的壞習慣。

 

我一直很想要擁有自己的作品,但都不知道如何下手、如何分享給別人看,有了gulp就可以讓我上傳、分享自己的作品,真的很方便,謝謝老師用心的安排gulp進課程。

 

課程中也學到如何去修改Bootstrap的設定,因為我以前就覺得Bootstrap很難用,有了這些客製化的功能,我慢慢地對Bootstrap改觀了。

 

雖然現在公司新案子還沒開始,但我已經開始期待可以幫公司切版了!希望能讓前輩們看到我的進步。非常感謝六角學院的老師、助教、同學,以後我也會把切版班分享給其他想要學前端的朋友。

 

PS:一開始看到選軟工組的繳交作業數很少,擔心我自己也會這樣,所以有逼自己要練習、交作業,希望有拉高這組的平均XD

文章標籤

ivy 發表在 痞客邦 留言(0) 人氣()

圖片高度.png

使用img的標籤會在下方多出2-3px的高度,以下是我的原始碼:

<div class="pic">
    <img src="https://pic.pimg.tw/blue921010/1626341022-1319585258-g.png" alt="">
</div>

我單純的用的div包住一張89*32的照片,照理說此div的高度應該是32,但利用chrome的開發人員工具來看高卻變成了34.67,原以為是CSS RESET就可以解決了,但似乎還是不行,於是找到了以下幾種方法來解決。

ivy 發表在 痞客邦 留言(1) 人氣()

css隨筆 (1).png

一、CSS圖片設定

background-image: url(這裡放圖片網址/路徑);

CSS的背景圖片預設會重複到該區塊滿版,這個方法比較適用於重複的幾何圖案或是漸層圖案。

我故意用一張小小的logo圖案來做測試,其實蠻噁心的><

程式碼展示如下:

文章標籤

ivy 發表在 痞客邦 留言(0) 人氣()

css隨筆.png

一、HTML行內元素的特性

  • 後面的元素會接續在右邊,不會自動換行
  • 寬度不會占滿整列(可透過瀏覽器的開發者工具檢查)
  • 若要使行內元素有區塊元素的特性,可以使用display:block

 

常見的行內元素

ivy 發表在 痞客邦 留言(0) 人氣()