# 金魚都能懂的網頁切版 練習4: 交錯漂浮版
###### tags: `切版`
先設定好body內的wrap、item、pic和假圖網址
複製四塊後，適時的加入註解很重要
第二和第四張圖片的順序對調一下
把初始的格式分欄整理一下
此時作畫面的調整都沒有問題，因為是flex
寫到不想寫啦，直接貼程式碼，有空來做逐行解釋的練習~
<!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>
Sign in with Wallet
Connect another wallet