博主信息
虎子爸爸
博文
21
粉丝
0
评论
0
访问量
866
积分:0
P豆:51.5

flex学习总结(5)首页实例——2019年9月10号20:00分

2019年09月12日 11:19:43阅读数:38博客 / 虎子爸爸 / 前端

重点代码如图:

flex-72.png

实际效果图:

flex-73.png

html代码:

实例

 <h3 class="geng">最新更新</h3>
    <div class="courses courses-gengxin">

        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">CI框架30分钟极速入门</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">2018前端入门_HTML5</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>
    <h3 class="new">最新文章</h3>
    <div class="courses  courses-gengxin">
        <div>
            <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
            <p>
                <a href="">快速偷懒入门a</a>
                <br>
                <span>中级</span><span>49748次播放</span>
            </p>
        </div>
        <div>
            <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
            <p>
                <a href="">快速偷懒入门a</a>
                <br>
                <span>初级</span><span>210066次播放</span>
            </p>
        </div>
    </div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS样式代码:

实例

/* 新添加类 */

.geng,
.new {
    color: chocolate;
    padding-bottom: 2px;
    border-bottom: 5px solid chocolate;
}

.courses {
    /* height: 326px; */
    color: gray;
}


/* 新添加类 */

.courses-gengxin {
    /* height: 240px; */
    padding: 5px 0;
}

.courses ul {
    margin: 0;
    padding: 0;
    list-style: none;
    /*flex布局*/
    display: flex;
}

.courses ul li {
    padding: 5px;
}

.courses ul img {
    width: 100%;
    height: 90px;
}

.courses div {
    background-color: white;
    padding: 10px;
    margin-top: 10px;
    height: 90px;
    /*flex布局*/
    display: flex;
    justify-content: flex-start;
}

.courses div img {
    width: 100%;
    height: 90px;
}

.courses div a {
    text-decoration: none;
    color: gray;
    flex: 0.45;
}

.courses div p {
    flex: .55;
    margin-left: 15px;
}

.courses div p span:first-of-type {
    font-size: 0.8rem;
    background-color: black;
    color: white;
    border-radius: 30%;
    padding: 0 2px;
}

.courses div p span:last-of-type {
    font-size: 0.7rem;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

1、flex非常适合做自适应布局;

2、flex非常容易实现项目居中;


批改状态:合格

老师批语:总结的非常简洁, 其实flex几乎什么都能做, 也能写pc端页面

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
暂无评论暂无评论!