Flex综合案例3 - 博客详情

使用Flex布局实现课程列表效果
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
</head>
<body>
<div id="main">
    <dl class="item">
        <dt><img src="https://img.simoniu.com/css3基础教程_logo.jpg"></dt>
        <dd>Css3基础教程</dd>
    </dl>
    <dl class="item">
        <dt><img src="https://img.simoniu.com/javase基础教程_logo2.jpg"></dt>
        <dd>JavaSe基础教程2020版</dd>
    </dl>
    <dl class="item">
        <dt><img src="https://img.simoniu.com/HTML基础教程_logo.jpg"></dt>
        <dd>HTML5基础教程</dd>
    </dl>
    <dl class="item">
        <dt><img src="https://img.simoniu.com/Javascript基础教程_logo.jpg"></dt>
        <dd>Javascript基础教程</dd>
    </dl>
    <dl class="item">
        <dt><img src="https://img.simoniu.com/C语言基础教程_logo.jpg"></dt>
        <dd>C语言基础教程</dd>
    </dl>
</div>

<style>
    #main {
        margin: 0px auto;
        display: flex;
        justify-content: space-around;
        border: 1px solid #ccc;
        flex-flow: row wrap;
    }

    .item img {
        width: 340px;
    }

    .item{
        background: #DDD;;
    }

    .item dd{
        position: relative;
        left: -20px;
        height: 30px;
        background: #DDD;
        color: #666;
    }

    .item:hover {
        transform: scale(1.01, 1.01);
        box-shadow: 0 5px 12px #a8d3f8;
        cursor: pointer;
    }

    .item dt{
        overflow: hidden;
    }

    .item img{
        transition: all 1.1s;
    }

    .item img:hover{
        transform: scale(1.1);
    }

</style>

</body>
</html>
运行效果：