css实现页面样式2

最新推荐文章于 2024-07-06 23:20:22 发布

魑魅魍魉1564

最新推荐文章于 2024-07-06 23:20:22 发布

阅读量64

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/LJS078182/article/details/129306787

版权

<!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>美图卡片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        .body {
            width: 500px;
            height: 600px;
            background-color: transparent;
            border: 1px solid black;
            margin: 50px auto;
        }

        img {
            width: 480px;
            height: 300px;
            margin: 10px;
        }

        h2 {
            color: black;
            font: 500 20px/2 sans-serif;
            width: 450px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        p {
            color: rgb(149, 149, 149);
            font: 400 16px/2 sans-serif;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .time span:first-of-type {
            color: rgb(149, 149, 149);
            font: 400 16px/2 sans-serif;
        }

        .title,
        .content,
        .time {
            padding-left: 20px;
            padding-right: 20px;
            margin-top: 25px;

        }

        .time span:nth-child(2) {
            color: rgb(227, 75, 108);
            margin-left: 270px;
        }
    </style>
</head>

<body>
    <div class="body">
        <div>
            <img src="./QQ截图20230302182405.png" alt="#">
        </div>
        <div class="title">
            <a href="#">
                <h2>2022中国国际服贸会开幕 &nbsp;美图公司亮相展现厦门服贸企业死给与师躲血从中起，反老但也人卑联了略。</h2>
            </a>
        </div>
        <div class="content">
            <p>大第楚德下不望，当回相份上，母承以的韩大娘虑非越就发的并快啊前看头，是水与同谓子三师，人小爱人畴笔身，见的之姑是破王沾说的者生发同正，后感人国洪联回求学上考师丑皇灰人外拢，非么世一是的，导倒衣一设地，谭挟训王别秦答今韦老啊哉松太先了，非不之普终尹乡因打前愚县战一的，褒不区我得锐迷元，月战车文里丐里笔了五见只鼓不，盲备。
            </p>
        </div>
        <div class="time">
            <span>2022-08-31</span>
            <span>查看详情&rarr;</span>
        </div>
    </div>
</body>

</html>

html部分：

<body>
    <div class="body">
        <div>
            <img src="./QQ截图20230302182405.png" alt="#">
        </div>
        <div class="title">
            <a href="#">
                <h2>2022中国国际服贸会开幕 &nbsp;美图公司亮相展现厦门服贸企业死给与师躲血从中起，反老但也人卑联了略。</h2>
            </a>
        </div>
        <div class="content">
            <p>大第楚德下不望，当回相份上，母承以的韩大娘虑非越就发的并快啊前看头，是水与同谓子三师，人小爱人畴笔身，见的之姑是破王沾说的者生发同正，后感人国洪联回求学上考师丑皇灰人外拢，非么世一是的，导倒衣一设地，谭挟训王别秦答今韦老啊哉松太先了，非不之普终尹乡因打前愚县战一的，褒不区我得锐迷元，月战车文里丐里笔了五见只鼓不，盲备。
            </p>
        </div>
        <div class="time">
            <span>2022-08-31</span>
            <span>查看详情&rarr;</span>
        </div>
    </div>
</body>

css部分：

* {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        .body {
            width: 500px;
            height: 600px;
            background-color: transparent;
            border: 1px solid black;
            margin: 50px auto;
        }

        img {
            width: 480px;
            height: 300px;
            margin: 10px;
        }

        h2 {
            color: black;
            font: 500 20px/2 sans-serif;
            width: 450px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        p {
            color: rgb(149, 149, 149);
            font: 400 16px/2 sans-serif;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .time span:first-of-type {
            color: rgb(149, 149, 149);
            font: 400 16px/2 sans-serif;
        }

        .title,
        .content,
        .time {
            padding-left: 20px;
            padding-right: 20px;
            margin-top: 25px;

        }

        .time span:nth-child(2) {
            color: rgb(227, 75, 108);
            margin-left: 270px;
        }

实现结果：