[DAY30]網頁切版入門及版面實作_電子名片

2022 iThome 鐵人賽

DAY 30

Modern Web

網頁切版入門及版面實作系列第 30 篇

14th鐵人賽網頁設計網頁切版 css教學新手上路

ruhui0726

團隊蝦兵蟹將

2022-10-15 11:33:10

1028 瀏覽

分享至

電子名片

在這個範例中要練習電子名片的切版

整理幾個小重點如下方：

1.設定名片的寬高為390x240px，並導圓角15px，添加陰影box-shadow
2.名片背景色分為上下層，可以使用漸層來製作，漸層軸為180度，從#fde6e6開始漸層50%位置，到#ffc7c7漸層50%位置結束background-image: linear-gradient(180deg, #fde6e6 50%, #ffc7c7 50%)
3.font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距
4.排版方式為左文右圖，因此在container設定display: flex讓資料橫排顯示
5.使用justify-content: space-around讓資料可以平均排列每個物件，讓每個物件周圍分配相同的空間
6.使用align-items: center讓資料可以置中對齊
7.消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/JjvGNqL

HTML

<script src="https://kit.fontawesome.com/d90a297e2d.js" crossorigin="anonymous"></script>
<body>
    <div class="name_card">
        <div class="container">
            <div class="text">
                <h1>小白人的生活
                </h1>
                <span>Designer RuHui</span>
            </div>            
            <div class="pic">
                <img src="https://i.ibb.co/S59kSH9/mini-work.png" alt="">
            </div>
        </div>
        <div class="container">
            <ul>
                <li><i class="fa-sharp fa-solid fa-house"></i>地址:BT21星球</li>
                <li><i class="fa-solid fa-phone"></i>電話:0988168168</li>
                <li><i class="fa-solid fa-envelope"></i>Email:mini@mini.mail</li>
            </ul>
        
            <div class="pic">
                <img src="https://i.ibb.co/nb1TqG4/QRCODE.png" alt="">
            </div>
        </div>
    </div>
</body>

CSS

.name_card{
    width:390px;
    height:240px;
    margin:50px auto;
    letter-spacing:1px;
    color:#f39c9c;
    border-radius:15px;
    background-image: linear-gradient(180deg, #fde6e6 50%, #ffc7c7 50%);
    box-shadow:0px 30px 15px -20px rgba(53, 51, 51, 0.2);
}
.container{
    padding:10px 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.container h1{
    font-size:24px;
    font-weight:600;
    line-height: 2;
}
.container span{
    color:#f39c9c;
    font-weight:500;
    font-size: 18px;
    line-height: 2;
}
.container ul{
    font-size:13px;
    color:#4e4e4e;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 2px;
}
.container i{
    color: #fff3bd;
    padding-right: 10px;
}

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