CSS-文字向左右對齊，並垂直置中

Posted on

CSS-文字向左右對齊，並垂直置中

目標效果

方法一

  • 將外層容器定義為flex容器，且其中的items向容器中間對齊
  • 定義外層容器中的item與item之間保持相同的空間距離

實作方法一

1
2
3
4
5
6
7
8
<div class="header">
    <div  class="left">
         我是左邊文字
    </div>
    <div class="right">
        我是右邊文字內容
    </div>
</div>
1
2
3
4
5
.header{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}


補充：當定義元素為彈性容器，而它的子元素們就會變成彈性項目。

  • flex 值會讓彈性容器變成塊級元素（block-level element）
  • inline-flex 則會讓彈性容器成為單一的行內元素（atomic inline-level element）。

方法二

  • 定義外層容器為彈性容器
  • 定義內層item的寬度佔比為1:1填滿整個容器
  • 內層item的文字各自靠左及靠右

    實作方法二

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .header{
        display: flex;
        align-items: center;
    }
    .left{
        flex: 1;
        text-align: left;
    }
    .right{
        flex: 1;
        text-align: right;
    }

成果

My Project-Profile-Projects page

CSS-由左到右、由右到左，利用direction-reserve排版

Posted on

CSS-由左到右、由右到左，利用direction-reserve排版

概念

  • 定義外層容器為一個靈活盒子
  • 使用flex-direction定義「由右到左」、「由左到右」的兩種排版類別
  • 兩種排版交互使用

    實作

  • 定義外層容器display: flex
  • flex-direction:row:row方向預設值為「由左到右」
  • flex-direction:row-reverse:方向反轉則為「由右到左」
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div class="pieces-group">
        <div class="piece content-right">
            <div class="piece-photo"></div>
            <div class="piece-content"></div>
        </div>
        <div class="piece content-left">
            <div class="piece-photo"></div>
            <div class="piece-content"></div>
        </div>
        <div class="piece content-right">
            <div class="piece-photo"></div>
            <div class="piece-content"></div>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
.piece{
    display: flex;
}
.content-right{
    flex-direction:row;
}
.content-left{
    flex-direction:row-reverse;
}
  • 定義小螢幕尺寸時，容器內的items方向為column「由上到下」
    1
    2
    3
    4
    5
    @media screen and (max-width: 994px){
        #projects-section .piece{
                flex-direction:column;
            }
    }

成果

My Project-Profile-Education page
Uploading file..._0x20yjeh0

CSS-使用Flexbox，垂直置中float元素

Posted on

CSS-使用Flexbox，垂直置中float元素

目標效果

讓兩個浮動元素，可以垂直對齊

原始情況

放置兩個浮動元素，它們各自都向上靠其所在的容器

1
2
<div class="box1">box1</div>
<div class="box2">box2</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.margin{
  margin-top:50px;
}
.box1{
  width:200px;
  background: #F0780D;
  height:100px;
  float:left;
}
.box2{
  width:300px;
  background: #F0C7B2;
  height:50px;
  float:right;
}

作法

在外層容器中，使用display: flex，並且置中

1
2
3
4
5
.container{
  margin-top:50px;
  display: flex;
  align-items: center;
}

垂直對齊vertical-align: middle無效

在css官方文件中說明：“vertical-align屬性，僅能使用於inline 或 table-cell box”，所以flaot元素無法使用此方法

1
2
3
4
<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>
1
2
3
.container{
  vertical-align: middle;
}

CSS-刻出一個timeline

Posted on

CSS-刻出一個timeline

概念

  • 設定一個最外層div空間
  • 直線：利用偽元素(Pseudo Element)」::after的繼承特性，會繼承原本元素的屬性，畫出一個與空間一樣高的元素。定義該偽元素的邊框，製作出直線的效果。並且運用絕對定位，讓直線可以定位在中間。
  • 時間文字：在卡片前後各自放上時間開始、結束時間的div空間
  • 時間圓圈：利用偽元素::before繪製出，以「時間文字」座位定位參考點，使用絕對定位讓兩這位置呈現水平對齊。
  • 卡片：最後再針對自己的喜好定義卡片的樣式
  • 若要製作出左右交叉的效果，再使用class分類針對左右交叉的卡片各自做定位定義
  • 最後在針對小螢幕，使用＠medis定義位置、樣式

