---
# System prepended metadata

title: '金魚都能懂的網頁切版 練習4: 交錯漂浮版'
tags: [切版]

---

# 金魚都能懂的網頁切版 練習4: 交錯漂浮版
###### tags: `切版`

![](https://i.imgur.com/2nKPtPO.png)

先設定好body內的wrap、item、pic和假圖網址
![](https://i.imgur.com/aLvGPgq.png)

複製四塊後，適時的加入註解很重要
![](https://i.imgur.com/WrjXNbo.png)

第二和第四張圖片的順序對調一下

把初始的格式分欄整理一下
![](https://i.imgur.com/ZS31VkN.png)

此時作畫面的調整都沒有問題，因為是flex
![](https://i.imgur.com/tAVP434.png)

寫到不想寫啦，直接貼程式碼，有空來做逐行解釋的練習~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切版練習4</title>
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

    <style type="text/css">
        @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            padding: 100px 0;
            background: linear-gradient(20deg,#3d5493,#1aa2a0) fixed center center /100% 100%;
        }
        .wrap{
            width: 1200px;
            margin: auto;
        }
        .item{
            display: flex;
            align-items: center;
            margin-bottom: 70px;
            font-family: 'Noto Sans TC', sans-serif;

        }
        .item h2{ font-weight: 900;}
        .item p{ font-weight: 300;}
        .item .pic{
            width: 55%;
            flex-shrink: 0;
        }
        .item .pic img{
            width: 100%;
            vertical-align: middle;
        }
        .item .txt{
            width: 55%;
            flex-shrink: 0;
            padding: 50px 30px;
            box-sizing: border-box;
            position: relative;
            z-index:1;
        }
        <!--使用大於符號，代表只能選到第一層物件-->
        .item > :first-child{
            margin-right: -10%;
        }
        .item:nth-child(1) .txt{
            background-color: rgb(240, 174, 193, .7);
        }
        .item:nth-child(2) .txt{
            background-color: rgb(42, 253, 208, .7);
        }
        .item:nth-child(3) .txt{
            background-color: rgb(254, 201, 121, 0.7);
        }
        .item:nth-child(4) .txt{
            background-color: rgb(149, 171, 166, 0.7);
        }

    
    </style>
</head>
<body>
    <div class="wrap">
        <!--Item1-->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350?random=10">
            </div>
            <div class="txt">
                <h2>金魚都懂的切版，你懂不懂?</h2>
                <p>金魚聽說只有七秒的記憶你，你大概幾秒呢?</p>
            </div>
            <div class="h2">
            </div>
            <div class="p">
            </div>
        </div>
        <!--Item2-->
        <div class="item">
            <div class="txt">
                <h2>我只有三秒</h2>
                <p>生而為人，我很抱歉(面壁)</p>
            </div>
            <div class="h2">
            </div>
            <div class="p">
            </div>
            <div class="pic">
                <img src="https://picsum.photos/600/350?random=20">
            </div>
        </div>
        <!--Item3-->
        <div class="item">
            <div class="pic">
                <img src="https://picsum.photos/600/350?random=10">
            </div>
            <div class="txt">
                <h2>龜兔賽跑的時候聽說烏龜贏了</h2>
                <p>我跑得比他們快，但我忘記在哪比了</p>
            </div>
            <div class="h2">
            </div>
            <div class="p">
            </div>
        </div>
        <!--Item4-->
        <div class="item">
            <div class="txt">
                <h2>求Donate!</h2>
                <p>把身上的x褲交出來，不要錢只要x褲!</p>
            </div>
            <div class="h2">
            </div>
            <div class="p">
            </div>
            <div class="pic">
                <img src="https://picsum.photos/600/350?random=20">
            </div>
        </div>
    </div>
</body>
</html>