# 稀飯版 Day9
Date: 2024/10/07
### [CSScoke](https://youtu.be/n0yPFtpVRLU)
+ 重點：↓ 左上角的麵包屑 (下面那個只是順便切的)
+ 麵包屑 breadcrumb
+ 定義：指示當前頁面在導航層次結構中的位置 (簡單來說就是目錄結構的指引)
+ 範例：
```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
Sign in with Wallet
Connect another wallet