OneDayOneNote

發表於 更新於 分類於 閱讀次數：
每天一筆記

2024-05-26 CSS black overlay

CSS black overlay 黑色半透明遮罩 做法

在modal 彈出視窗的最外層，需要有一個固定遮罩

1
2
3
4
5
6
<div class="modal_wrap">
    <div class="modal" id="login-modal">
        .....
        .....
    </div>
</div>

modal_wrap 類別選擇器(Class selector) 的設定

1
2
3
4
5
6
7
8
9
10
11
12
.modal_wrap{
    display:none;
    position: fixed;
    z-index: 1; /*層疊在最上層*/
    padding-top: 100px;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);  /*黑色半透明遮罩*/
}

…

2024-05-27 CSS Only - Input Field with Floating Text Animation | Floating label input css 動態文字標籤 上移至輸入框的左上方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Input Field Label Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="entryarea>">
            <input type="text" required>
            <div class="labelline">Enter your name</div> 
    </div>
</body>

</html>   
1
2
3
4
<!-- Hex Color Code -->
#1c2841
#f0ffff
#66ff00
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/* Given below is  Google-Fonts CDN line */ 
@import url('https://fonts.googleapis.com/css2family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins',sans-serif;
    box-sizeing: border-box;
}
body{
    display: flex;
    min-height: 100vh;
    justify-content: center; /*水平置中 */
    align-items: center; /*垂直置中 */
    background: #1c2841;
}
.container{
    width: 680px;
}
.entryarea{
    position: relative;
    height: 80px;
    line-height: 80px;
}
input{
    position: absolute;
    width: 100%;
    outline: none;
    font-size: 2.2em;
    padding: 0.30px;
    line-height: 80px;
    border-radius: 10px;
    border: 2px solid #f0ffff;
    background: transparent;
    transition: 0.1s ease;  /* 移動速度及方向 */
    z-index: 1111;
}
.labelline{
    position: absolute;
    font-size: 1.6em;
    color: #f0ffff;
    padding: 0.25px;
    margin: 0.20px;
    background-color: #1c2841;
    transition: 0.2s ease;
}
input:focus , input:valid{
    color: #66ff00;
    border: 4px solid #66ff00;   
}
input:focus + .labelline , input:valid + .labelline{
    color: #66ff00;
    height: 30px;
    line-height: 30px;
    padding: 0.12px;
    transform: translate(-15px, -16px) scale(0.88);/*文字上移 */
    z-index: 1111; /*文字可以層疊在外框上 */
}

文獻連結:
https://www.youtube.com/watch?v=Tdzas-IlKSM&list=PLtSbVlT9kQjn5PSxxYAY5OwMExHKNWKCi&index=7 by
WebKitCoding

…

2024-05-28 Hexo 分類及標籤設定

https://lilylovesjeans.github.io/apple.lily/2024/05/27/hexo-setup-1/

…

2024-05-28 試著學 Hexo - SEO 篇 - Google Search Console

文獻連結:
https://ithelp.ithome.com.tw/articles/10249885

  1. 終端機執行結果, 會產生 sitemap.xml 部署到 github 網站上:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
     ~% npm install hexo-generator-sitemap --save   

    added 8 packages, and audited 246 packages in 2s

    29 packages are looking for funding
      run `npm fund` for details

    found 0 vulnerabilities

    ....
    ....
    ....
    (base) ~ % sudo hexo d                                 
    INFO  Validating config
    INFO  Deploying: git
    INFO  Clearing .deploy_git folder...
    INFO  Copying files from public folder...
    INFO  Copying files from extend dirs...
    [master 7d8d7a3] Site updated: 2024-05-28 00:07:21
    ......
    .....

     3 files changed, 227 insertions(+), 1 deletion(-)
     create mode 100644 sitemap.txt
     create mode 100644 sitemap.xml
    Enter passphrase for key '/var/root/.ssh/id_rsa': 
    Enumerating objects: 9, done.
    Counting objects: 100% (9/9), done.
    Delta compression using up to 4 threads
    Compressing objects: 100% (6/6), done.
    Writing objects: 100% (6/6), 1.40 KiB | 1.40 MiB/s, done.
    Total 6 (delta 2), reused 0 (delta 0)

  1. 如果在 Google Search Console 的 Sitemap提交 sitemap.xml
    顯示錯誤:

    檢查一下 hexo /_config.yml , 裹面的 URL 設定是否有誤(比如 https -> ttps ❌)

    並檢查 public\sitemap.xml

    更改之後，在專案目錄下的 執行命令：

1
2
3
hexo clean
hexo generate
sudo hexo depoly

在 public\目錄之下會產生新的 sitemap.xml
打開看一下，內容是否正確：

再重新提交 sitemap.xml

成功後, 會顯示如下：

2024-05-29 今天學到了 event.preventDefault(); // 防止表單提交

防止秀出系統 default 的訊息 ，使用preventDefault()的medhod()
部份程式如下:

