html css简单的文章展示

最新推荐文章于 2024-01-10 09:36:10 发布

jialan75

最新推荐文章于 2024-01-10 09:36:10 发布

阅读量1.3k

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/jialan75/article/details/122739600

版权

自己的方式

<!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>
        #div1 {
            width: 400px;
            height: 160px;
            border: solid 1px #ccc;
            border-top: 5px solid #ccc;
            padding: 5px
        }
        .bb{
            border-bottom: 1px solid #ccc;
        }
        .chlid {
            width: 400px;
            height: 39px;
        }

        h2 {
            margin: 0;
            padding: 0;
            float: left
        }

        p {
            margin: 0;
            padding: 0;
            padding-top: 7px;
            float: left
        }
    </style>
</head>

<body>
    <div id="div1">
        <div class="chlid bb">
            <h2>1</h2>
            <p>&nbsp;&nbsp;媒体:突突突</p>
        </div>
        <div class="chlid bb">
            <h2>2</h2>
            <p>&nbsp;&nbsp;媒体:突突突</p>
        </div>
        <div class="chlid bb">
            <h2>3</h2>
            <p>&nbsp;&nbsp;媒体:突突突</p>
        </div>
        <div class="chlid">
            <h2>4</h2>
            <p>&nbsp;&nbsp;媒体:突突突</p>
        </div>
    </div>
</body>

</html>

老师的方式

<!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>
        ul {
            margin: 0;
            padding: 0;
            /* 去除默认的圆点 */
            list-style-type: none;
        }
        ul>li{
            border-bottom:solid 1px #ccc;
            padding: 10px;

        }
        span{
            /* 内联元素转成块元素 */
            display:inline-block;
            width: 30px;
            text-align: center;
            font-weight: 700;
            font-size: 24px;
        }
        #news {
            width: 400px; 
            border: solid 1px #ccc;
            border-top: 5px solid #ccc;
            padding: 0px 5px
        }
        .last{
            border: none;
        }

    </style>
</head>

<body>
    <div id="news">
        <ul>
            <li><span>1</span>媒体:勒索病毒还未收场,类目已经</li>
            <li><span>2</span>媒体:勒索病毒还未收场,类目已经</li>
            <li><span>3</span>媒体:勒索病毒还未收场,类目已经</li>
            <li class="last"><span>4</span>媒体:勒索病毒还未收场,类目已经</li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

jialan75

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html css简单的文章展示

自己的方式<!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
复制链接

扫一扫