扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >html如何实现告警按钮
  • 230

0
分享到

html如何实现告警按钮

2023-06-08 01:06:25 230人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关html如何实现告警按钮的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果如下：代码如下(点击可展开查看源码)：<!DOCTYPE html><html&nb

这篇文章给大家分享的是有关html如何实现告警按钮的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

效果如下：

html如何实现告警按钮

代码如下(点击可展开查看源码)：

<!DOCTYPE html><html xmlns="Http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>告警按钮</title><style type="text/CSS">body { background: #333; text-shadow: 0 1px 1px rgba(0,0,0,.5); }@-WEBkit-keyframes bigAssButtonPulse {  from { background-color: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; }  50% { background-color: #39ba1f; -webkit-box-shadow: 0 0 75px #39ba1f; }  to { background-color: #1e6a0f; -webkit-box-shadow: 0 0 25px #333; }}@-webkit-keyframes greenPulse {  from { background-color: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; }  50% { background-color: #39ba1f; -webkit-box-shadow: 0 0 27px #39ba1f; }  to { background-color: #1e6a0f; -webkit-box-shadow: 0 0 9px #333; }}@-webkit-keyframes bluePulse {  from { background-color: #036075; -webkit-box-shadow: 0 0 9px #333; }  50% { background-color: #2daebf; -webkit-box-shadow: 0 0 27px #2daebf; }  to { background-color: #036075; -webkit-box-shadow: 0 0 9px #333; }}@-webkit-keyframes redPulse {  from { background-color: #8c2305; -webkit-box-shadow: 0 0 9px #333; }  50% { background-color: #e33100; -webkit-box-shadow: 0 0 27px #e33100; }  to { background-color: #8c2305; -webkit-box-shadow: 0 0 9px #333; }}@-webkit-keyframes magentaPulse {  from { background-color: #470123; -webkit-box-shadow: 0 0 9px #333; }  50% { background-color: #a9014b; -webkit-box-shadow: 0 0 27px #a9014b; }  to { background-color: #470123; -webkit-box-shadow: 0 0 9px #333; }}@-webkit-keyframes orangePulse {  from { background-color: #b84c04; -webkit-box-shadow: 0 0 9px #333; }  50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 27px #ff5c00; }  to { background-color: #b84c04; -webkit-box-shadow: 0 0 9px #333; }}@-webkit-keyframes orangellowPulse {  from { background-color: #bd5000; -webkit-box-shadow: 0 0 9px #333; }  50% { background-color: #ffb515; -webkit-box-shadow: 0 0 27px #ffb515; }  to { background-color: #bd5000; -webkit-box-shadow: 0 0 9px #333; }}a.button {    -webkit-animation-duration: 2s;    -webkit-animation-iteration-count: infinite; }.green.button { -webkit-animation-name: greenPulse;animation-name: greenPulse; -webkit-animation-duration: 2s;animation-duration: 2s; }.blue.button { -webkit-animation-name: bluePulse; -webkit-animation-duration: 2s; }.red.button { -webkit-animation-name: redPulse; -webkit-animation-duration: 2s; }.magenta.button { -webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s; }.orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 2s; }.orangellow.button { -webkit-animation-name: orangellowPulse; -webkit-animation-duration: 2s; }.wall-of-buttons { width: 100%; height: 500px; text-align: center; }.wall-of-buttons a.button { display: inline-block; margin: 0 30px 30px 0; } .button { background: #222 url(overlay-button.png) repeat-x 0 0; display: inline-block; padding: 5px 15px 6px; color: #fff !important; font-size: 13px; font-weight: bold; line-height: 1; text-decoration: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; overflow: visible; width: auto; }button::-moz-focus-inner { border: 0; padding: 0; }.button:hover { background-color: #111; color: #fff; }.button:active { -webkit-transfORM: translateY(1px); -moz-transform: translateY(1px); }.small.button { font-size: 11px; }.large.button { font-size: 14px; padding: 8px 19px 9px; }.green.button { background-color: #91bd09; }.green.button:hover { background-color: #749a02; }.blue.button { background-color: #2daebf; }.blue.button:hover { background-color: #007d9a; }.red.button { background-color: #e33100; }.red.button:hover { background-color: #872300; }.magenta.button{ background-color: #a9014b; }.magenta.button:hover { background-color: #630030; }.orange.button {background-color: #ff5c00;}.orange.button:hover { background-color: #d45500; }.orangellow.button { background-color: #ffb515; }.orangellow.button:hover { background-color: #fc9200; }.white.button { background-color: #fff; border: 1px solid #ccc; color: #666 !important; font-weight: normal; text-shadow: 0 1px 1px rgba(255,255,255,1); }.white.button:hover { background-color: #eee; }</style></head><body id="radioactiveButtonsPage" class="chrome windows"><div class="wall-of-buttons">  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>    <p><a class="large green button">正常</a>      <a class="large blue button">运行</a>      <a class="large red button">严重</a>      <br />            <a class="large orange button">主要</a>      <a class="large orangellow button">次要</a>      <br />  </p></div></body></html>

