介紹
成品
- 這是一個展現作品集的一頁式網頁
- 頁面的排版主要使用grid執行
- 網頁整的色調,練習
:root
設定
- 練習聯絡欄的排版
- 另外,有使用到一些些js的部分,如設定滾動的效果、點擊後畫面的變化,但因主要練習排版,所以筆記內容並未多加提及
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
| <header class="l-header">
<nav class="nav bd-grid"> <div> <a href="#" class="nav__logo">Jhon Doe</a> </div> <div class="nav_manue" id="nav-menu"> <ul class="nav_list"> <li class="nav_item"><a href="#home" class="nav_link">Home</a></li> <li class="nav_item"><a href="#abour" class="nav_link">About</a></li> <li class="nav_item"><a href="#skills" class="nav_link">Skills</a></li> <li class="nav_item"><a href="#portfolio" class="nav_link">Portfolio</a></li> <li class="nav_item"><a href="#contact" class="nav_link">Contact</a></li>
</ul>
</div> <div class="nav__toggle" id="nav-toggle"> <i class='bx bx-menu'></i> </div> </nav>
</header>
|
css 變數
1 2 3 4 5 6 7 8 9
| :root { --csscoke-red: #f00; }
.section-item { color: var( --csscoke-red ); }
|
csscoke
:root
中使用關鍵符號 –建立了一個 CSS 變數,並且給予該變數名稱叫做 csscoke-red ,然後給予這個變數名稱一個值 #f00
,這表示後面要套用這個變數名稱的項目,會直接取得這個 #f00
。
參考資料::root 根目錄選取器 - 叫你阿爸出來講
grid-template-columns
1 2 3 4 5 6 7 8 9
| .bd-grid{ max-width: 1024px; display: grid; grid-template-columns: 100%; grid-column-gap: 2rem; width: calc(100% - 2rem); margin-left: var(--mb-2); margin-right: var(--mb-2); }
|
卡伯斯
grid-template-columns 定義水平方向的空間,grid-template-rows 定義垂直方向的空間
.wrap {
grid-template-columns: repeat(2, 1fr 2fr) 100px;
/* grid-template-columns: repeat({次數}, {格線...} | {格線...}) | {格線...}; */
}
fr 這個單位,這個單位能夠將可用的 剩餘空間 做比例分割,以上面的 1fr 2fr 為例,空間將被分割成 1/3、2/3 兩個大小。
另一個是 repeat,可以重複隔線。
CSS Grid 屬性介紹
一行 CSS 程式碼搞定響應式佈局
CSS沒有極限 - CSS的神奇Calc運算
home
1 2 3 4 5 6 7 8 9 10 11 12
| .home__scroll{ align-self: flex-end; padding-bottom: var(--mb-4); }
.home__scroll-link{ writing-mode: vertical-lr; transform: rotate(-180deg); color: var(--white-color); }
|
skills
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
| <section class="skills section" id="skills"> <h2 class="section-title">Skills</h2>
<div class="skills__container bd-grid"> <div class="skills__box"> <h3 class="skills__subtitle">Development</h3> <span class="skills__name">Html</span> <span class="skills__name">Css</span> <span class="skills__name">Javascript</span> <span class="skills__name">Scss</span> <span class="skills__name">React</span> <span class="skills__name">Vue</span>
<h3 class="skills__subtitle">Design</h3> <span class="skills__name">Figma</span> <span class="skills__name">Adobe XD</span> <span class="skills__name">Photoshop</span> </div>
<div class="skills__img"> <img src="./img/skill.jpg" alt=""> </div> </div> </section>
|
.skills__container{
row-gap: 2rem;
} 使欄位2rem的空格
rem 也是相對的文字尺寸,和 em 使用方法接近,不同的是他僅相對於 root 層級的文字大小(網頁中的 html)。
如何更愉快地使用rem —— 別說你懂CSS相對單位
實際展示 EM 與 REM 的差異
1 2 3 4 5 6 7 8 9
| .skills__name{ display: inline-block; font-size: var(--small-font-size); margin-right: var(--mb-2); margin-bottom: var(--mb-3); padding: .25rem .5rem; background-color: var(--white-color); border-radius: .25rem; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| .contact__inputs{ display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; }
.contact__input{ width: 100%; padding: .8rem; outline: none; border: 1.5px solid var(--dark-color); font-size: var(--normal-font-size); margin-bottom: var(--mb-4); border-radius: .5rem; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .contact__button{ display: block; background-color: var(--first-color); color: var(--white-color); padding: .75rem 2.5rem; margin-left: auto; border-radius: .5rem; border: none; outline: none; font-size: var(--normal-font-size); cursor: pointer; }
|
參考資料:
1. z-index
CSS position 、 z-index 筆記│鼠年全馬鐵人挑戰 #13
合理使用z-index数值
2. 滾動
點擊連結之後,自動滾動到適當的位置
[CSS scroll-behavior和JS scrollIntoView讓頁面滾動平滑](https://www.itread01.com/fyehkp.html
3. icon
4. flex
圖解 Flexbox 基本屬性
練習來源:
youtube:Responsive Personal Portfolio Website HTML CSS And JAVASCRIPT | Mobile First