css样式写一个公告通知

最新推荐文章于 2024-01-10 14:12:40 发布
最新推荐文章于 2024-01-10 14:12:40 发布
阅读量2.9k 收藏 6
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38933412/article/details/106541209
版权

代码：

<!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>公告</title>

    <style>
        .marquee {
            width: 450px;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 50s linear infinite;
        }

        .marquee:hover {
            animation-play-state: paused
        }

        /* 使段落文字滚动 */
        @keyframes marquee {
            0%   { text-indent: 27.5em }
            100% { text-indent: -105em }
        }

        /* 滚动文字前加图片 */
        .microsoft {
            padding-left: 1.5em;
            position: relative;
            font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
        }

      .microsoft:before{
            z-index: 2;
            content: '';
            position: absolute;
            top: -1em; left: -1em;
            width: .5em; height: .5em;
        }

         .microsoft:after, .microsoft::after {
            z-index: 1;
            content: '';
            position: absolute;
            top: -4px; left: 0;
            width: 2em; height: 2em;background-color:white;
            background-size: 100%;
           background-image:url(./img/laba.png);
          /* background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));*/
        }
    </style>
</head>
<body>
    <p class="microsoft marquee">公告：测试公告信息，测试公告信息，测试公告信息，测试公告信息</p>
</body>
</html>

效果：

