【css】css实现一个简单的按钮

四种链接状态分别是:

  • a:link - 正常的,未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时
<style>
a:link, a:visited {//未访问、访问过background-color: #07c160;//设置背景颜色color: white;//设置字体颜色padding: 14px 25px;//设置内边距,上下:14px,右左:25pxtext-align: center; //文本居中text-decoration: none; //文本装饰设置没有display: inline-block; //设置行内块元素,结合了行内和块级的特点,可以设置长宽,可以让padding和margin生效,和其他行内元素并排
}a:hover, a:active {//鼠标悬停、点击background-color: red;
}
</style>
</head>
<body><a href="/index.html" target="_blank" >按钮</a></body>

效果:
未鼠标悬停、未点击的效果:
在这里插入图片描述
鼠标悬停:
在这里插入图片描述

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

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

相关文章

Day10-NodeJS和NPM配置

Day10-NodeJS和NPM 一 Nodejs 1 简介 Nodejs学习中文网:https://www.nodeapp.cn/synopsis.html Nodejs的官网:https://nodejs.org/ 概念:Nodejs是JavaScript的服务端运行环境.Nodejs不是框架,也不是编程语言,就是一个运行环境. Nodejs是基于chrome V8引擎开发的一套js代码…

Java设计模式——类之间的关系

1.继承关系(泛化) 类与子类的关系&#xff0c;指一个类继承另外的一个类。 2.实现关系 一个类可以实现多个接口&#xff0c;实现所有接口的功能。 3.依赖关系 类B作为类A方法中的局部变量或者参数出现&#xff0c;表示A依赖B。 4.关联关系 类B作为类A中的成员变量出现&#…

Toyota Programming Contest 2023#4(AtCoder Beginner Contest 311)D题题解