1
2
3
4
5
6
7
8
<button class="submit" type="submit" onclick="btn_submit(event)">註冊

    <div class="toast-success">
        ✅ 註冊成功！可以查看 Email 確認細節！
    </div>

</button>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function btn_submit(event) {
    event.preventDefault(); // 防止表單提交

    let valid = true;

    // 驗證暱稱
    let nickname = document.querySelector('#nick-name').value.trim();
    if (nickname === "" || nickname === null | nickname.length>40) {
        let elem_err_nickname = document.querySelector('.err-nick-name');
        elem_err_nickname.style.visibility = 'visible';
        valid = false;
    } else {
        let elem_err_nickname = document.querySelector('.err-nick-name');
        elem_err_nickname.style.visibility = 'hidden';
    }

    // 驗證電子郵件
    let email = document.querySelector('#email').value.trim();
    if (email === "" || !email.includes('@')) {
        let elem_err_email = document.querySelector('.err-email');
        elem_err_email.style.visibility = 'visible';
        valid = false;
    } else {
        let elem_err_email = document.querySelector('.err-email');
        elem_err_email.style.visibility = 'hidden';
    }

    // 驗證密碼
    let password = document.querySelector('#current-password').value.trim();
    if (password === "" || password.length < 8 || password.length > 100) {
        let elem_err_password = document.querySelector('.err-password');
        elem_err_password.style.visibility = 'visible';
        valid = false;
    } else {
        let elem_err_password = document.querySelector('.err-password');
        elem_err_password.style.visibility = 'hidden';
    }

    // 如果所有字段都有效，允許表單提交
    if (valid) {
                // 清空所有输入字段
                document.querySelector('#nick-name').value = '';
                document.querySelector('#email').value = '';
                document.querySelector('#current-password').value = '';
                document.querySelector('.toast-success').style.display='block'; //show 出註冊成功的訊息
        
    }
    else{
                document.querySelector('.toast-success').style.display='none';
    }
}

…

2024-05-30 How TO - Collapse

通常用在 FAQ 常見問題集的頁面 ， 點擊問題按鈕時，才會出現回答，
須要配合 javascript 的addEventListner()事件。
Javascript 的程式碼大概的意思是：
抓取所有 collapsible 選擇器， 並為其添加 click 事件，
當事件 click 啓動後，檢查 content 選擇器 屬性為 maxHeight 是有數字的(就是不為 0 或 null),
就把maxHeight 設為 null 「閉合」，反之則「展開」

w3cSchool 的示範程式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>Animated Collapsibles</h2>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;


for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

…

2024-05-30 JavaScript 的 addEventListener() 事件

addEventListener()

可以作為事件目標的任何物件,包含Window 和 Document 物件以 Elements,都定義有一個名為 addEventListener()的方法,你可以用它來 冊事件處理器。addEventListener()接受三個引數。第一個是要為之註冊 類型。事件類型(或事件名稱)是一個字串,它不包含設定事件處理器 「on」前綴。
addEventListener()的第二個引數是指定類型的事件發生時應該被調用的函式。第三個引數是選擇性的,並且會在下面解釋。

下列程式碼為一個<button>元素上的「click」事件註冊了兩個處理器。 兩種技巧之間的差異:

1
2
3
4
5
6
7
8
9
<button id="mybutton">Click me</button>

<script>

let b = document.querySelector("#mybutton");

b.onclick = function() { console.log("Thanks for clicking me!"); }; b.addEventListener("click", () => { console.log("Thanks again!"); });

</script>

以”click” 作為其第一引數來呼叫 addEventListener()並不會影響到 onclick特性的值。
這段程式碼中,一次按鈕點擊(button click)會在開發人員主控台記錄兩個訊息。
如果我們先呼叫 addEventListener()然後再設定 onclick,我們仍然會看到兩個訊息，只是順序相反。
更重要的是,你可以多次呼叫 addEventListener()以在同一個物件上為相同的事件類型註冊一個以上的處理器函式,
當一個事件在一個物件上發生,為那個註冊的所有處理器都會被調用,並以它們當初註冊的順序進行。
在同一個物件以上以相同的引數調用 addEventListener()超過一次,不會有什麼效果,該處理器函式仍然只註冊了一次,
而這種重複調用並不會改變處理器被調用的順序。

摘錄 JavaScript 大全第七版 第456頁

…

2024-05-31 了解 JavaScript 的 addEventListener() click 事件處理器，用 console.log 追踪

javascript 程式碼如下 ，：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// 程式碼說明, FAQ 的展開與晰合 ：
// 抓取所有 類別選取器 為 collapsible 的元素，
// 抓到之後 ，跑 for 迴圈
// 利用addEventListener 監聽當使用者按下「某個問題」的 click 事件時
// 呼叫調用函式 ，
// 調用情境(this) ，這個程式的 this 就是 button 元素，
//  button 元素自動偵測是否帶有該class 並做切換"active" class
// 下一步，判斷此 button 的下一個元素，其樣式名稱為 maxHeight, 
// 如果maxHeight 有值,表示目前這個問題的答案是「展開的」，要將它「閉合」
//反之 ，則「展開」,並賦予scrollHeight 高度的值