感谢各位的阅读！关于“html如何实现告警按钮”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

--结束END--

本文标题: html如何实现告警按钮

本文链接: https://lsjlt.com/news/250975.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html如何实现告警按钮
    这篇文章给大家分享的是有关html如何实现告警按钮的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果如下：代码如下(点击可展开查看源码)：<!DOCTYPE html><html&nb...
    99+
    2023-06-08
  • html如何写按钮
    本篇内容主要讲解“html如何写按钮”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html如何写按钮”吧! html按钮的写法：1、...
    99+
    2024-04-02
  • javascript如何实现警告框
    本篇内容主要讲解“javascript如何实现警告框”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript如何实现警告框”吧! ...
    99+
    2024-04-02
  • HTML按钮代码如何写
    这篇文章主要介绍了HTML按钮代码如何写的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML按钮代码如何写文章都会有所收获，下面我们一起来看看吧。HTML<button>标签标签定义及使用说明&l...
    99+
    2023-06-27
  • Cacti如何实现电话告警
    Cacti是一套基于PHP，MySQL，SNMP及RRD Tool开发的网络流量监测图形分析工具。Cacti提供了一个快速轮询器，高级图表模板，多种数据采集方法和用户管理功能。所有这一切都被包装在一个直观的，易于使用的界面中，这对于局域网以...
    99+
    2023-06-04
  • html失效按钮的实现方法
    这篇文章主要介绍html失效按钮的实现方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！html失效按钮的实现方法：首先创建一个HTML示例文件；然后通过button标签创建按钮；最后通过设置disabled属性来规...
    99+
    2023-06-15
  • html如何改变按钮颜色
    这篇文章主要介绍了html如何改变按钮颜色，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 html改变按钮颜色的...
    99+
    2024-04-02
  • html如何设置按钮文字
    小编给大家分享一下html如何设置按钮文字，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 方法：1、...
    99+
    2024-04-02
  • html如何设置按钮宽度
    这篇文章给大家分享的是有关html如何设置按钮宽度的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 在html中，可以通过width属性来设置按钮的宽度...
    99+
    2024-04-02
  • html如何设置按钮大小
    这篇文章将为大家详细讲解有关html如何设置按钮大小，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。html有什么特点1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使...
    99+
    2023-06-14
  • html返回按钮如何设置
    要设置HTML返回按钮，可以使用HTML的``元素或``元素来创建返回按钮，并使用JavaScript的`history.back(...
    99+
    2023-08-08
    html
  • css如何实现提交按钮
    本文小编为大家详细介绍“css如何实现提交按钮”，内容详细，步骤清晰，细节处理妥当，希望这篇“css如何实现提交按钮”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。css实现提交按钮的方法：1、通过HTML <...
    99+
    2023-07-05
  • html按钮点击跳转怎么实现
    这篇文章主要介绍“html按钮点击跳转怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html按钮点击跳转怎么实现”文章能帮助大家解决问题。一、使用链接HTML按钮的实现之一是使用链接。首先，...
    99+
    2023-07-06
  • HTML中如何实现带有"显示更多"按钮
    这篇文章给大家分享的是有关HTML中如何实现带有"显示更多"按钮的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。刚好最近遇到这个小需求，记得很早之前都是用 JS 处理，毕竟那时候年少无知。 切换...
    99+
    2023-06-08
  • html如何设置按钮的大小
    这篇文章给大家分享的是有关html如何设置按钮的大小的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。html中，可以利用button标签的style属性，给按钮元素添加“height:高度值;width:宽度值;”...
    99+
    2023-06-15
  • javascript如何实现按钮隐藏div
    本篇内容介绍了“javascript如何实现按钮隐藏div”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • 纯CSS如何实现汉堡按钮
    这篇文章主要介绍了纯CSS如何实现汉堡按钮的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇纯CSS如何实现汉堡按钮文章都会有所收获，下面我们一起来看看吧。汉堡按钮<div class="...
    99+
    2023-07-04
  • html如何取掉input按钮的边框
    这篇文章将为大家详细讲解有关html如何取掉input按钮的边框，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。<html> <body> <...
    99+
    2024-04-02
  • 如何在html中设置图片按钮
    今天就跟大家聊聊有关如何在html中设置图片按钮，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。html中把图片变成按钮代码如下：<input type="i...
    99+
    2023-06-15
  • html如何点击按钮跳转页面
    这篇文章将为大家详细讲解有关html如何点击按钮跳转页面，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。html点击按钮跳转页面的方法：1、在button标签外嵌套一个a标签，利用超链接进行跳转；2、在bu...
    99+
    2023-06-15
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作