CSS-8盒模型应用-csdn博客列表

最新推荐文章于 2024-04-17 13:35:42 发布

薄荷叶汁

最新推荐文章于 2024-04-17 13:35:42 发布

阅读量106

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/duzishivip/article/details/103141662

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div1 span{
            color: red;
            /* 内部字体颜色 */
            border: 1px solid #f4ced0;
            /* 外边框颜色 */
            display: inline-block;
            /* 显示效果 行块盒 */
            width: 34px;
            height: 20px;
            /* 宽高 */
            line-height: 20px;
            text-align: center;
            /* 居中 */
            font-size: 12px;
            /* 字体大小 */
            border-radius: 2px;
            vertical-align: 1px;
            margin-right: 8px;
            margin-top: 3px;
            box-sizing: inherit;
        }
        .div1 h2{
            font-size: 18px;
            color: #4d4d4d;
            letter-spacing: 0;
            text-align: left;
            line-height: 28px;
            box-sizing: inherit;
            display: inline-block ;
        }
        .div2{
            font-size: 14px;
            color: #999;
            letter-spacing: 0;
            text-align: left;
            line-height: 22px;
            margin-bottom: 8px;
            word-break: break-word;
            /* 断词规则 */
            width: 712px;
            height: 44px;
            overflow:hidden;
            /* 超出部分隐藏 */
            white-space: nowrap;
            /* 空白不换行 */
            text-overflow: ellipsis;
            /* 超出部分文本以...显示 */
        }
        .div3 span{
            font-size: 14px;
            color: #999;
            letter-spacing: 0;
            line-height: 20px;
            margin-right: 24px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span>
            原创
        </span>
        <h2>
            python练习代码04
        </h2>
    </div>
    <div class="div2">
        代码 Lorem ipsum dolor sit amet consectetur adipisicing elit. 啊实打实的 Earum reprehenderit aut atque fugit perferendis veniam    撒大声地 reiciendis ipsam magni id hic labore quibusdam accusantium, dolores deleniti repellat ratione sint ipsa porro quis dolore ex. Hic odit nulla veniam quis eius ut?
    </div>
    <div class="div3">
        <span>2019-08-21  14:46:11</span>
        <span>阅读数123</span>
        <span>评论数 0</span>
    </div>
</body>
</html>

显示效果
在这里插入图片描述

薄荷叶汁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-8盒模型应用-csdn博客列表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