Sharing & Linking: [Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 5

Bài 2:

css
html

Tạo thư mục CSS và lưu file lại với tên css/lab5.2.css

.cot{
    width: 25%;
    float: left;
}
.sanpham{
    border-radius: 10px; /* bo góc */
    box-shadow: 0 0 5px gray;
    padding: 10px;
    margin: 5px;
    text-align: center;
}
.cot .sanpham:hover{ /* duy chuyển chuột */
    box-shadow: 0 0 10px green;
}
.sanpham .ten{
    font-size: larger;
    font-variant: small-caps;
    color: blue;
}
.sanpham img{
    max-width: 95%;
}
.sanpham .gia{
    color: red;
    font-weight: bold;
    font-size: larger;
}
.sanpham .gia del{
    color: gray;
}

Tạo file html và link đến file css, các bạn có thể làm nhiều hình ảnh khác nhau.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 5 | Bài 2 Box Model và Layout</title>
    <link rel="stylesheet" href="css/lab5.2.css">

</head>
<body>
    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    
    
</body>
</html>

Kết quả:

Xong!

Sharing & Linking

Pages

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 5 - Box Model

Để có những bài viết tốt hơn, hãy cho chúng tôi bình luận của bạn về bài viết này. Cám ơn các bạn!

No comments:

Post a Comment