var coll = document.querySelectorAll('.collapsible');

var coll = document.querySelectorAll('.collapsible');
var i;
console.log( coll);


for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");

    console.log(this);

    var content = this.nextElementSibling;

    console.log('this.nextElementSibling: ' , this.nextElementSibling
    )

    if (content.style.maxHeight){
      content.style.maxHeight = null;
      console.log('展開變閉合: '+ content.style.maxHeight)
    } else {
  
      content.style.maxHeight = content.scrollHeight + "px";
      console.log('閉合變展開: '+ content.style.maxHeight)
    } 
  });
}


用 console.log（）追踪 ：




…

2024-06-01 使用 js forEach 遍歷所有所屬的元素

在 click 事件處理器中遍歷所有 .collapsible 元素，將它們的內容全部閉合，然後再處理當前點擊的內容。

1
2
3
4
5
6
7
8
9
// 先將所有的內容閉合
   coll.forEach(function(item) {
     item.classList.remove("active");
     var content = item.nextElementSibling;
     content.style.maxHeight = null;
   });
  
 // 再處理當前點擊的內容
 this.classList.toggle("active");

2024-06-02 關於我們-下拉式選單的切版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列三：練習6 ── dropdown 下拉式選單</title>
    <link rel="stylesheet" href="./06_js_dropdown.css">
</head>

<body>

<div class="nav_container">
    <a href="#">首頁</a>
    <a href="#">全部商品</a>
    <a href="#">全部品牌</a>
    <div class="about_wrap">
        <div class="about_click">
            <a href="#">關於我們 </a>
        </div>
        <div class="about">
            <a href="#">企業宗旨</a>
            <a href="#">團隊介紹</a>
            <a href="#">創業故事</a>
        </div>
    </div>

</div>


    <script src="./06_js_dropdown.js"></script>
</body>

</html>

「關於我們」的 display 設定為 none, 不顯示: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  .nav_container a + .about_wrap{
    display: inline-block;
}

.about_click{
    position: relative;
}
.about {
    display: none;
    position: absolute;
}
.about a{
    display: block;
}

「關於我們」的 display default 顯示: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav_container a + .about_wrap{
    display: inline-block;
}

.about_click{
    position: relative;
}
.about {
    /* display: none; */
    position: absolute;
}
.about a{
    display: block;
}

…

2024-06-03 使用 flex 下拉式切版 及 學習巢狀 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列三：練習6 ── dropdown 下拉式選單</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./06_js_dropdown.css">
</head>

<body>

<nav>
    <ul class="main_nav">
        <li>
            <a href="#">首頁</a>
        </li>
        <li>
            <a href="#">全部</a>
        </li>
        <li>
            <a href="#">全部品牌</a>
        </li>
        <li class="about_me">
            <a href="#">關於我們</a>
            <ul>
                <li><a href="#">企業宗旨</a></li>
                <li><a href="#">團隊介紹</a></li>
                <li><a href="#">創業故事</a></li>
            </ul>
        </li>
    </ul>

</nav>



    <script src="./06_js_dropdown.js"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
nav{
    .main_nav{
        display: flex;
        justify-content: space-around;
        
        li{
            position: relative;
        }
        ul{
            position: absolute;
            display: none;
            width: fit-content;
            flex-direction: column;
            top: 100%;
            right: 0;
            
            
        }
     
        .about_me.open_list ul{
            display: flex;
            background-color: black;
        }

    }
}

a{
    text-decoration: none;
    line-height: 1.5;
}
1
2
3
4
5
6
7
const elem_about_list = document.querySelector('.about_me');
function open_list(){
    
    elem_about_list.classList.toggle('open_list');
}

elem_about_list.onclick = open_list;

…

輸播 Carousel 常用的套件有:
.swiperJS
.OwlCarousel
.slick.js

…

2024-06-05 用純 javascript 實現輸播 Carousel功能

文獻：
https://ferrari0913.medium.com/%E4%BD%BF%E7%94%A8%E7%B4%94javascript%E5%AF%A6%E7%8F%BE%E8%BC%AA%E6%92%AD%E5%8A%9F%E8%83%BD-%E5%9F%BA%E7%A4%8E-77cb4ec587e8
這個有點燒腦，需要好好研究一下

2024-06-06 Carousel輸播，用CSS selector來呈現

文獻：https://medium.com/@zoe19940213/%E5%B0%B1%E6%98%AF%E8%A6%81%E8%87%AA%E5%B7%B1%E4%BE%86%E7%B3%BB%E5%88%971-%E8%BC%AA%E6%92%AD%E5%8A%9F%E8%83%BD-ff710cd224c2 by Zoe Chen

