iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

1995到2021,php到react網站開發歷程系列 第 24

DAY24-資訊卡頁面設計

截圖 2021-09-20 下午8.35.19.png

前言:

昨天我們介紹了一個普通的資訊頁面是如何完成的,今天我們要來介紹另一個很常用到的頁面種類,資訊卡頁面!

那廢話不多說,先來看看效果吧!

長這樣:

截圖 2021-09-20 下午8.50.47.png

再來是當畫面縮小的效果:

截圖 2021-09-20 下午9.00.23.png

最後是手機畫面:

截圖 2021-09-20 下午9.02.27.png

這裡我透過各種排版,讓資訊卡不至於因畫面尺寸而出現overflow的狀況。

那現在就來看這頁面的架構吧!

React架構:

import React from 'react'
import { 
TeamCard, TeamIcon, 
TeamP, TeamWrapper,
TeamContainer, 
TeamTitle, TeamH2 } from './TeamElements'
import rk from '../../images/318.png'
import alu from '../../images/murmur.jpg'
import sen from '../../images/mydino.jpg'
import jc from '../../images/516.png'
import fd from '../../images/713.png'

const Team = () => {
    return (
        <TeamContainer id="Team">
            <TeamTitle>Team</TeamTitle>
            <TeamWrapper>
                    
                    <TeamCard >
                        <TeamIcon src = {rk} />
                        <TeamH2>RK / Project Lead</TeamH2>
                        <TeamP>Functioning 24/7.</TeamP>
                    </TeamCard>

                    <TeamCard >
                        <TeamIcon src = {alu} />
                        <TeamH2>Mur** / Dev</TeamH2>                       
                        <TeamP>A Schwarzwälder Kirschtorte Lover with a small killifish.</TeamP>
                    </TeamCard>

                    <TeamCard  >
                        <TeamIcon src = {fd} />
                        <TeamH2>Sleepy foodie/ Design</TeamH2>
                        <TeamP>Everything is delicious as long as you add salt.</TeamP>
                    </TeamCard>

                    <TeamCard  >
                        <TeamIcon src = {sen} />
                        <TeamH2>Sen / Dev</TeamH2>
                        <TeamP>Nerdy life struggler.</TeamP>
                    </TeamCard>

                    <TeamCard  >
                        <TeamIcon src = {jc} />
                        <TeamH2>Sleepy J / Design</TeamH2>
                        <TeamP>Need some alcohol.</TeamP>
                    </TeamCard>

                </TeamWrapper>
            
        </TeamContainer>
    )
}

export default Team

以上就大概是這個資訊卡頁面的架構,應該很好理解。分別是最大的一個TeamContainer把整個頁面包住,裡面有Title跟TeamWrapper,後者就是負責包住資訊卡的元件。

而每張資訊卡里都有一個Icon,表示每個成員的圖片;H2當大標題,顯示成員名稱;P則是用來寫成員介紹的元件。

接下來重點就是Style-components的寫法了。

TeamElements:

import styled from "styled-components";

export const TeamContainer = styled.div`
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000000;
    padding-bottom: 5%;

    @media screen and (max-width: 768px) {
        height: fit-content;
    }    
`

export const TeamWrapper = styled.div`
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    grid-gap: 50px;
    padding: 0 0;
    
    @media screen and (max-width: 1225px) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
`

export const TeamCard = styled.div`
    
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    height: 40vh;
    width: 200px;
    padding: 0px 0px;
    padding-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;

    &:hover {
        transform: scale(1.1);
        transition: all 0.2s ease-in-out;
        
    }
    @media screen and (max-width:1312px){
        height: 300px;
        width: 200px;
        margin: 5% 0;
    }
`

export const TeamIcon = styled.img`
    height: 200px;
    width: auto;    
    border-radius: 10px;

    @media screen and (max-width:768px){
        height: auto;
        width: 200px;
    }
`

export const TeamTitle = styled.h1`
    transform: translateY(0%);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 3%;
    text-align: center;

    @media screen and (max-width:768px) {
        margin-top: 0%;
        font-size: 2rem;
    }
`

export const TeamH2 = styled.h2`
    font-size: 1rem;    
    text-align: center;
    font-weight: 900;
    
`

export const TeamP = styled.p`
    font-size: 1rem;
    text-align: center;
    line-height: 25px;
`

為了達成一開始演示的效果,我在TeamWrapper的地方是這樣寫的:

export const TeamWrapper = styled.div`
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-content: center;
    grid-gap: 50px;
    padding: 0 0;
    
    @media screen and (max-width: 1225px) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
`

可以看到先試用grid的顯示方法,grid-template-columns用成1fr 1fr 1fr 1fr 1fr,達到五張卡並排的效果。

再來是當開啟裝置寬度小於1225px的時候,這時候會改成每行三張卡的顯示方式,也就是最上面的第二張圖。

最後是裝置寬度小於768px時,就會一次放一張,也就是最後手機開啟的效果。

從以上可以看到style components就是利用@media這個方法來做不同寬度時的版面控制,跟css不一樣的是他寫在每一個Tag裡面,不像css是整合成一塊,更有前面說過的控制物件的感覺。

小結:

今天我們介紹了資訊卡頁面的設計方法,當然這都只是很初階的樣貌,要進一步做更多特效都是可以的。
那今天就先這樣!我們明天見。


上一篇
DAY23-一般頁面設計
下一篇
DAY25-問答頁面設計
系列文
1995到2021,php到react網站開發歷程30

尚未有邦友留言

立即登入留言