Css实现右上角飘带效果

效果图:

源码:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0 auto;padding: 0;}.wrap {/* 设置宽高 */width: 350px;height: 150px;text-align: center;position: relative; /* 父元素相对定位 */overflow: hidden;background-color: #160e41; /* 背景颜色 */border: 1px solid #16f5e6;}.ribbon {/* 右上角飘带 */background-color: #54CBFF; /* 左上角飘带的背景颜色 */overflow: hidden;white-space: nowrap; /* 文字不换行*/position: absolute; /* 绝对定位 */right: -40px;top: 10px;transform: rotate(45deg);   /* 旋转45°*/box-shadow: 0 0 10px #888; /* 飘带的阴影*/}.ribbon span {border: 1px solid #54CBFF;color: #fff;display: block;font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;margin: 1px 0;padding: 5px 50px;text-align: center;text-shadow: 0 0 5px #444;}</style></head><body><div class='wrap'><div class='ribbon'><span>NEW</span></div></div></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/134280.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 安装与创建第一Docker的项目

1. 下载nodejs 并且安装 https://nodejs.org/en 2. 打开命令窗口&#xff0c;验证是否安装成功 C:\Users\Harry>node -v v18.16.0C:\Users\Harry>npm -v 9.5.1 3. 安装Vue CLI C:\Users\Harry>npm install -g vue/cli 经过不算漫长的等待&#xff0c;你的Vue CLI就装…

CSS——grid网格布局的基本使用

网格布局在实现页面自适应&#xff0c;大屏可视化中常常使用&#xff0c;在这篇博客里&#xff0c;记录一下网格布局的基本使用。 参考文档&#xff1a;网格布局_菜鸟教程 文章目录 1. 体会grid的自适应性2. grid-template-arr配置网格行列3. 网格单位fr与repeat()简写属性值4…

SpringMVC中的JSR303与拦截器的使用

一&#xff0c;JSR303的概念 JSR303是Java中的一个标准&#xff0c;用于验证和校验JavaBean对象的属性的合法性。它提供了一组用于定义验证规则的注解&#xff0c;如NotNull、Min、Max等。在Spring MVC中&#xff0c;可以使用JSR303注解对请求参数进行校验。 1.2 为什么要使用J…

腾讯mini项目-【指标监控服务重构】2023-08-11

今日待办 使用watermill框架替代当前的base_runner框架 a. 参考官方提供的sarama kafka Pub/Sub(https://github.com/ThreeDotsLabs/watermill-kafka/)实现kafka-go(https://github.com/segmentio/kafka-go)的Pub/Sub&#xff08;sarama需要cgo&#xff0c;会导致一些额外的镜像…

nginx配置指南

nginx.conf配置 找到Nginx的安装目录下的nginx.conf文件&#xff0c;该文件负责Nginx的基础功能配置。 配置文件概述 Nginx的主配置文件(conf/nginx.conf)按以下结构组织&#xff1a; 配置块功能描述全局块与Nginx运行相关的全局设置events块与网络连接有关的设置http块代理…

windows11安装安卓程序的坑

首先&#xff0c;百度一下&#xff0c;网上大把教程&#xff0c;比如&#xff1a; 【2023最新版】Windows11家庭版&#xff1a;安卓子系统&#xff08;WSA&#xff09;安装及使用教程【全网最详细】_QomolangmaH的博客-CSDN博客 写的就比较详细了&#xff0c;仅供参考。 一些…

C【动态内存管理】

1. 为什么存在动态内存分配 int val 20;//在栈空间上开辟四个字节 char arr[10] {0};//在栈空间上开辟10个字节的连续空间 2. 动态内存函数的介绍 2.1 malloc&#xff1a;stdlib.h void* malloc (size_t size); int* p (int*)malloc(40); #include <stdlib.h> #incl…

9.3.5网络原理(应用层HTTP/HTTPS)

一.HTTP: 1. HTTP是超文本传输协议,除了传输字符串,还可以传输图片,字体,视频,音频. 2. 3.HTTP协议报文格式:a.首行,b.请求头(header),c.空行(相当于一个分隔符,分隔了header和body),d.正文(body). 4. 5.URL:唯一资源描述符(长度不限制). a. b.注意:查询字符串(query stri…

MediaPipe+OpenCV 实现实时手势识别(附Python源码)

MediaPipe官网&#xff1a;https://developers.google.com/mediapipe MediaPipe仓库&#xff1a;https://github.com/google/mediapipe 一、MediaPipe介绍 MediaPipe 是一个由 Google 开发的开源跨平台机器学习框架&#xff0c;用于构建视觉和感知应用程序。它提供了一系列预训…

【SPI读取外部Flash】使用逻辑分析仪来读取FLASH Device ID

实验设备&#xff1a;25块钱的 逻辑分析仪 和 野火F429开发板 注意点&#xff0c;这个逻辑分析仪最大只能检测24M的波形&#xff0c;而SPI是在外部通道2&#xff0c;所以我们对系统时钟的分频&#xff0c;也就是给到通道2的时钟速度要在24M内&#xff0c;不然检测到的数据是有…

RFID车辆自动化称重管理

应用背景 随着物流和交通管理的发展&#xff0c;车辆称重成为了不可忽视的环节&#xff0c;传统的车辆称重管理方式存在诸多问题&#xff0c;如人工操作繁琐、数据准确性低、容易出现作弊等&#xff0c;为了提高车辆称重管理的效率和准确性&#xff0c;RFID技术被引入到车辆称…

Vue ——09、路由模式,404和路由勾子

路由嵌套&#xff0c;参数传递及重定向 一、路由模式&#xff08;有#号&#xff0c;跟没#号&#xff09;二、404三、路由勾子四、在钩子函数中使用异步请求————————创作不易&#xff0c;如觉不错&#xff0c;随手点赞&#xff0c;关注&#xff0c;收藏(*&#xffe3;︶…

Windows开机密码破解

Windows11以及Windows10(21H2)以上版本 先开机&#xff0c;不进行任何操作&#xff0c;静静的等待登录界面 按住Shift重启 进入“选择一个选项”界面&#xff0c;点击疑难解答 点击高级选项 点击命令提示符 输入两行命令 copy C:\windows\system32\uti1man.exe C: \Window…

面相面试知识--Lottery项目

面相面试知识–Lottery项目 1.设计模式 为什么需要设计模式&#xff1f; &#xff08;设计模式是什么&#xff1f;优点有哪些&#xff1f;&#xff09; 设计模式是一套经过验证的有效的软件开发指导思想/解决方案&#xff1b;提高代码的可重用性和可维护性&#xff1b;提高团…

【python之经验模态分解EMD实现】PyEMD库的安装和导入EMD, Visualisation问题解决方法[完整可运行]

现有的导入问题 目前网上的办法&#xff0c;直接导入&#xff1a;from PyEMD import EMD, Visualisation 是有问题的 可能会出现 在 ‘init.py | init.py’ 中找不到引用 ‘Visualisation’ 的报错。 原因似乎是现在导入的命令改了&#xff0c;这是一个坑&#xff0c;解决的…

算法简述-串和串的匹配、排序、深度/广度优先搜索、动态规划、分治、贪心、回溯、分支限界

目录 算法简述 基本 典型算法列举 串和串的匹配 排序 深度/广度优先搜索 动态规划 分治 贪心 回溯 分支限界 算法简述 基本 咳咳嗯…算法嘛&#xff0c;咱也不是 CS 科班学生&#xff0c;咱就说&#xff0c;算法是对已经建模后的问题的解决的具体途径和方法&#x…

Linux 多线程( 进程VS线程 | 线程控制 )

文章目录 Linux进程 VS 线程进程的多个线程共享 进程和线程的关系线程创建 pthread_create获取线程ID pthread_self线程等待 pthread_join终止线程进程分离线程ID及进程地址空间布局 Linux进程 VS 线程 进程是资源分配的基本单位。线程是OS调度的基本单位。 线程共享进程数据…

医院如何实现安全又稳定的跨网文件数据交换呢?

随着医疗信息化的发展&#xff0c;医院之间需要频繁地进行文件数据交换&#xff0c;以实现诊疗、科研、管理等方面的协同和共享。然而&#xff0c;由于医院网络环境的复杂性和敏感性&#xff0c;跨网文件数据交换面临着安全性和稳定性的双重挑战。如何在保证文件数据不被泄露、…

神经网络常用模型与应用

上手AI的一个捷径就是了解和使用各种网络模型&#xff0c;结合实际场景去打造自己的应用。神经网络模型是人类的共同财富。 神经网络 神经网络可以分为三种主要类型&#xff1a;前馈神经网络、反馈神经网络和图神经网络。 前馈神经⽹络&#xff08;feedforward neural netwo…

Unity SteamVR 开发教程:用摇杆/触摸板控制人物持续移动(2.x 以上版本)

文章目录 &#x1f4d5;教程说明&#x1f4d5;场景搭建&#x1f4d5;创建移动的动作&#x1f4d5;移动脚本⭐移动⭐实时调整 CharacterController 的高度 &#x1f4d5;取消手部和 CharacterController 的碰撞 持续移动是 VR 开发中的一个常用功能。一般是用户推动手柄摇杆&…