文章目录 [Grid Ice Floor](https://atcoder.jp/contests/abc311/tasks/abc311_d)问题建模问题分析1.分析移动时前后两个点之间的联系2.方法1通过BFS将所有按照给定运动方式可以到达的点都标记代码 3.方法2采用DFS来标记路径上的点的运动状态代码 Grid Ice Floor 问题建模 给定…

linux快速安装Rabbitmq

linux快速安装Rabbitmq 准备yum仓库 # root执行rpm --import https://github.com/rabbitmq/signing-keys/releases/download/2.0/rabbitmq-release-signing-key.ascrpm --import https://packagecloud.io/rabbitmq/erlang/gpgkeyrpm --import https://packagecloud.io/ra…

测试岗?从功能测试进阶自动化测试开发,测试之路不迷茫...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 测试新人在想什么…

IO进程线程day7(2023.8.4)

一、Xmind整理&#xff1a; 二、课上练习&#xff1a; 练习1&#xff1a;创建两个线程&#xff1a;其中一个线程拷贝前半部分&#xff0c;另一个线程拷贝后半部分。 只允许开一份资源&#xff0c;且用互斥锁方式实现。 提示&#xff1a;找临界区--->找临界资源。 #includ…

swagger相关问题

swagger相关问题 swagger版本为&#xff1a; <dependency><groupId>com.github.xiaoymin</groupId><artifactId>swagger-bootstrap-ui</artifactId><version>1.9.6</version> </dependency> <dependency><groupId&…

网络安全设备-等保一体机

本文为作者学习文章&#xff0c;按作者习惯写成&#xff0c;如有错误或需要追加内容请留言&#xff08;不喜勿喷&#xff09; 本文为追加文章&#xff0c;后期慢慢追加 等保一体机的功能 等保一体机产品主要依赖于其丰富的安全网元&#xff08;安全网元包括&#xff1a;防火…

sentinel组件

目录 定义 4.加SentinelResource,blockHander是超过阈值之后执行的函数 5.设置阈值 6.springboot集成sentinel 定义 1.sentinel知道当前流量大小&#xff0c;在浏览器和后端之间加sentinel控制流量&#xff0c;避免大批量的瞬时请求都达到服务上&#xff0c;将服务压垮 2.…

汉字姓名转拼音

import osimport pandas as pdfrom xpinyin import Pinyindownpath/Users/Kangyongqing/Downloads/ file1教师姓名转拼音.xlsxdtpd.read_excel(downpathfile1) print(dt.info()) dt[pinyin]dt[教师姓名].apply(lambda x:Pinyin().get_pinyin(x).split(-)[0].capitalize() .join…

谈谈 Kafka 的幂等性 Producer

使用消息队列&#xff0c;我们肯定希望不丢消息&#xff0c;也就是消息队列组件&#xff0c;需要保证消息的可靠交付。消息交付的可靠性保障&#xff0c;有以下三种承诺&#xff1a; 最多一次&#xff08;at most once&#xff09;&#xff1a;消息可能会丢失&#xff0c;但绝…

399. 除法求值

给你一个变量对数组 equations 和一个实数值数组 values 作为已知条件&#xff0c;其中 equations[i] [Ai, Bi] 和 values[i] 共同表示等式 Ai / Bi values[i] 。每个 Ai 或 Bi 是一个表示单个变量的字符串。 另有一些以数组 queries 表示的问题&#xff0c;其中 queries[j]…

linux的搭建以及网关配置

Linux 目前国内 Linux 更多的是应用于服务器上,而桌面操作系统更多使用的是 Windows 安装linux虚拟机 网址 VMware下载网址 点击Workstation 16 Pro for Windows下载 安装CentOS centO下载网址 依次点击 7.6.1810/ isos/ x86_64/ CentOS-7-x86_64-DVD-1810.…

编写一个最简单的Windows服务端和客户端程序

2023年8月4日&#xff0c;周五上午 编译器 我使用vs2022作为编译器 纯享版 服务端负责发送Hello给客户端&#xff0c; 客户端负责把Hello接收并打印出来。 服务端代码 #include<winsock2.h> #include<string.h> #pragma comment(lib, "ws2_32.lib")i…

Vue3 watch监听器

概览&#xff1a;watch监听器的定义以及使用场景。在vue3中的监听器的使用方式&#xff0c;watch的三个参数&#xff0c;以及进一步了解第一个参数可以是一个属性&#xff0c;也可以是一个数组的形式包含多个属性。 watch在vue3和vue2中的使用&#xff1a; vue3中&#xff1a…

使用Jackson自定义序列化操作(Jackson – Custom Serializer)

目录 Standard Serialization of an Object GraphCustom Serializer on the ObjectMapperCustom Serializer on the Class Standard Serialization of an Object Graph Data NoArgsConstructor AllArgsConstructor public class Item {public int id;public String itemName;p…

java中pageHelper插件各个函数介绍

PageHelper是一个用于对MyBatis进行分页查询的Java插件。它提供了一组函数来配置和使用分页功能。以下是PageHelper插件中几个常用函数的介绍&#xff1a; startPage(int pageNum, int pageSize) 该函数用于开启分页查询&#xff0c;指定要查询的页码&#xff08;pageNum&#…

uniapp-疫情应急管理系统学生端

1 疫情资讯展示 <template><view class"container"><uni-section title"自定义卡片内容" type"line"><uni-card title"基础卡片" class"card-box" v-for"(item,index) in epidemicNewsList"…

优雅地切换node版本(windows)

文章目录 1、下载并安装nvm2、nvm的使用3、处理npm版本与nodejs版本不匹配问题&#xff08;通常不会有这个问题&#xff09; 1、下载并安装nvm 卸载已安装的node&#xff1a;控制面板-程序-找到node并卸载 通常在控制面板中卸载后&#xff0c;nodejs目录、环境变量、注册表就自…

oracle会话打满

1.查看当前连接情况 col machine for a20 col program for a40 col sql_id for a20 set linesize 300 set pagesize 300 select machine,program,sql_id,count(1) from v$session group by machine,program,sql_id order by 4 desc;MACHINE PROGRAM SQL_ID …