2024-06-07 CSS立體border, 利用box-shadow呈現

1
2
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);

2024-06-08 carousel實做輪播，第一步

先架構 html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列三：練習7 ── carousel 輪播元件</title>
    <link rel="stylesheet" href="./js_carousel.css">
</head>
<body>
<!-- image 
https://images.unsplash.com/photo-1606800052052-a08af7148866?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1492175742197-ed20dc5a6bed?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1600038938045-b5fadbc55083?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

https://images.unsplash.com/photo-1567620820240-238399e9e438?q=80&w=988&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

-->
<section class="main-carousel">
    <div class="carousel-inner">
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1606800052052-a08af7148866?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 1">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 2">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1492175742197-ed20dc5a6bed?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 3">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1600038938045-b5fadbc55083?q=80&w=987&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 4">
        </div>
        <div class="slide">
            <img src="https://images.unsplash.com/photo-1567620820240-238399e9e438?q=80&w=988&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image 5">
        </div>
    </div>
    <button class="left-slide-btn" >123</button>
    <button class="right-slide-btn">456</button>
    <div class="slide-dots">.....</div>
</section>


    <script src="./js_carousel.js"></script>
</body>
</html>

佈置畫面圖片的部份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
*{
    margin: 0;
    padding: 0;
    
}
/* 整個carousel區塊 */
.main-carousel{
    position: relative;
    width:100%;
    height: 600px;
    /* overflow: hidden; */
}
/* 圖片顯示區域 */
.main-carousel .carousel-inner{
    width: 100%;
    height: 100%;
}

/* 所有圖片的 div，設定為絕對位置讓圖片層疊 */
.main-carousel .carousel-inner .slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transition: left .5s;
}

/* 圖片本身 */
.main-carousel .carousel-inner .slide > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

實作畫面中圖片的部份

1
2
3
4
5
6
7
8
9
10
11
12
13

//抓取圖片顯示區的區域
const carsouselInner  = document.querySelector('.carousel-inner');
const slides = carsouselInner.children;

//先將圖片展開於carsoousel_inner , 因為width設為100% ，左向右延伸依續為: 0, 100%,200%,300%,400% ...
for (i = 0; i < slides.length ; i++)
{
    slides[i].style.left=i*100 +`%`;
    console.log(slides[i].style.left);
}


步驟一畫面呈現的樣子

2024-06-09 carousel實做輪播，第二步, 實作左右鍵

html的部份

1
2
 <button class="left-slide-btn">❮</button>
<button class="right-slide-btn">❯</button>

CSS 妝飾左右箭頭
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 .left-slide-btn, .right-slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    outline: none;
}

.left-slide-btn {
    left: 10px;
}

.right-slide-btn {
    right: 10px;
}

javascript實作按左右鍵輪播

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const carsouselInner = document.querySelector('.carousel-inner');
const slides = carsouselInner.children;
const imgCount = slides.length;
const slides_position = [];


// Initialize the carousel
function showDefault() {
    for (let i = 0; i < imgCount; i++) {
        slides[i].style.left = i * 100 + `%`;
        slides_position[i] = i * 100;
    }
}

function showDefault_left() {
    for (let i = 0; i < imgCount; i++) {
        slides[i].style.left = slides_position[i] + `%`;
    }
}

function skipSlide(targetSlide, dist) {
    slides_position.forEach((x, i, positions) => {
        positions[i] = x - dist;
        slides[i].style.left = `${positions[i]}%`;
    });

}

const rightSlideBtn = document.querySelector('.right-slide-btn');
var currentIndex = 0;
rightSlideBtn.addEventListener('click', function () {
    let dist = 100;
    if (currentIndex < (imgCount - 1)) {
        currentIndex += 1;
        skipSlide(currentIndex, dist);
    } else {
        currentIndex = 0;
        showDefault();
    }
});

const leftSlideBtn = document.querySelector('.left-slide-btn');
leftSlideBtn.addEventListener('click', function () {
    let dist = 100;
    if (currentIndex === 0) {
        currentIndex = imgCount - 1;
        showDefault_left();
        skipSlide(currentIndex, dist * (imgCount - 1));
    } else {
        currentIndex -= 1;
        skipSlide(currentIndex, -dist);
    }
});

// Add click event to dots
slideDots.addEventListener('click', function (e) {
    if (e.target.classList.contains('slide-dot')) {
        const targetIndex = Number(e.target.dataset.index);
        const dist = 100 * (targetIndex - currentIndex);
        skipSlide(targetIndex, dist);
        currentIndex = targetIndex;
    }
});

showDefault();

2024-06-10 carousel實做輪播，最後一步, 實作dots

html的部份
dots放在button底下同層

1
2
3
<button class="left-slide-btn">❮</button>
<button class="right-slide-btn">❯</button>
<div class="slide-dots"></div>

