iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

html/css/js的各種操作 系列

介紹寫網站時最重要的版面配置,和運用一些js可能會出現的龜毛事情又或是css,和使用boostrap/select2/java server

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文 團隊NUTC_IMAC_WEB_桑貝比
DAY 1

[day1]開始寫網頁前的環境架設與介紹

架設環境vscode 寫程式的環境有很多如果你有自己喜歡的也可以不用vscode,雖然我自己是覺得vscode挺好用就是了,然後在vscode寫html/css...

2023-09-16 ‧ 由 oLunao 分享
DAY 2

[day2]html/css 網頁結構(1) 容器與flex

如果有看上一章的結尾的話就會知道,我比較想讓人理解網頁的結構,了解容器與item間的關係就能更好的排到你想要的位子 容器 一個網站的結構都是一層一層容器互相包裹...

2023-09-17 ‧ 由 oLunao 分享
DAY 3

[day3]網頁結構(2) 排版 margin與padding

上一篇文章講了寫網頁時所需要的容器,來達到漂亮的排版,那麼今天就來看看要如何分析,首先就來試試 小實戰 已下圖格式來說 <div class='one'&...

2023-09-18 ‧ 由 oLunao 分享
DAY 4

[day4]響應式網頁與@media(max-width)

響應式網頁介紹 先帶你了解甚麼叫做響應式網頁,簡單來說當你打開網頁的時候給他做縮放你會發現,可能寬度小於多少時header表頭消失,頁面上的選單變成bar的ic...

2023-09-19 ‧ 由 oLunao 分享
DAY 5

[day5]bootstrap 介紹與安裝

bootstrap介紹 bootstrap是一個前端框架,用於快速建立現代、響應式的網頁和網站。由Twitter團隊開發,後來成為了開放源碼項目。Bootstr...

2023-09-20 ‧ 由 oLunao 分享
DAY 6

[day6]bootstrap的container row col

前天跟大家說了響應式網站,那麼接下來就要介紹他的大幫手bootstrap的css了哦對了bootstrap的樣式是可以打一長串的唷把他當作css就好例如 &lt...

2023-09-21 ‧ 由 oLunao 分享
DAY 7

[day7]bootstrap color問題與物件的shadow取消

bootstrap的color在不動用sass檔,僅在link連結進來的情況下,你會發現他的顏色可說是少得可憐,所以我對他有一些小方法可以在不動用sass的情況...

2023-09-22 ‧ 由 oLunao 分享
DAY 8

[day8]網頁的交互狀態(1) active/hover/focus

html打底,css美化,js動作,會讓人誤以為凡事跟觸發有關的都僅能透過js才能觸發,但是使用者與網頁互動其實也有所謂的狀態觸發唷,而最常使用的便是activ...

2023-09-23 ‧ 由 oLunao 分享
DAY 9

[day9]網頁的交互狀態(2) focus-(within/visible)/visited/target

讓我們今天繼續看下去吧 focus的另外兩種觸發方式 focus-within這個主要是給容器用的,當套在容器上時觸發條件為,當容器內的物件獲得焦點時觸發foc...

2023-09-24 ‧ 由 oLunao 分享
DAY 10

[day10] 下拉式選單

前面我們講了網頁的互動狀態,那麼今天我們就用hover來做下拉式選單吧。 通常使用下拉式選單都會用header表頭標籤,把它當作一個div即可 先排版吧 先嘗試...

2023-09-25 ‧ 由 oLunao 分享