iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

打造你的第一個網站 系列

從HTML、CSS、JavaScript開始手把手打造屬於你自己的第一個網站。

鐵人鍊成 | 共 32 篇文章 | 4 人訂閱 訂閱系列文 RSS系列文
DAY 21

第二十一天-CSS定位進階範例(二)

如何讓card的三個button在平常的時候不出現,hover的時候才出現呢?所有的程式碼都照著上述打,修改的部分如下: .card-btns { po...

DAY 22

第二十二天:引用jQuery至專案中

何謂jQuery?維基百科上面這樣介紹: jQuery是一套跨瀏覽器的JavaScript函式庫,用於簡化HTML與JavaScript之間的操作。在我們寫網頁...

DAY 23

第二十三天 jQuery腳本開發

jQuery的腳本我們在剛剛開起的main.js中開發,起手式 $(".toggler").click(); $()是jQuery選擇函數...

DAY 24

第二十四天-引用Bootstrap元件(Components)至專案中

什麼是Bootstrap?Bootstrap是一組用於網站和網路應用程式開發的開源前端框架,包括HTML、CSS及JavaScript的框架,提供字體排印、表單...

DAY 25

第二十五天Bootstrap特殊網格(Grid)系統寬度計算規則

Bootstrap中有一個特殊的網格系統,可以讓我們非常方便的進行切版。 網址:https://getbootstrap.com/docs/5.3/layout...

DAY 26

第二十六天-Container

在不同的裝置上面,由於螢幕大小的不同,會使得我們的文字面版顯得擁擠。因此,我們會希望在左右兩邊適當的留白,如此才能讓文字更集中,且適當的換行。在引用Bootst...

DAY 27

第二十七天 使用Bootstrap 實做網頁(一)

在學會Bootstrap之後,我們接著使用Bootstrap來實做網頁,在我的附檔中,我們已經引用並且設定好<div></div>每個標...

DAY 28

第二十八天用bootstrap 實做網頁(二)

接著我們設計6個div標籤,分別在超小型裝置的時候顯示2個一排、小型裝置的時候顯示3個以及大型裝置的時候6個一排各,排法如下: <div c...

DAY 29

第二十九天-使用Bootstrap實做網頁(三)

使用內嵌Youtuber播放介面1.在Youtube上找到我們要的影片並且直接對著畫面按下右鍵,就會跑出選單2.點選「複製嵌入程式碼」3.直接將整段程式碼貼在&...

DAY 30

第三十天-用Bootstrap 實作網頁(四)

Tab特效另外一個常用的特效是tab,這個特效可以讓我們在眾多的按鈕之中做切換,並出現相對應的文章。HTML: <a data-toggle=&quot...