妝飾 dots 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.slide-dots {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    z-index: 20;  /* Ensure dots are above slides and buttons */
}
.slide-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
}
.active-dot {
    background-color: #1616ed;
}

javascript實作按點點所屬的那張圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const slideDots = document.querySelector('.slide-dots');

// Generate dots
for (let i = 0; i < imgCount; i++) {
    const dot = document.createElement('span');
    dot.classList.add('slide-dot');
    dot.dataset.index = i;
    slideDots.appendChild(dot);
}

// Set the active dot
function setActiveDot(index) {
    const dots = document.querySelectorAll('.slide-dot');
    dots.forEach(dot => dot.classList.remove('active-dot'));
    dots[index].classList.add('active-dot');
}

// Initialize the carousel
function showDefault() {
    for (let i = 0; i < imgCount; i++) {
        slides[i].style.left = i * 100 + `%`;
        slides_position[i] = i * 100;
    }
    setActiveDot(0);
}

function showDefault_left() {
    for (let i = 0; i < imgCount; i++) {
        slides[i].style.left = slides_position[i] + `%`;
    }
    setActiveDot(currentIndex);
}

function skipSlide(targetSlide, dist) {
    slides_position.forEach((x, i, positions) => {
        positions[i] = x - dist;
        slides[i].style.left = `${positions[i]}%`;
    });
    setActiveDot(targetSlide);
}

最後畫面呈現的樣子

2024-06-11 carousel實做輪播， 測試dots 的bug記錄:

按 click 左右鍵時，出現錯誤:

原來是忘了判斷click元素裏是否含有 “slide-dot” 這個類別

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  addEventListener('click',
function(e){
     if (e.target.classList.contains
     ('slide-dot')) //需加上這個判斷是否含有'slide-dot' 這個類別
     {
        console.log(e);
        console.log('curentIndex: ' +currentIndex);
        console.log('dataset-index: '+e.target.dataset.index)
        const targetIndex = Number(e.target.dataset.index);
        const dist = 100 * (targetIndex-currentIndex);
        console.log('dist: '+dist);
        skipSlide(targetIndex, dist);
        currentIndex = targetIndex;
        console.log('currentIndex: '+currentIndex)
     }
}
)

2024-06-12 JavaScript 系列四：第1課 ── autosize 套件 來源:

https://github.com/jackmoore/autosize

2024-06-13 CSS box-sizing 原理:

box-sizing:
如果設定 border-box ：width指定給邊框到邊框的範圍。 所以padding 及border 就會自動內推。
如果設定 content-box,
是傳統的計算方式,
width指定給內容物的寬度.
所以 padding 及 border就會往外加。

2024-06-14 CSS UL Li 是block or inline? em 是什麼?

UL li : 基本上是block ，下列截取自https://www.w3schools.com/css/css_list.asp:

HTML Lists and CSS List Properties
In HTML, there are two main types of lists:

unordered lists (<ul>) - the list items are marked with bullets
ordered lists(<ol>)- the list items are marked with numbers or letters
The CSS list properties allow you to:

Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items

2024-06-15 CSS fixed 定位

通常用在蓋版廣告, 永迼固定在視窗範圍內，
如果要設定在正中間:
position:fixed;
垂直置中 top:0 bottom:0 margin: auto ,
水平置中： left:0 right: 0

2024-06-16 CSS Absolute 絕對定位

Absolute 絕對定位原理:
特性： 當你將物件做絕對定位時，第一件事它就會將物件從資料中抽掉，原理跟 fixed 非當相似。
例如 a>b>c : 如果將 c 做absolute 絕對定位，
那麼 b就不知邊c 的位置在那裹，其實c 就在原本資料所在的位置，只是c被抽離， b就無法包覆它。

絕對定位使用時機: 購物網站圖片 右上方 熱賣hot 標籤的效果 ，或是蓋版廣告「X」關閉鈕的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>絕對定位 absolute 試範</title>
</head>
<link rel="stylesheet" href="./reset.css">
<style type="text/css">
    .wrap{
        width: 960px;
        margin: auto;
        display: flex;
    }
    .item{
        position: relative;
        width:300px;
        margin: 15px 10px;
        border: 1px solid #aaa;
        padding: 10px; /*線條跟邊框連起來不太好看，設定一下 padding*/
    }
    /* 布望圖片大小都一樣，設定 width: 100% */
    .item img{
        width: 100%;
    }
    .item .tab{
        background-color: #f00;
        color:#fff;
        padding: 6px 10px;
        position: absolute;
        /* 但父層沒有做定位時，畫面會壞掉，它會定到 window去，所以父層要設定位，因為圖片是要和大家排在一起，不要獨立出去，所以父層item 的定位設定 relative */
        top: -4px; 
        right:-4px;
        border-radius: 5px;
        transform: rotate(45deg); /* 旋转 45 度 */

     
    }
