[css] 小案例---模仿百度新闻列表，用定位做

最新推荐文章于 2023-02-09 16:36:59 发布

533_

最新推荐文章于 2023-02-09 16:36:59 发布

阅读量183

点赞数

分类专栏： # css

本文链接：https://blog.csdn.net/qq_14993591/article/details/119488940

版权

css 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!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>Document</title>
    <style>
        .newsarea{
            width: 562px;
            height: 250px;
        }
        .newsarea .news-list-item{
            width: 562px;
            height: 125px;
        }
        .newsarea .news-list-item .img-item{
            width: 181px;
            height: 125px;
            float: left;
        }
        .newsarea .news-list-item .img-item img{
            width: 100%;
        }
        .newsarea .news-list-item .text-item{
            width: 290px;
            height: 125px;
            /* background-color: rgb(207, 150, 150); */
            float: left;
            position: relative;
        }
        .newsarea .news-list-item .text-item .text-item-title,.newsarea .news-list-item .text-item .text-item-from{
            padding-left: 12px;
        }
        .newsarea .news-list-item .text-item .text-item-from{
            /* 用定位做，就不怕标题过于长了，不怕margin-bottom挤到它了 */
            position: absolute;
            bottom: 8px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div>
        <div class="hd">
            <span class="menu-item">我的关注</span>
            <span class="menu-item current">推荐</span>
            <span class="menu-item">导航</span>
        </div>
        <div class="newsarea">
            <div class="news-list-item">
                <div class="img-item">
                    <img src="img/1.png" alt="">
                </div>
                <div class="text-item">
                    <div class="text-item-title">
                        美国：我回来了，新加坡媒体：你比中国慢了好几拍
                    </div>
                    <div class="text-item-from">
                        <span class="hot-point">热点</span>
                        <span class="src-net">环球时报</span>
                        <span class="src-time">08-07 09:46</span>
                    </div>
                </div>
            </div>
            <div class="news-list-item">

            </div>
        </div>
    </div>
</body>

</html>