2021-05-29 - Githubissues

橫向通用版面

可以自行增減畫面數量，加入 marging-bottom 等可以增加框與框之間的距離。

html 檔：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Test</title>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <div class="wrap">
      <div class="container"> <!-- 固定寬度的容器 -->
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=1" />
          </div>
          <div class="text">
            <h2>大劍</h2>
            <p>重量極重，揮舞起來無法過於華麗，但同樣傷害很高。</p>
            <a href="#" class="btn">more</a>
          </div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=2" />
          </div>
          <div class="text">
            <h2>操蟲棍</h2>
            <p>透過蟲幫忙吸收精華加強獵人本身體質，善用者可遁地飛天，連空中的龍都能輕鬆打下來。</p>
            <a href="#" class="btn">more</a>
          </div>
        </div>
        <div class="item">
          <div class="pic">
            <img src="https://picsum.photos/400/400?random=3" />
          </div>
          <div class="text">
            <h2>雙劍</h2>
            <p>爆發潛藏在體內的鬼人之力，大幅增加移動速度與攻擊力，副作用是隔天會全身無力？</p>
            <a href="#" class="btn">more</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS 檔：

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

.wrap{
    height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(-30deg, #fdaecb, #e7507f, #fe8556);
}

.container{
    width: 1200px;
    margin: auto;
    display: flex;
}

.item{
    width: 368px;
    margin: 0 15px;
    display: flex;
    background-color: #fff;
    border: 1px solid #888; /* 加邊框，前面寬度數字要調整。*/
    box-shadow: 0 10px 30px rgba(160, 0, 0, 0.5); /* 陰影通常要跟背景融合在一起會比較好看 */
}

.item .pic{
    width: 50%;
}

.item .pic img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* IE 不支援，當圖片變形時調整。*/
}

.item .text{
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
    display: flex; /* 文字變橫排 */
    flex-direction: column; /* 讓文字變回直排 */
}

.item .text h2{
    margin-bottom: 0.4em;
}

.item .text .btn{
    line-height: 1.5em;
    border: 1px solid #ccc;
    padding: 0 1em;
    align-self: flex-end;
    text-decoration: none; /* 拿掉底線 */
    border-radius: 200px;
    margin-top: auto;
    color: #aaa;
}

.item .text .btn:hover{
    background-color: #ccc;
    color: #fff;
}

Lichen5221 / Report-Daily

2021-05-29 #40

橫向通用版面