</style>
<body>
    <!-- 購物網站 ，有熱賣小小圖案的效果 -->
    <div class="wrap">
        <div class="item">
            <div class="tab">Hot</div>
            <img src="https://picsum.photos/300/200/?random=1">
            <h2>title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, maxime?</p>

        </div>
        <div class="item">
            <div class="tab">Hot</div>
            <img src="https://picsum.photos/300/200/?random=2">
            <h2>title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, maxime?</p>

        </div>
        <div class="item">
            <div class="tab">Hot</div>
            <img src="https://picsum.photos/300/200/?random=3">
            <h2>title</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, maxime?</p>

        </div>
    </div>
</body>
</html>

2024-06-17 CSS Input Field Label Animation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列三：練習4 ── 表單驗證</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./js_form_validation.css">
</head>
<body>
    <div class="container">
        <form action="" method="get" >
            <div class="header">註冊帳戶
                <hr>
            </div>
                  
            <input type="text" name="NickName" id="nick-name" required>
            <div class="labelline">暱稱</div>
            <div class="err err-nick-name">
                *不能為空白、必須在40字以內
            </div>
                                
            <input type="email"
            name="Email" id="email" required>
            <div class="labelline">Email 電子郵件</div>
            <div class="err err-email">*不能為空白、必須包含 @ 符號</div>
    
            <input type="password" 
            name="current-password" id="current-password" required>
            <div class="labelline">密碼</div>
            <div class="err err-password">
                * 不能為空白、必須在8字以上、必須在100字以內
            </div>
    
            <div class="button-container">
                <button class="submit" type="submit" onclick="btn_submit(event)">註冊
                
                    <div class="toast-success">
                        ✅ 註冊成功！可以查看 Email 確認細節！
                    </div>
                
                </button>
 
            </div>
        </form>
    </div>
 

<script src="./js_form_validation.js"></script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
    /* Hex Color Code 
    #ebcbbb 膚色
    #6c999a tiffiny綠
    #0e2222 深藍色
    #DF3079 粉色  

    */
*{
    font-family: "Noto Sans TC", sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items:center;
    min-height: 100vh;   /* 要設定高度 align-items 才有效 */
    background-color: #ebcbbb ;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0e2222;
    width: 540px;
    height: 450px ;
    background: #6c999a;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    position: relative;
}
.header{
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 35px;
}

input{
    margin-top: 30px;
    width: 450px;
    height: 40px ;
    font-size: 18px;
    background: transparent;
    transition: 0.1s ease;
    border: 1px solid #0e2222;
    border-radius: 5px;
    color: #212121;
}


.labelline{
    position: absolute;
    background: #6c999a;
    margin-top: -33px;
    margin-left: 5px;;
    transition: 0.2s ease;
}

input:focus{
    outline: none;   /* 不要秀出邊框 */
   
}

input:focus + .labelline ,
input:valid + .labelline{
    /* color: #0e2222; */
    color: #DF3079;
    padding: 0.12px;
    transform: translate(1.5px, -21px) scale(0.9);
    z-index: 1111;
}

.err{
    visibility: hidden;
    color:#f00;
    font-size: 13px;
}

 /* button 要變更位置，需要在外面包一層wrap .button-container */
.button-container {    
    display: flex;
    justify-content:end;
    width: 100%;
    margin-top: 20px;

}
button.submit {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #0056b3 ;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button.submit:hover {
    background-color: #0e2222;
}


.toast-success{
    display:none;
    font-size:15px;
    position: absolute;
    background-color: #C6F6D5;
    color: #276749;
    border-radius: 15px;
    padding: 12px 15px;
    top:0;
    left: 20px;

}

 .toast-success {
    animation: my_message 5s;
    opacity:0;
}

@keyframes my_message{
        from {
            top: -20px; opacity: 100;}
        to{ top: -80px;
            opacity: 0;}
    
}

2024-06-18 CSS Input Field Label Animation 留言版文字框特效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列四：第1課 ── autosize 套件</title>
    <link rel="stylesheet" href="./01_js_autosize.css">

