慕课网5-2编程练习：flex布局制作卡片布局案例

﹏ヽ暗。殇╰゛Y 2022-01-06 19:57 325阅读 0赞

小伙伴们，学习了卡片布局，接下来我们根据效果图，也写出一个卡片布局的页面吧!

效果图如下：

![1378575-20190605163122162-1329233794.png][]

任务

1、主体内容的卡片一行只能显示两个。

2、卡片与卡片之间的距离相等，行与行之间的距离也相等。

3、卡片的主体内容居中显示。

4、当鼠标放在按钮上时，按钮的文字颜色发生变化。

参考代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <style>
            /* 头部导航 */
            
            * {
          
                margin: 0;
                padding: 0;
            }
            
            ul {
          
                list-style: none;
            }
            
            #head-nav {
          
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: nowrap;
                width: 100%;
                height: 75px;
                background-color: black;
                color: white;
            }
            
            .logo {
          
                max-height: 75px;
            }
            
            .logo img {
          
                max-height: 75px;
            }
            
            .nav {
          
                display: flex;
                flex-wrap: nowrap;
            }
            
            .nav li {
          
                margin: 0 2em;
            }
            
            .login input {
          
                width: auto;
                height: auto;
                background: orange;
                color: white;
                border: 1px solid orange;
                padding: 0.5em 1em;
                border-radius: 0.5em;
                outline: none;
            }
            /* card布局 */
            
            #main {
          
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
            
            .section {
          
                display: flex;
                /* direction: row; */
                /* flex-wrap: nowrap; */
                align-items: center;
                justify-content: space-around;
                margin-top: 10px;
                padding: 10px 0;
                border: 1px solid rgb(173, 216, 230);
                background: rgb(173, 216, 230);
                width: 46%;
            }
            
            .section .box {
          
                /* width: 40%; */
                display: flex;
                line-height: 1.8;
                flex-direction: column;
                align-content: space-around;
            }
            
            .shopping {
          
                width: auto;
                height: auto;
                background: orange;
                color: white;
                border: 1px solid orange;
                padding: 0.5em 1em;
                border-radius: 0.5em;
                outline: none;
            }
        </style>
    </head>
    
    <body>
        <header id="head-nav">
            <div class="logo">
                <img src="http://climg.mukewang.com/59197ab000014f1503000100.jpg" alt="">
            </div>
            <ul class="nav">
                <li>课程</li>
                <li>路径</li>
                <li>猿问</li>
                <li>手记</li>
            </ul>
            <div class="login">
                <input type="button" value="登录">
                <input type="button" value="注册">
            </div>
        </header>
        
        <section id="main">
            
            <div class="section">
                <div class="box">
                    <p>《前端小白入门手册》</p>
                    <div>适用人群：没有任何前端基础的小白</div>
                    <div>费用：￥599</div>
                </div>
                <div class="shopping">
                    <div class="btn">加入购物车</div>
                </div>
            </div>
            
            <div class="section">
                <div class="box">
                    <p>《前端小白入门手册》</p>
                    <div>适用人群：没有任何前端基础的小白</div>
                    <div>费用：￥599</div>
                </div>
                <div class="shopping">
                    <div class="btn">加入购物车</div>
                </div>
            </div>
            
            <div class="section">
                <div class="box">
                    <p>《前端小白入门手册》</p>
                    <div>适用人群：没有任何前端基础的小白</div>
                    <div>费用：￥599</div>
                </div>
                <div class="shopping">
                    <div class="btn">加入购物车</div>
                </div>
            </div>
            
            <div class="section">
                <div class="box">
                    <p>《前端小白入门手册》</p>
                    <div>适用人群：没有任何前端基础的小白</div>
                    <div>费用：￥599</div>
                </div>
                <div class="shopping">
                    <div class="btn">加入购物车</div>
                </div>
            </div>
        </section>
    </body>
    
    </html>

转载于:https://www.cnblogs.com/f6056/p/10980396.html

[1378575-20190605163122162-1329233794.png]: /images/20211227/1ba9a7df0b9848ac9a7198c8dba799c3.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211227/ab96a97a0cb94dd3af970c94533ee030.png