css写一个通知栏（详细步骤说明）

怎么名字都重复

已于 2024-05-11 23:17:38 修改

阅读量1.4k

点赞数 16

分类专栏：网页文章标签： css 前端

于 2024-05-11 17:45:49 首次发布

本文链接：https://blog.csdn.net/2301_79479634/article/details/138724590

版权

网页专栏收录该内容

5 篇文章

订阅专栏

先放效果图

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知栏制作</title>
    <style>
        * {
            /* 清除内外边距 */
            /* 外边距 */
            margin: 0;
            /* 内边距 */
            padding: 0;
        }

        div {
            /*防止内外边距影响盒子的大小*/
            box-sizing: border-box;
        }

        .div1 {
            width: 500px;
            /*上下外边距为20px*/
            /* auto是使元素在其容器中水平居中，然后div1将占据指定宽度，并会将剩余空间在左右边界之间平均分配 */
            margin: 20px auto;
            background-color: #efefef;
        }

        .div2 {
            position: absolute;
            width: 400px;
            /* 四个外边距均为10px */
            margin: 10px auto;
        }

        .pic {
            /*h3的样式*/
            /*高度*/
            height: 30px;
            /*字体大小*/
            font-size: 16px;
            color: #069;
            /*宽度、线型、颜色*/
            border-bottom: 2px dashed #069;

        }

        h3 a {
            /*h3的子元素a的样式*/
            /*父相子绝 向上找有定位的最近的父元素是div2*/
            position: absolute;
            right: 0;
            top: 0;
            /*去掉超链接的下划线*/
            text-decoration: none;
        }

        ul {
            /*去掉无序列表前的点*/
            list-style: none;
        }

        li {
            /*左内边距*/
            padding-left: 15px;
            /*设置背景，为序列加小箭头的样式（不加no-repeat就会铺满整个li），水平定位0px，垂直定位7px*/
            background: url("images/sanjiao.jpg")no-repeat 0px 7px;
        }

        li a {
            font-size: 12px;
            text-decoration: none;
            color: #999;
        }

        li span {
            /* 靠右浮动 */
            float: right;
            color: #999;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">
            <h3 class="pic">学院通知<a href="#">MORE&gt;&gt;</a></h3>
            <ul>
                <li><a href="#">新闻1:fyhujfiebbdunc</a><span>[2024-01-01]</span></li>
                <li><a href="#">新闻2:behugrhfbehiufb</a><span>[2024-01-02]</span></li>
                <li><a href="#">新闻3:jiehrtbeehiesgnjj</a><span>[2024-01-03]</span></li>
                <li><a href="#">新闻4:iehwiteibgdfkh</a><span>[2024-01-04]</span></li>
            </ul>
        </div>
    </div>
</body>

</html>