---
# System prepended metadata

title: 稀飯版 Day9
tags: [Layout, CSS, HTML]

---

# 稀飯版 Day9

Date: 2024/10/07

### [CSScoke](https://youtu.be/n0yPFtpVRLU)

+ 重點：↓ 左上角的麵包屑 (下面那個只是順便切的)
![麵包屑](https://i.imgur.com/ceiwVhL.png)

+ 麵包屑 breadcrumb
    + 定義：指示當前頁面在導航層次結構中的位置 (簡單來說就是目錄結構的指引)
    + 範例：
        ![breadcrumb in vscode](https://hackmd.io/_uploads/r1VLX9ZkJe.png)
        ![breadcrumb in notion](https://hackmd.io/_uploads/rJ6_m9-yke.png)


```html
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrap">
      <!-- 有順序性，因此語意上應該是 ol (ordered list) -->
      <div class="fa fa-folder"></div>
      <ol class="breadcrumb">
        <li><a href="#">GitHub</a></li>
        <li><a href="#">BitBucket</a></li>
        <li><a href="#">GitLab</a></li>
      </ol>
    </div>
    <div class="mainpage">
      <h3>Welcome to GitLab, RogelioKG!</h3>
      <p>
        Ready to get started with GitLab? Follow these steps to get familiar
        with us:
      </p>
      <!-- 固定寬度 -->
      <div class="card-container">
        <div class="card">
          <div class="content">
            <div class="subtitle">
              <i class="fa fa-file"></i>
              <a>Create a project</a>
              <i class="fa fa-arrow-right"></i>
            </div>
            <div class="txt">
              Projects are where you store your code, access issues, wiki, and
              other features of GitLab.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <div class="subtitle">
              <i class="fa fa-file"></i>
              <a>Explore public projects</a>
              <i class="fa fa-arrow-right"></i>
            </div>
            <div class="txt">
              Public projects are an easy way to allow everyone to have
              read-only access.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <div class="subtitle">
              <i class="fa fa-group"></i>
              <a>Create a group</a>
              <i class="fa fa-arrow-right"></i>
            </div>
            <div class="txt">
              Groups are the best way to manage projects and members.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="content">
            <div class="subtitle">
              <i class="fa fa-lightbulb-o"></i>
              <a>Learn more about GitLab</a>
              <i class="fa fa-arrow-right"></i>
            </div>
            <div class="txt">
              Take a look at the documentation to discover all of GitLab's
              capabilities.
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
```

```css
/* style.css */

/******************** Main Starts ********************/
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Noto Sans TC", sans-serif;
}

body {
  background-color: #18171d;
  height: 2000px;
  color: white;
}
/******************** Main Ends ********************/

/******************** Breadcrumb Starts ********************/
/* 仿 GitLab 的 breadcrumb  */
.wrap {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 10px 0;
  background: #18171d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
}

.fa-folder {
  font-size: 25px;
  padding: 15px;
}

.breadcrumb {
  width: 90%;
  display: flex;
  align-items: center;
}

.breadcrumb li {
  padding: 0 15px; /* 重點 - 麵包屑分隔線：
  左右 padding */
}

/* 
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
說明：選取每個 li 的後面那個 li (這樣第一個就不會被選取到)
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
*/
.breadcrumb li + li {
  padding-left: 0; /* 重點 - 麵包屑分隔線：
  但非第一個的 li 左邊不要 padding */
}

.breadcrumb li + li::before {
  content: "/";
  padding-right: 15px; /* 重點 - 麵包屑分隔線：
  但分隔線右邊要 padding */
}

.breadcrumb li:last-child a {
  font-weight: 500;
}

.breadcrumb a {
  font-size: 20px;
  font-weight: 300;
  color: white;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: white underline;
}

/******************** Breadcrumb Ends ********************/

/******************** Welcome Starts ********************/

.mainpage {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.mainpage > h3 {
  font-size: 40px;
  font-weight: 700;
  margin-top: 100px;
  margin-bottom: 20px;
}

.mainpage > p {
  font-size: 20px;
  margin-bottom: 50px;
}
/******************** Welcome Ends ********************/

/******************** Cards Starts ********************/
.card-container {
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  width: 475px;
  margin: 10px;
  background: #28272d;
  border: 1px solid #333;
  border-radius: 5px;
}

.card .content {
  padding: 20px;
}

.card .content .subtitle {
  margin-bottom: 5px;
  transition: color 300ms;
}

.card .content .subtitle i {
  font-size: 22px;
  padding-right: 5px;
}

.card .content .subtitle i:last-child {
  opacity: 0;
  transform: translateX(0);
  transition: 300ms;
}

.card .content .subtitle a {
  font-size: 18px;
  font-weight: 700;
}

.card .content .txt {
  font-size: 18px;
}

/* hover */

.card:hover {
  cursor: pointer;
}

.card:hover .content .subtitle {
  color: rgb(0, 183, 255);
}

.card:hover .content .subtitle a {
  text-decoration: rgb(0, 183, 255) underline;
}

.card:hover .content .subtitle i:last-child {
  opacity: 1;
  transform: translateX(5px);
}

/******************** Cards Ends ********************/
```

### My Practice