實現

  • html佈局：參考要呈現畫面的效果，由上到下規劃好div空間

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div class="timeline-section">
        <div class="container left">
            <div class="time">
                <span>2019 MAR</span>
            </div>
            <div class="card">
            </div>
            <div class="time">
                <span>2019 FEB</span>
            </div>
        </div>
    </div>

  • timeline-section
    因為最外層的timeline-section空間，將被用來作偽元素timeline的定位基準點，所以切記要定義position屬性

    1
    2
    3
    4
    .timeline-section{
        position: relative;
        background-color: #EDEEF0;
    }

  • timeline

    1. 使用偽元素::after，製作出一個timeline元素
    2. 其定位方式為絕對定位position: absolute，才可以製作出元素重疊的效果(畫面中呈現，timeline::after是重疊在timeline-section上方)
    3. 使用top、left、bottom、right定位
    4. 使用height: 100%，是強制它的高度跟一樣高
    5. 定義border，繪製出線條
    6. 因為我們運用這個偽元素只是要用邊框製造出線條，其中並不會放置內容物，所以content屬性定義為空
    7. 若想製作出實心效果，定義width為0;相反地，如果想要有空心效果，可以定義為其他數值，也可以定義background-color填充中間的色彩
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      .timeline::after{
          position: absolute;
          top:0;
          height: 100%;
          left:50%;
          border:3px solid #56332e;
          content:'';
          width: 0px;
          background-color: #56332e;
          margin-left: -3px;
      }

  • time
    因為time會被內層元素用來做定位，所以切記要定義position屬性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .time{
        position: relative;
        width: 120px;
        font-weight: bolder;  
    }
    .time span,{
        color: #56332e;
        position: absolute;
        top:-10px;
    }

  • 時間圓圈

    1. 使用偽元素::before，製作出一個元素
    2. 其定位方式為絕對定位position: absolute，才可以製作出元素重疊的效果
    3. 為了確保出現在最上層，可以定義z軸
    4. 定義該空間的寬高
    5. 繪製該空間邊框border、圓角border-radius
    6. 因為我們運用這個偽元素只是要用邊框製造出線條，其中並不會放置內容物，所以content屬性定義為空
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      .time span:before{
          position: absolute;   
          z-index: 1;
          width: 25px;
          height: 25px;
          border: 4px solid #56332e;
          border-radius: 50%;
          background-color: white;
          content:'';
      }

  • card
    依個人喜好，定義好卡片的樣式

    1
    2
    3
    4
    5
    6
    7
    .card{
        padding:20px 5px;
        background-color: #fff;
        border: none;
        color: #56332e;
        box-shadow: 0px 1px 15px rgba(86, 51, 46, 0.6);
    }

  • 左右交叉

  1. 額外在html中給予right、left類別
  2. 利用css選擇器，針對左右的卡片的內容物，給予不同的定義
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="timeline-section">
        <div class="container left">
            <div class="time">
                <span>2019 MAR</span>
            </div>
            <div class="card">
            </div>
            <div class="time">
                <span>2019 FEB</span>
            </div>
        </div>
        <div class="container right">
            <div class="time">
                <span>2019 MAR</span>
            </div>
            <div class="card">
            </div>
            <div class="time">
                <span>2019 FEB</span>
            </div>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.left .content{
    padding-right:15px;
    left:0;
}
.left .time{
    left:50%;
}
.left .time span:before{
    text-align: left;
    left: -30px;
}
.left .time span{
    left:18px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.right .content{
    padding-left:15px;
    left:50%;
}
.right .time{
    left: 50%;
}

.right .time span:before{
    text-align: right;
    left: 80px;
}

.right .time span {
    left:-92px;
}

  • 針對小螢幕做調整
    如果螢幕尺寸低於380px，就套用以下設定

註：如果針對「(max-width: 576px)」有額外定義，程式碼需寫在上方，數字越大，要先寫

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
@media screen and (max-width: 380px){
    .timeline::after{
        left:60px;
    }
    #timeline-section .container{
        padding-left: 10px;
    }
    #timeline-section .left .content, #timeline-section .right .content{
        width: 70%;
        left:25%;
        text-align: left;
    }

    #timeline-section .left .time, #timeline-section .right .time{
        left:30px;
        right: 0;
        width: 10px;
        text-align: right;
        line-height: 15px;
        font-size: 12px;
    }
    #timeline-section .left .time span, #timeline-section .right .time span {
        left:-30px;
    }
    #timeline-section .right .time span:before,#timeline-section .left .time span:before{
        text-align: right;
        left: 40px;
    }
    #timeline-section .right .time span:before, #timeline-section .left .time span:before{
        content:'';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: white;
        border: 3px solid #2B6073;
        border-radius: 50%;
        z-index: 1;
    }
}

