一段代码，使用flex布局方式写出图文列表

最新推荐文章于 2024-04-16 19:33:42 发布

⑥②

最新推荐文章于 2024-04-16 19:33:42 发布

阅读量495

点赞数

分类专栏： HTML CSS 一段代码系列

本文链接：https://blog.csdn.net/lw001x/article/details/106572995

版权

一段代码系列同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

在学习使用新的知识，最直观的方式就是用一段代码来展示学习。其实在flex布局中，我们可以用最简单的代码写出好看的页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用flex布局的列表页面</title>
    <style>
        .list {

        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: stretch;

            flex-wrap: nowrap;

            border-bottom:1px solid #f0f0f0;

            padding:10px;
            box-shadow: 0px 0px 1px 0px rgba(255,0,0,.3);
            margin-bottom:10px;
        }
        .avatar .image{
            width: 80px;
            height: 80px;
            display: block;
            border-radius: 40px;
            box-shadow: 0px 0px 7px 0px rgba(0,0,0,.5);

            margin-right:10px;
        }
        .detail{
            font-size:14px;
            color:#636363;
        }
        .name{
            display:flex;
            align-items: center;
            margin-bottom:5px;
        }
        .text{
            font-size:16px;
        }
        .icon{
            height:30px;
            display:block;
        }

    </style>
</head>
<body>

<div class="list">
    <div class="item">
        <div class="avatar">
            <img class="image" src="http://img3.imgtn.bdimg.com/it/u=1368451564,780267377&fm=11&gp=0.jpg" style=""/>
        </div>
        <div class="info">
            <div class="name">
                <div class="text">
                    独守空城忆旧梦
                </div>
                <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
            </div>
            <div class="detail">
                任何时候都要记得，给人生留点余地，得到时不自喜，失去时不抑郁。留一点好处让别人占，留一点道路让别人走，留一点时间让自己思考。
            </div>
        </div>
    </div>

    <div class="item">
        <div class="avatar">
            <img class="image" src="http://img0.imgtn.bdimg.com/it/u=4009057249,2530456353&fm=26&gp=0.jpg" style=""/>
        </div>
        <div class="info">
            <div class="name">
                <div class="text">
                    对你微笑纯粹出于礼貌ˇ
                </div>
                <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
            </div>
            <div class="detail">
                胆量不够大，能力再强都是小人物！魄力不够大，努力一生都是小成就！在成长的路上，我们突破的不是现实，而是自己。在人生的跑道上，战胜对手，只是赛场的赢家，战胜自己，才是命运的强者。
            </div>
        </div>
    </div>
    <div class="item">
        <div class="avatar">
            <img class="image" src="http://img0.imgtn.bdimg.com/it/u=1813762643,1914315241&fm=26&gp=0.jpg" style=""/>
        </div>
        <div class="info">
            <div class="name">
                <div class="text">
                    ☆⌒糖罐子℡
                </div>
                <img class="icon" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2527158049,2452248245&fm=26&gp=0.jpg"/>
            </div>
            <div class="detail">
                不忘初心，方得始终。只有走过弯路，才更确信当初最想要的是什么。有些事，想多了头疼，想通了心疼。人生旅途，不是每一段旅行都要邂逅，也不是每一段生命都需要故事，就算多数时间都是一个人孤单且平淡在走，只要足够有爱，就不会寂寞。
            </div>
        </div>
    </div>
</div>
</body>
</html>

⑥②

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一段代码，使用flex布局方式写出图文列表

在学习使用新的知识，最直观的方式就是用一段代码来展示学习。其实在flex布局中，我们可以用最简单的代码写出好看的页面。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>使用flex布局的列表页面</title> <style> .list { } .item {
复制链接

扫一扫