30天軟體工程體驗營2025

紀錄在六角學院的學習筆記。

學習筆記-CSS Flex網頁排版

FLEX 外層 container 屬性 Class 裡面有兩個樣式, 則兩個樣式都會使用到 <div class="container"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> </div> .container { display: flex; width: 500px; background: #004466; margin: 0 auto; } .item { background: #00ffa2; color: #004466; text-align: center; font-size: 36px; margin-right: 10px; margin-left: 10px; } .item1 { width: 150px; height: 150px; } .item2 { height: 200p; } .item3 { height: 300p; } display: flex 要寫在外層(container), 可以讓區塊元素並排展現會依照 container 設定的寬度, 讓裡面 item 根據比例自動調整...

學習筆記-使用CSS變更HTML標籤特性

CSS Reset 清空瀏覽器預設樣式如果只有寫 html，則瀏覽器會有預設的 CSS 樣式帶入在 Google 上搜尋 CSS reset 點以下連結可以查詢到 CSS reset Code 將這個網頁裡的 code 貼入自己的 style.css 就可以 reset 預設樣式貼完之後再寫自己的 CSS code，則下方的 CSS 權重會大於上方，所以會以自己寫的 CSS 為最後呈現 BLOCK 區塊元素區塊元素特性: 盡可能的占滿版面區塊元素會另起一行進行呈現如上圖，a 標籤沒有占滿版面，也沒有另起一行呈現，所以不是區塊元素從 Computed 中可以看到是 Auto x Auto INLINE 行內元素行內元素特性: 比較常用在段落沒辦法設定寬高 SPAN SPAN 本身沒什麼意思，是用來點綴排版用的行內標籤寫法例如: <p><span>今天</span> 天氣真好</p> 或是使用 class 寫法 <p><span class="red">今天</span> 天氣真好</p> .red { color: red; } 想要讓行內元素變成區塊元素的話，需要在 CSS 中加入 display:block...

學習筆記-CSS基礎

標籤選擇器標籤選擇器 { 屬性: 設定值; 屬性: 設定值; } 例如以下 h1 { color: blue; font-size: 50px; } CSS 除錯分析檔案路徑是否正確單字有沒有拼錯格式是否正確在 Chrome 瀏覽器頁面按右鍵»檢查如果 CSS code 當中有寫錯導致無法辨識，在 Element 元素就會出現畫線的錯誤顯示如下: 擬態選擇器 hover 除了標籤選擇器以外還可以使用擬態選擇器，使用情境： a 標籤文字設定成黑色，但希望當滑鼠滑過去時文字可以變成紅色這樣可以寫成這樣 a { color: black; } a:hover { color: red; } /*讓滑鼠按下時變成blue的話可以用active*/ a:active { color: red; } 類別選擇器如果有好幾個 P 段落，但其中某一個段落想要使用客製化 CSS file INDEX.HTML 設定如下 <p>段落一</p> <p>段落二</p> <p class="style1">段落三</p> <p>段落四</p> STYLE.CSS 增加如下 code .style1 { color: red; } class 屬性也同樣可以應用在 a 或是 li 上面...

學習筆記-HTML基礎

Emmet 載入在 VSC 或是 Codepen 要載入 Emmet 套件，可以直接打"!"+“Tab"鍵，就會立馬出現以下 Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> #如果沒有加這行在IE瀏覽器會出現亂碼 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> #針對手機、Ipad做螢幕解析度調整 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> #讓IE更新到最新版本 <title>Document</title> </head> <body></body> </html> 按"P*2"就會自動載入下方 code，如果*3 就會一次出現三個 <p></p> <p></p> 列表標籤呈現效果會是: ● 項目一 ● 項目二 ● 項目三 1.項目一 2.項目二 3.項目三 <ul> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ol> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ol> li 可以用來包 a 連結也可以用來包 img 圖片