DeedWang
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 一个漂亮的网站公告 带图片和css
06-10
html 一个漂亮的网站公告 带图片和css
CSS公告
dengjiongzhong4111的博客
05-21 405
公告 转载于:https://www.cnblogs.com/xhhhgw/p/9065838.html
纯css滚动公告栏目
weixin_30345577的博客
05-26 304
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .wrap { ...
【CSS】垂直滚动公告
最新发布
Jooan的博客
01-10 565
CSS制作的垂直滚动公告，支持多条切换
制作公告栏滚动样式的效果css
泪的结晶的博客
11-14 7041
&lt;div class="details" id="details"&gt; &lt;marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" height="25"&gt;
css公共样式
蛋蛋老公的博客
09-09 465
html, body, ul, li, span, p, div, a, form, input, button, img, h1, h2, h3, h4, h5, h6, header, td, th, dd, dl, tr, table, footer, main, aside, article, section, select, option { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 10
纯CSS3网站维护通知页面特效.zip
10-08
【标题】"纯CSS3网站维护通知页面特效.zip"是一个包含使用纯CSS3技术实现的网站维护通知页面的代码资源。这个特效适用于那些希望在网站进行更新或维护时，向访客展示专业且吸引人的通知界面的开发者。CSS3是CSS...
css实现div内凹角样式的示例代码
11-21
本文将详细介绍如何使用CSS来实现一个div内凹角样式的示例代码。 首先，当遇到内凹角需求时，常见的两种实现方法是使用背景图片或者CSS技巧。对于CSS方法，我们可以利用`background`或`background-image`属性配合...
一款超好看又简洁的弹窗公告
03-18
总的来说，这个弹窗公告系统利用了Web开发的基本技术，通过简洁的HTML结构、美观的CSS样式以及智能的JavaScript逻辑，提供了一种高效且用户体验良好的公告工具。无论是对于网站管理员还是终端用户，都是一个实用且...
使用html页面制作一个公告栏，用来横向滚动展示文字
11-24
在上面的代码中，`.scrolling-text`类设置了公告栏文字的滚动效果，通过CSS动画`@keyframes`定义了一个名为`scroll`的动画，使得内容从右向左平滑移动。`overflow: hidden`和`white-space: nowrap`确保了内容不会折...
前端展示广告各种样式，公告轮播样式内含十多种方式
03-18
前端展示广告各种样式，公告轮播样式，内含十多种方式
微信小程序左右滚动公告栏效果代码实例
10-16
在微信小程序开发中，创建一个左右滚动的公告栏效果能够吸引用户的注意力，提供重要的信息更新。这个效果可以通过CSS样式和JavaScript编程实现。下面我们将详细探讨如何实现这一功能。 首先，我们要在小程序的页面...
js-实现广告弹窗通知公告带动画效果.zip
07-11
通常，我们会有一个隐藏的弹窗元素，当需要显示时通过改变其CSS样式使其可见。弹窗内可能包含公告内容、关闭按钮等元素，需要为这些元素添加事件监听器以便进行交互。 在实际应用中，为了提高代码的复用性和可维护...
jQuery实现上下滚动公告栏详细代码
12-01
在本文中，我们将深入探讨如何使用jQuery来实现一个上下滚动的公告栏，这是一个常见的功能，用于展示网站的最新公告信息。在尝试了多种网上找到的源码后，由于出现了诸如公告重叠等问题，作者决定自己编写一个解决...
适合做公告板的代码收集
10-31
- **CSS样式定义**：首先定义了一个`<style>`标签内的样式，为`#oneLiners`设置了背景颜色、字体颜色和加粗属性。这决定了显示的文字外观。 ```css #oneLiners { background-color: #00c; color: #fd0; font-...
纯css实现横向单行公告无缝滚动
qq_37698249的博客
09-10 1365
需要一个大容器，设置固定宽度，overflow:hidden 公告也需要一个容器，设为inline-block 动画通过translateX从右往左移动，起点为外层容器的宽度，终点为公告本身的宽度(-100%) <view class="water_tips"> <view class="water_text">公告公告公告公告公告公告公告公告公告公告公告公告</view> </view> .water_tips { position: abso.
百度地图通知窗口CSS修改
weixin_48289706的博客
11-03 450
对通知窗口进行色彩和布局上的调整，采用圆形边角，具体样式如下 CSS实现 /*地图标题*/ .BMap_bubble_title { color:white; font-size:13px; font-weight:bold; text-align:left; padding-left:5px; padding-top:5px; border-bottom:1px solid gray; background-color:#0066b3; }
html 通知样式,12款体验不错的网站提示/通知样式
weixin_39620679的博客
07-08 1200
原标题：12款体验不错的网站提示/通知样式(点击上方公号，可快速关注)出处：设计达人链接：http://www.shejidaren.com/notification-style.html提示样式(也可以理解为网站通知)，它通常是在当前页面提示或弹窗提示，随着现在网页设计趋势，通知样式也有了很多的变化，今天小编为大家分享12款网站提示/通知样式，或许能作为灵感。这12款 Notification ...
请写一个公告通知的页面html，里面包含增加删除修改功能
06-02
好的，以下是一个简单的公告通知页面的HTML代码，包含增加、删除和修改功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>公告通知</title> </head> <body> <h1>公告通知</h1> <!-- 公告列表 --> <table> <thead> <tr> <th>标题</th> <th>发布时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>关于本网站的通知</td> <td>2021-08-01 10:00:00</td> <td> <button onclick="editNotice(1)">编辑</button> <button onclick="deleteNotice(1)">删除</button> </td> </tr> <tr> <td>劳动节放假通知</td> <td>2021-05-01 08:00:00</td> <td> <button onclick="editNotice(2)">编辑</button> <button onclick="deleteNotice(2)">删除</button> </td> </tr> </tbody> </table> <!-- 添加公告表单 --> <form id="addNoticeForm"> <h2>添加公告</h2> <label for="title">标题：</label> <input type="text" id="title" name="title"><br> <label for="content">内容：</label> <textarea id="content" name="content"></textarea><br> <button type="button" onclick="addNotice()">提交</button> </form> <!-- 修改公告表单 --> <form id="editNoticeForm"> <h2>修改公告</h2> <input type="hidden" id="noticeId" name="noticeId"> <label for="title">标题：</label> <input type="text" id="title" name="title"><br> <label for="content">内容：</label> <textarea id="content" name="content"></textarea><br> <button type="button" onclick="updateNotice()">提交</button> </form> <script> // 添加公告 function addNotice() { // 发送 AJAX 请求，将表单数据提交到后端进行处理 // 成功后，刷新公告列表 } // 删除公告 function deleteNotice(noticeId) { // 发送 AJAX 请求，将公告 ID 提交到后端进行删除 // 成功后，刷新公告列表 } // 编辑公告 function editNotice(noticeId) { // 将公告的标题和内容填充到修改表单中 document.getElementById("noticeId").value = noticeId; document.getElementById("title").value = "公告标题"; document.getElementById("content").value = "公告内容"; // 显示修改表单，并隐藏添加表单 document.getElementById("addNoticeForm").style.display = "none"; document.getElementById("editNoticeForm").style.display = "block"; } // 更新公告 function updateNotice() { // 发送 AJAX 请求，将修改后的数据提交到后端进行更新 // 成功后，刷新公告列表，并隐藏修改表单 document.getElementById("addNoticeForm").style.display = "block"; document.getElementById("editNoticeForm").style.display = "none"; } </script> </body> </html> ``` 以上代码包含了一个公告列表，以及添加、删除和修改公告的功能。具体实现过程中，您需要根据自己的需求和后端接口进行相应的调整。同时，为了美化页面，您可能需要添加一些CSS样式来调整页面的布局和视觉效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值