search

Lichen5221 / Report-Daily

記錄每日上課內容與作業。
0 stars 0 forks source link

2021-05-28 #39

Open Lichen5221 opened 3 years ago

Lichen5221 commented 3 years ago

交錯版型

html 檔：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Test</title>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <div class="wrap">
      <!-- item 1 -->
      <div class="item">
        <div class="pic">
          <img src="https://picsum.photos/600/350/?random=1" />
        </div>
        <div class="text">
          <h2>交錯版型</h2>
          <p>交錯版型看起來很難</p>
        </div>
      </div>
      <!-- item 2 -->
      <div class="item">
        <div class="text">
          <h2>交錯版型</h2>
          <p>但好像又不難</p>
        </div>
        <div class="pic">
          <img src="https://picsum.photos/600/350/?random=2" />
        </div>
      </div>
    </div>
  </body>
</html>

CSS 檔：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

body{
    padding: 100px 0;
    background: linear-gradient(20deg, #3d5493, #1aa2a0)
    fixed center center / 100% 100%; /* fixed 能讓顏色固定不隨著捲軸跑*/
}

.wrap{
    width: 1200px;
    margin: auto;
}

.item{
    display: flex;
    align-items: center;
    margin-bottom: 70px;
}

.item .pix{
    width: 55%;
    flex-shrink: 0;
}

.item .pic img{
    width: 100%;
    vertical-align: middle;
}

.item .text{
    width: 55%;
    background-color: #fa8;
    flex-shrink: 0; /* 讓 flex 自由調整的能力消失 */
    padding: 50px 30px;
    box-sizing: border-box; /* 修正邊框 */
    position: relative; /* 讓所有文字都在第一層 */
    z-index: 1;
}

.item > :first-child{
    margin-right: -10%;
}

.item:nth-child(1) .text{
    background-color: rgba(240, 174, 193, 0.7);
}
.item:nth-child(2) .text{
    background-color: rgba(42, 253, 208, 0.7);
}