成果

My Project-Profile-Programing section

CSS-圖片邊框

Posted on

CSS-圖片邊框

概念

分為兩層div空間

  • 先定義下方piece空間的邊框角度
  • 再定義上方piece-photo空間的邊框角度
  • 最後定義上方piece-photo的背景，用background-imgage屬性引入圖片

實作

外層：定義外層div空間的寬高、原角邊框等樣式設定
內層：

  1. 先定義「內層空間的寬高」、原角邊框
  2. background-image引入圖片之後，要定義「被引入圖片的寬高」、定位等設定

補充：更多圖片屬性設定參考 html&CSS-插入(背景)圖片的作法-從css選擇器中定義背景

1
2
3
<div class="piece">
    <div class="piece-photo"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.piece{
    width: 300px;
    background-color:white;
    border-radius: 0.25rem;  
}
.piece-photo{
    background-size: 300px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem; 
    
    background-image: url("../img/meal1.jpg");
    background-position: 50% 50%;
    background-attachment: scroll;
    width: 300px;
    height: 200px;
}

成果

My Project-Profile-Education page

CSS-設置背景overlay

Posted on

CSS-設置背景overlay

概念

將「下方圖片」、「上方覆蓋色塊」分為兩層(兩個div)

  • 外層的背景為一張圖片
  • 內層的背景為透明色彩

註：外層div會先畫，因此在畫面會呈現在下方;相反的，內層div會後畫，在畫面中會呈現蓋在上方

實作

最外層div的背景使用一張圖片(background-image屬性)，內層div的背景使用rgba的透明色彩

1
2
3
<div cless="section">
    <div class="white-overlay"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
.section{
    background-image: url("../img/education-bg.jpg");
    background-repeat: no-repeat ;
    background-size: cover;
    background-attachment: fixed;
    min-height: 1200px;
}
.white-overlay{
    background-color: rgba(255, 255, 255, 0.3);
    min-height: 1200px;
}

成果

My Project-Profile-Notes page

CSS-在容器中分配並行空間(flex)

Posted on

CSS-在容器中分配並行空間(flex)

使用時機

希望容器之內的物件可以並行接續排列，並且每個物件都有固定比例占據該容器

CSS語法

  • 外層容器的display屬性為flex

    1
    2
    3
    .container{
        display: flex;
    }

  • 在內層物件中，各自定義佔據的寬度或剩餘空間的分配比例

  • 當 ==外層容器的空間足夠== 的情況：

    • box1有設定width，會佔據固定寬度300px
    • box2有設定width，會佔據固定寬度200px

    • box3、box4沒有設定固定寬度，僅設定flex比例，則會依比例分配剩餘的空間

  • 為了避免 ==外層容器空間不足== ，可以min-width輔助定義最小的寬度

    • box2因為沒有設定min-width，所以被擠壓到完全沒有空間

定義是否自動換行(flex-wrap)

  • 定義「不換行」（flex-wrap預設值即為no-wrap，可省略不寫），可能會壓縮內層物件的寬度

    1
    2
    3
    4
    .container{
        display: flex;
        flex-wrap: no-wrap;
    }

  • 定義「自動換行」

    1
    2
    3
    4
    .container{
        display: flex;
        flex-wrap: wrap;
    }

  • 定義「換行後反轉」

    1
    2
    3
    4
    5
    .container{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
    }

定義排序方向(flex-direction)

  • 定義排序方向為「左到右」（flex-direction預設值即為row，可省略不寫）

    1
    2
    3
    4
    .container{
        display: flex;
        flex-direction: row; 
    }

  • 定義排序方向為「右到左」

    1
    2
    3
    4
    .container{
        display: flex;
        flex-direction: row; 
    }

  • 定義排序方向為「上到下」

    1
    2
    3
    4
    .container{
        display: flex;
        flex-direction: column;
    }

  • 定義排序方向為「下到上」

    1
    2
    3
    4
    .container{
        display: flex;
        flex-direction: column-reverse;
    }

