访问列表数据背景从左到右平铺——前端

最新推荐文章于 2024-06-18 09:42:51 发布

qq_28917403

最新推荐文章于 2024-06-18 09:42:51 发布

阅读量365

点赞数

分类专栏：前端素材网站

本文链接：https://blog.csdn.net/qq_28917403/article/details/90520951

版权

前端素材网站专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图请访问：http://220.178.0.62:8092/xuexi/demo4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul ,li {
            list-style: none;
        }
        body {
            font-family: "Microsoft Yahei";
            margin: 0;
            padding: 0;
            color: #666666;
        }
        .container {
            width: 1200px;
            margin: 40px auto;
        }

        .left{
            width: 380px;
            height: 580px;
            float: left;
        }
        .right{
            float: left;
            margin-left: 30px;
        }

        .news-item2 {
            position: relative;
            overflow: hidden;
            margin: 4px 0 10px;
            border-bottom: dashed 1px #ddd;
            padding-bottom: 5px;
        }

        .news-item2:after {
            content: "";
            background-color: #ee9422;
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            z-index: 0;
            display: block;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -ms-transition: all .3s;
            transition: all .3s;
        }

        .news-item2 .news-tit {
            z-index: 10;
            position: relative;
            overflow: hidden;
        }

        .news-span1 {
            width: 16%;
        }
        .news-span2 {
            width: 83%;
        }
        .float-left {
            float: left!important;
        }

        .news-item2 .news-time {
            padding: 6px 0;
            border-right: 1px solid #eee;
            text-align: center;
            color: #666666;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -ms-transition: all .3s;
            transition: all .3s;
        }

        .news-action {
            padding: 0 12px 0 40px;
            box-sizing: border-box;
        }

        .news-item2 .news-title {
            font-size: 18px;
            color: #666666;
            line-height: 35px;
            padding-bottom: 0;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -ms-transition: all .3s;
            transition: all .3s;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .news-item2 .news-desc {
            font-size: 12px;
            color: #999999;
            line-height: 35px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -ms-transition: all .3s;
            transition: all .3s;
        }

        .news-time-date{
            font-size: 22px;
        }
        .news-time-year{
            font-size: 14px;
        }
        .news-item2:hover:after {
            width: 100%;
        }

        .news-item2:hover .news-title,
        .news-item2:hover .news-desc,
        .news-item2:hover .news-time {
            color: #ffffff;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="left"> <img src="images/news.jpg" style="width: 100%;"><img src="images/news1.jpg" style="width: 100%;"> </div>
    <div class="right newsitem ">
        <ul>
            <li class="news-item2">
                <a title="等我不缠着你的时候，恭喜你你已经失去我了。">
                <div class="news-tit ">
                    <div class="float-left news-span1">
                        <div class="news-time">
                            <div class="news-time-date"> <span>12</span>/<span>09</span> </div>
                            <div class="news-time-year">2017</div>
                        </div>
                    </div>
                    <div class="float-left news-span2">
                        <div class="news-action ">
                            <p class=" news-title ">虽然新郎不是我，但是新娘我爱过。</p>
                            <p class="news-desc ">真的不必把太多人请进生命里，太过热情总是不被珍惜。...</p>
                        </div>
                    </div>
                </div>
            </a> </li>
            <li class="news-item2"> <a title="你一枪崩了我说是走火，你信不信我一刀捅死你说是手哆嗦。">
                <div class="news-tit ">
                    <div class="float-left news-span1">
                        <div class="news-time">
                            <div class="news-time-date"> <span>01</span>/<span>14</span> </div>
                            <div class="news-time-year">2018</div>
                        </div>
                    </div>
                    <div class="float-left news-span2">
                        <div class="news-action ">
                            <p class=" news-title ">“我喜欢你很久了。”“我喜欢过你很久。”</p>
                            <p class="news-desc ">委屈都受了，如果得不到成长，那就太亏了。.</p>
                        </div>
                    </div>
                </div>
            </a> </li>
            <li class="news-item2"> <a title="别说我很好，我很好你为什么不要。">
                <div class="news-tit ">
                    <div class="float-left news-span1">
                        <div class="news-time">
                            <div class="news-time-date"> <span>02</span>/<span>27</span> </div>
                            <div class="news-time-year">2018</div>
                        </div>
                    </div>
                    <div class="float-left news-span2">
                        <div class="news-action ">
                            <p class=" news-title ">道理我都懂，可清醒的人才是最难过。</p>
                            <p class="news-desc ">你总躲在角落里哭，又总站在阳光下笑，所以没人知道你也会难过。.</p>
                        </div>
                    </div>
                </div>
            </a> </li>
            <li class="news-item2"> <a title="再大的酸楚，到了别人那儿也永远只能是个故事。">
                <div class="news-tit ">
                    <div class="float-left news-span1">
                        <div class="news-time">
                            <div class="news-time-date"> <span>03</span>/<span>10</span> </div>
                            <div class="news-time-year">2018</div>
                        </div>
                    </div>
                    <div class="float-left news-span2">
                        <div class="news-action ">
                            <p class=" news-title ">不是我不联系你，而是你给我的感觉，像是我在打扰你。</p>
                            <p class="news-desc ">我变成所有你想要的样子，可丢了自己，也未曾拥有你。..</p>
                        </div>
                    </div>
                </div>
            </a> </li>
            <li class="news-item2"> <a title="从不想认真记住任何一个人，因为忘记一个人太难。">
                <div class="news-tit ">
                    <div class="float-left news-span1">
                        <div class="news-time">
                            <div class="news-time-date"> <span>04</span>/<span>15</span> </div>
                            <div class="news-time-year">2018</div>
                        </div>
                    </div>
                    <div class="float-left news-span2">
                        <div class="news-action ">
                            <p class=" news-title ">后来我过得很好，只是偶尔遗憾没有你的陪伴。</p>
                            <p class="news-desc ">哪里会有人喜欢孤独，不过是不喜欢失望罢了。</p>
                        </div>
                    </div>
                </div>
            </a> </li>

            <li class="news-item2"> <a title="他说他爱你，又没说只爱你，他说他爱你，又没说一直爱你。">
                <div class="news-tit ">
                    <div class="float-left news-span1">
                        <div class="news-time">
                            <div class="news-time-date"> <span>04</span>/<span>30</span> </div>
                            <div class="news-time-year">2018</div>
                        </div>
                    </div>
                    <div class="float-left news-span2">
                        <div class="news-action ">
                            <p class=" news-title ">世界上最远的距离就是，他是你的万里挑一，你是他的万分之一。</p>
                            <p class="news-desc ">你的热情给错了人，做什么都是自作多情。</p>
                        </div>
                    </div>
                </div>
            </a> </li>

            <li class="news-item2"> <a title="做不到你最深爱的人，那就做个你最难忘的人。">
                <div class="news-tit ">
                    <div class="float-left news-span1">
                        <div class="news-time">
                            <div class="news-time-date"> <span>05</span>/<span>05</span> </div>
                            <div class="news-time-year">2018</div>
                        </div>
                    </div>
                    <div class="float-left news-span2">
                        <div class="news-action ">
                            <p class=" news-title ">刮风的时候，你要学会颤抖，而不是奢望谁的手。</p>
                            <p class="news-desc ">我从不随意闹情绪，因为深知没人会哄我。</p>
                        </div>
                    </div>
                </div>
            </a> </li>

        </ul>
    </div>
    <div class="clearfix"></div>
</div>
</body>
</html>