</head>
<body>
    <div class="bbs">
        <div class="inputBox">
            <input type="text" required spellcheck="false">
            <span class="labelline" >暱稱</span>
        </div>
        <div class="inputBox">
            <textarea name="message" rows="3" spellcheck="false" required></textarea>  
            <span class="labelline" >留言</span>
        </div>

        <div class="btn-container">
            <a href="#" class="btn">送出</a>
        </div>

    </div> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/6.0.1/autosize.min.js" integrity="sha512-OjjaC+tijryqhyPqy7jWSPCRj7fcosu1zreTX1k+OWSwu6uSqLLQ2kxaqL9UpR7xFaPsCwhMf1bQABw2rCxMbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./01_js_autosize.js"></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;

}
body{
    background-color: #f1f1f1;
}
.bbs {
    display: flex;
    align-items: center;
    flex-direction: column;   
    margin: 40px auto;
    max-width: 560px;
    min-height: 50vh;
    background-color: #1d2b3a;
    border-radius: 8px;
    box-shadow: rgba(116, 114, 114, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    padding: 30px;
    gap: 30px;
}

.inputBox{
    position: relative;
    width: 400px;
}
.inputBox input , textarea{
    width: 100%;
    border: 1px solid rgba(255,255,255,0.25);
    background: #1d2b3a;
    border-radius: 5px;
    outline: none;
    padding: 10px;
    /* color: #fff; */
    color: #bdbabac9;
    font-size: 1.5em;
    transition: 0.5s;
 }

 .inputBox textarea{
    resize: none;
 }

.inputBox span{
    position: absolute;
    left: 0;
    padding: 10px;
    pointer-events: none;
    font-size: 1em;
    color: rgba(255,255,255,0.25);
    transition: 0.5s;
}
 .inputBox input:focus ~ span ,
 .inputBox input:valid ~ span ,
 .inputBox textarea:focus ~ span,
 .inputBox textarea:valid ~ span
 { 
    color: #00dfc4;
    transform: translateX(10px) translateY(-9px);
    font-size: 0.9em;
    padding: 0 10px ;
    background: #1d2b3a;
    /* border-left: 1px solid #00dfc4 ;
    border-right: 1px solid #00dfc4 ; */
 }

 .inputBox input:focus  ,
 .inputBox input:valid  ,
 .inputBox textarea:focus,
 .inputBox textarea:valid 
 { 
    border: 1px solid #00dfc4 ;
 }

 


 .btn {
    
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    width: auto;
}
 .btn:hover{
    background-color: #00dfc5a5;
    
}

1
autosize(document.querySelectorAll('textarea'));

2024-06-19 JavaScript 系列四：第2課 ── vanilla-lazyload 套件

這次的套件是 https://github.com/verlok/vanilla-lazyload

文件與 demo 在 https://www.andreaverlicchi.eu/vanilla-lazyload/

當畫面上圖片很多的時候，頁面載入會很慢

lazy load 是所謂的延遲載入技術

也就是不會在一開始就通通載入，而是使用者在網頁上下滑動的時候，圖片元素出現在畫面中的時候，才動態去載入圖片

2024-06-20 CSS image 底下會有小小空白，解決方式:

因為圖片垂直對齊方式是base-line,所以圖片下面會有一點點空白，解決方式就是： 把圖片先抓出來單獨設定垂直對齊方式，可以是bottom top middle , 就是不要 base-line ,這樣圖片就會黏緊緊

1
2
3
img{
        vertical-align: bottom;
    }

2024-06-21 CSS RWD 試排版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 金魚都能懂的網頁設計入門-第二十一天 - RWD 試排版</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /* 因為圖片垂直對齊方式是base-line,所以圖片下面會有一點點空白，解決方式就是： 把圖片先抓出來單獨設定垂直對齊方式，可以是bottom top middle , 就是不要 base-line ,這樣圖片就會黏緊緊*/
        
        img{
            vertical-align: bottom;
        }
        .banner img{
            width: 100%;
        }
        .title{
            margin: 0 0px 20px;
            padding: 30px 10px;
            background-color: #ccc;
        }
        .title h2{
            text-align: center;
            font-size: 46px;
        }
        .title p{
            font-size: 22px;
            text-align: center;
        }
        .item{
            margin: 0 10px 40px;
        }
        .item h3{
            font-size: 24px;
            text-align: center;
        }
        .item .pic img{
            width: 100%;
        }
        .footer{
            background-color: #333;
            color: #aaa;
            text-align: center;
            padding: 10px 0px;
        }
        .item-group{
            width: 100%;
            /* 為了桌機版設定最大寬度 */
            max-width: 1400px;
            margin: auto;
        }

        .service{
            margin: 60px 0px;
            background-color:#ffa ;
        }
        /* 以上為手機版設定
        再來用 media query 來設定桌機版
        */
        /* 先設定平版  768px */
        @media screen and (min-width: 768px){
            .item-group{
        display: flex;}
            .service .item{
                display: flex;
            }
            .service .item .pic,
            .service .item .text{
                width:50%;
                margin: 0;
            }
            /* 手機版的 margin ok 但到桌機版下方會多出來，所以要單獨設定 margin */
            .service .item{margin: 0px;}
            
            .service .item .text{
                /* 設定右邊文字區土戈心一為橫排，文字置中 先以column 顯示，才能置中flex-direction: column; */
                display: flex;
                padding: 0px 20px;
                flex-direction: column;
                justify-content: center;
                /* 因為整個service 有點偏左歪去，所以要設定 box-size: border-box */
                box-sizing: border-box;

            }

        }
    
    </style>
</head>
<body>
    <!-- 1. 先做滿版區塊，banner裹面放一個圖片 -->
    <div class="banner">
        <img src="https://picsum.photos/1400/500/?random=3"> 
    </div>
    <!-- 2. 再來做一個about 區塊 ，會是固定寬，會主標題，底下有幾個欄-->
    <div class="about">
        <!-- 設計一個wrap 裹面放一個標題區，一個內容欄位區,這樣可以利用 wrap 做固定寬，接著利用item-group 去設定所有的item ，同時也把大標題與內容做區隔 -->
        <div class="wrap"> 
            <div class="title">
                <h2>關於我們</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A numquam maxime et debitis, eveniet fugit molestiae illum at facilis incidunt?</p>
            </div>
            <!-- 三欄區埤，裹面有 假圖 h3標題 簡單內文 -->
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=3">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=4">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=5">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="service">
        <div class="wrap">
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=5">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="about">
        <!-- 設計一個wrap 裹面放一個標題區，一個內容欄位區,這樣可以利用 wrap 做固定寬，接著利用item-group 去設定所有的item ，同時也把大標題與內容做區隔 -->
        <div class="wrap"> 
            <div class="title">
                <h2>關於我們</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. A numquam maxime et debitis, eveniet fugit molestiae illum at facilis incidunt?</p>
            </div>
            <!-- 四欄區埤，裹面有 假圖 h3標題 簡單內文 -->
            <div class="item-group">
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=31">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=41">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=51">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
                <div class="item">
                    <div class="pic">
                        <img src="https://picsum.photos/300/200/?random=61">
                    </div>
                    <div class="text">

                        <h3>title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui labore dignissimos nam, iusto possimus quaerat assumenda delectus vel quos quasi.</p>  
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="footer">
        &copy; copyright 2018 by lily
    </div>

</body>
</html>

2024-06-22 關於 垂直置中技巧:

關於 垂直置中技巧，參考Amos
https://csscoke.com/2018/08/21/css-vertical-align/

2024-06-23 關於 list-style CSS屬性詳細說明:

關於 list-style CSS屬性詳細說明，參考Amos iThome 鐵人賽：
https://ithelp.ithome.com.tw/m/articles/10251436 by CSScoke

2024-06-24 bootstrap RWD 初步了解:

RWD 效果：bootstrap把裝置分成五個尺寸 ,

手機 直 .col-佔欄數 「預設值」
手機 横 .col-sm-佔欄數

平板 直 .col-md-佔欄數
平板 橫 .col-lg-佔欄數

桌機 .col-xl-佔欄數

bootstrap 把版面切成12等份,就是佔欄數 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- 建構三欄有圖片的RWD 效果, 手機橫向不用設定，設定平版，因為大的會吃小的 , 圖片滿版，用img-fluid 的 class-->
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4">
        <div class="item">
          <img src="https://picsum.photos/300/200/?random=3" class="img-fluid">  
          <h3>title</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At beatae voluptas a reprehenderit corporis laborum illo laudantium saepe enim omnis?</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="item">
          <img src="https://picsum.photos/300/200/?random=3" class="img-fluid">  
          <h3>title</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At beatae voluptas a reprehenderit corporis laborum illo laudantium saepe enim omnis?</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="item">
          <img src="https://picsum.photos/300/200/?random=3" class="img-fluid">  
          <h3>title</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At beatae voluptas a reprehenderit corporis laborum illo laudantium saepe enim omnis?</p>
        </div>
      </div>
    </div>

  </div>

2024-06-25 bootstrap5已不支援jumbotron:

因Amos 是 bootstrap4 ，但bootstrap5已不支援jumbotron，所以用另種寫法:

1
2
3
4
5
6
7
<!-- 2. 大的banner 背景圖  -->
   <!-- bg-light is background color & p-5 is padding -->
<div class="banner container-fluid text-sm-center p-5 bg-light"> 
     
        <h1 class="display-4">Banner</h1>
        <p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae, voluptate.</p>
</div>

2024-06-26 在JQuery 之前，先宣告當文件準備好就做事:

1
2
3
4
5
6
7
8
<script>
   //ready 是jquery的一個方法
    $(document).ready{
        function(){
            //... 做事的位置
        }
    }
</script>

2024-06-27 DOM 遍歷與操作

什麼是 DOM？ Document Object Model ,
基本上文件在載入網頁時，你的瀏覽器會先把 HTML的樹狀目錄先建構出來。

2024-06-28 假圖

1
<img src="https://picsum.photos/300/200/?random=33">

2024-06-29 bootstrap 假圖 ,滿版用image-fluid

1
<img src="https://picsum.photos/300/200/?random=33" class="img-fluid">

2024-06-30 google CDN:

https://developers.google.com/speed/libraries?hl=zh-tw

2024-07-01 檔案格式有 min，就是經過壓縮的檔案:

bootstrap.min.css , 只要看到外連的檔案只要有 min , 就是壓縮過的檔案，就是去掉空白及換行，這樣檔案會比較小，關乎到網頁載入的速度。