html-建立第一個Hello world網頁

Posted on

html-建立第一個Hello world網頁

使用工具

  • Mac電腦(ios系統)
  • VScode編譯器

    步驟

  1. 開啟電腦內建的「文字編譯」，新增一個檔案
  2. 暫時先命名為index，並且設定為「純文字格式」
  3. 輸入內容「Hello world!」，並儲存
  4. 更改檔案副檔名「.html」
  5. 直接點選開檔案，或拖曳到瀏覽器打開檔案，即可看到網頁成功顯示

Git基本指令

Posted on

Git基本指令

終端機環境系統指令

不同的作業系統，指令也會不太一樣。
|Windows| MacOs | 說明 |
|——–| ——– | ——–|
| cd | cd | 切換目錄 |
| cd | cd| 切換目前所在位置 |
| dir | ls| 列出目前檔案列表 |
|mkdir| mkdir | 建立新的目錄|
|無| touch | 建立檔案|
|copy| cp | 複製檔案|
|move| mv | 移動檔案|
|del| rm | 刪除檔案|
|cls| clear | 清除畫面上的內容|

目錄切換及顯示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//切換到/tmp目錄(絕對路徑)
$ cd/tmp

//切換到my_project目錄(絕對路徑)
$ cd my_project

//切換到上一層目錄(相對路徑)
$ cd ..

//切換到使用者的home目錄中的project裡的namecards目錄
// "~"這個符號代表home目錄
$ cd ~/project/namecards

//顯示目前所在的目錄
$ pwd

檔案列表

ls指令可列出在目前目錄所有的檔案及目錄，後面接的 -al 參數，a 是指連小數點開頭的檔案（例如.gitignore）也會顯示，l 則是完整檔案的權限、擁有者以及建立、修改時間

1
2
3
4
5
//列出目前所在目錄的所有檔案及目錄
$ ls

//列出目前所在目錄的所有檔案及目錄，包含副檔名及檔案權限等資訊
$ls -al

目錄切換及顯示

開啟終端機(terminal)，並試著操作以下指令，從建立一個全新的目錄開始。

1
2
3
4
5
$ cd /tmp                  //切換至 /tmp 目錄
$ mkdir git-practice       //建立 git-practice 目錄
$ cd git-practice          //切換至 git-practice 目錄
$ git init                 //初始化這個目錄，讓 Git 對這個目錄開始進行版控
Initialized empty Git repository in /Users/leah/git-practice/.git/

:::info
小數點開頭的目錄或檔案名稱（例如 .git），在一些作業系統中預設是隱藏的，需要開啟檢視隱藏檔之類的設定才看得到。
:::

:::info
Shift+Command+ .就可以顯示出隱藏的檔案
:::

把檔案交給Git控管

先查詢目前目錄的狀態，下面產生的訊息意思是「現在沒東西可以提交（nothing to commit）」。

1
2
3
4
5
6
7
//查詢現在這個目錄的狀態
$ git status 
On branch master

No commits yet

nothing to commit (create/copy files and use "git add" to track)

接下來， 建立一個檔案(也可以用一般的文字編輯器或檔案管理員來完成)

1
2
//在這個目錄裡透過系統指令建立一個內容為 “hello, git”
$echo "Hello,git" > welcome.html

檢查目錄，確實多了一個welcome.html檔案

並且，再次檢查目前目錄的狀態

welcome.html 檔案目前的狀態是 Untracked files，意思是這個檔案尚未被加到 Git 版控系統裡，還沒開始正式被 Git「追蹤」，它只是剛剛才加入這個目錄而已。

1
2
3
4
5
6
7
8
9
10
11
$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	welcome.html

nothing added to commit but untracked files present (use "git add" to track)

把 welcome.html 這個檔案交給 Git，讓 Git 開始「追蹤」它

1
2
//新增檔案讓git追蹤
$ git add welcome.html

最後再檢查一次狀態

1
2
3
4
5
6
7
8
9
$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

	new file:   welcome.html

© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量次
Theme by hiero