Let's Code
0%

CSS練習- portfolio web page 作品集網頁

Posted on Edited on

介紹

成品

  • 這是一個展現作品集的一頁式網頁
    • 頁面的排版主要使用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 =====-->
 <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>

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
<!--===== SKILLS =====-->
    <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;
}
  • 中間的技能名稱設定

contact

  • 輸入框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* name,email */
.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-right:auto<會靠左邊 */
     margin-left: auto; 
    border-radius: .5rem;
    border: none;
    outline: none;
    font-size: var(--normal-font-size);
    cursor: pointer;
}

footer

參考資料：

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