css动态导航栏鼠标悬停特效

@charset "utf-8";
/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 14px "微软雅黑"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{ background: url(../dark_wood.png) 0 0 repeat; padding: 100px 0px; text-align: center; }
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
/*科e互联特效基本框架CSS结束,应用特效时,以上样式可删除*/
/* 效果CSS开始 */
body { margin: auto; text-align: center; }
.ribbon { display: inline-block; }
.ribbon:after, .ribbon:before { margin-top: 0.5em; content: ""; float: left; border: 1.5em solid #fff; }
.ribbon:after { border-right-color: transparent; }
.ribbon:before { border-left-color: transparent; }
.ribbon a:link, .ribbon a:visited { color: #000; text-decoration: none; float: left; height: 3.5em; overflow: hidden; }
.ribbon span { background: #fff; display: inline-block; line-height: 3em; padding: 0 1em; margin-top: 0.5em; position: relative; -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; }
.ribbon a:hover span { background: #FFD204; margin-top: 0; }
.ribbon span:before { content: ""; position: absolute; top: 3em; left: 0; border-right: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff; }
.ribbon span:after { content: ""; position: absolute; top: 3em; right: 0; border-left: 0.5em solid #9B8651; border-bottom: 0.5em solid #fff; }
/* 效果CSS结束 */

背景图

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

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

相关文章

8、资源操作 Resource

目录 8.1、Spring Resources概述补充:什么是 low-level 资源?1. 文件系统资源2. 类路径资源3. URL资源4. 内嵌资源5. InputStream资源6. ServletContext资源示例代码结论 8.2、Resource接口8.3、Resource的实现类8.3.1、UrlResource访问网络资源1&#x…

LIO-EKF: 运行数据UrbanNav与mid360设备详细教程

一、代码连接 代码下载连接: YibinWu/LIO-EKF: Maybe the simplest LiDAR-inertial odometry that one can have. (github.com) 编译步骤: cd srcgit clone gitgithub.com:YibinWu/LIO-EKF.gitcatkin_makesource devel/setup.bash 运行步骤: …

java并发处理机制

在Java中,并发处理机制主要是通过线程来实现的。Java提供了丰富的类和接口来支持多线程编程,主要集中在 java.util.concurrent 包中。以下是一些关键的并发处理机制: 1.线程创建:可以通过继承 Thread 类或实现 Runnable 接口来创建…

公园【百度之星】/图论+dijkstra

公园 图论dijkstra #include<bits/stdc.h> using namespace std; typedef long long ll; typedef pair<ll,ll> pii; vector<ll> v[40005]; //a、b、c分别是小度、度度熊、终点到各个点的最短距离 ll a[40005],b[40005],c[40005],dist[40005],st[40005]; void…

java 远程调试

1.远程启动时 jdk1.8-32\jre\bin\java.exe -Dfile.encodingUTF-8 -Djava.library.pathlib -agentlib:jdwptransportdt_socket,servery,suspendn,address5005 -jar local-com.yuetai.service-0.0.1-SNAPSHOT.jar --spring.config.locationapplication.yml 2.本地调试项目连接远…

JCR一区级 | Matlab实现TCN-BiGRU-MATT时间卷积双向门控循环单元多特征分类预测

JCR一区级 | Matlab实现TCN-BiGRU-MATT时间卷积双向门控循环单元多特征分类预测 目录 JCR一区级 | Matlab实现TCN-BiGRU-MATT时间卷积双向门控循环单元多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现TCN-BiGRU-MATT时间卷积双向门控循环单元多…

一维时间序列信号的小波模极大值分解与重建(matlab R2018A)

数学上称无限次可导函数是光滑的或没有奇异性&#xff0c;若函数在某处有间断或某阶导数不连续&#xff0c;则称函数在此处有奇异性&#xff0c;该点就是奇异点。奇异性反映了信号的不规则程度&#xff0c;因为信号的奇异点和突变部分往往携带者重要信息&#xff0c;因此信号的…

全自动打包封箱机:解析其在产品质量与安全保障方面的作用

在当今快节奏的生产环境中&#xff0c;全自动打包封箱机以其高效、精准的特点&#xff0c;正逐渐成为生产线上的得力助手。它不仅提升了生产效率&#xff0c;更在产品质量与安全保障方面发挥着举足轻重的作用。星派将详细解析全自动打包封箱机在产品质量与安全保障方面的作用。…

CLIP--Learning Transferable Visual Models From Natural Language Supervision

参考&#xff1a;CLIP论文笔记--《Learning Transferable Visual Models From Natural Language Supervision》_visual n-grams模型-CSDN博客 openAI&#xff0c;2021&#xff0c;将图片和文字联系在一起&#xff0c;----->得到一个能非常好表达图片和文字的模型主题&#…

网络安全-钓鱼篇-利用cs进行钓鱼

一、环境 自行搭建&#xff0c;kill&#xff0c;Windows10&#xff0c;cs 二、原理 如图所示 三、钓鱼演示 首先第一步&#xff1a;打开System Profiler-分析器功能 选择克隆www.baidu.com页面做钓鱼 之后我们通过包装域名&#xff0c;各种手段让攻击对象访问&#xff1a;h…

Java面试题:Redis1_Redis的使用场景和如何解决Redis缓存穿透问题

Redis使用场景常见问题 缓存 缓存三兄弟(穿透,击穿,雪崩) 双写一致 持久化 数据过期策略 数据淘汰策略 分布式锁 setnx,redisson 消息队列,延迟队列 … 解决Redis缓存穿透问题 缓存穿透问题 请求->redis缓存->mysql数据库 当一个新请求到来时,先会访问redi…

JVM(Java虚拟机)笔记

面试常见&#xff1a; 请你谈谈你对JVM的理解?java8虚拟机和之前的变化更新?什么是OOM&#xff0c;什么是栈溢出StackOverFlowError? 怎么分析?JVM的常用调优参数有哪些?内存快照如何抓取&#xff1f;怎么分析Dump文件&#xff1f;谈谈JVM中&#xff0c;类加载器你的认识…

前端最新面试题(基础模块HTML/CSS/JS篇)

目录 一、HTML、HTTP、WEB综合问题 1 前端需要注意哪些SEO 2 img的title和alt有什么区别 3 HTTP的几种请求方法用途 4 从浏览器地址栏输入url到显示页面的步骤 5 如何进行网站性能优化 6 HTTP状态码及其含义 7 语义化的理解 8 介绍一下你对浏览器内核的理解? 9 html…

【C++】vector常见的使用方式

前言&#xff1a;在上一篇中我们讲到了string类的模拟实现&#xff0c;今天我们将进一步的去学习vector的一些常用的使用方法。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:高质量&#xff23;学习 &#x1f448; &#x1f4af;代码仓…

命运方舟台服注册 命运方舟台服怎么注册?不会操作看这里

命运方舟台服注册 命运方舟台服怎么注册&#xff1f;不会操作看这里 命运方舟作为今年备受瞩目的一款MMORPG类型游戏&#xff0c;在上线前的预约数量已经一次又一次创下新高。这款游戏的开发商Smile gate真是给玩家们带来了一款让人眼前一亮的作品。游戏创建在虚幻引擎的基础…

用esp prog烧录ESP32-C3板踩坑

附ESP32C3的GPIO一览&#xff1a; vscode选择Jtag烧录&#xff0c;终端输出esp_usb_jtag: could not find or open device&#xff1a; D:\Devtools\Espressif\tools\openocd-esp32\v0.12.0-esp32-20230921\openocd-esp32\bin\openocd.exe -f board/esp32s3-builtin.cfgOpen O…

【电路笔记】-带阻滤波器

带阻滤波器 文章目录 带阻滤波器1、概述2、典型带阻滤波器配置3、带阻滤波器示例14、陷波滤波器5、带阻滤波器示例26、总结带阻滤波器也称为陷波滤波器,阻止并拒绝位于其两个截止频率点之间的频率,并传递该范围两侧的所有这些频率。 1、概述 通过将基本 RC 低通滤波器与 RC …

ElasticSearch教程(详解版)

本篇博客将向各位详细介绍elasticsearch&#xff0c;也算是对我最近学完elasticsearch的一个总结&#xff0c;对于如何在Kibana中使用DSL指令&#xff0c;本篇文章不会进行介绍&#xff0c;这里只会介绍在java中如何进行使用&#xff0c;保证你看完之后就会在项目中进行上手&am…

Arduino烧录esp8266

default_encoding: cp936 Assume aggressive ‘core.a’ caching enabled. Note: optional global include file ‘arduino_modified_sketch_764314\Blink.ino.globals.h’ does not exist. Read more at https://arduino-esp8266.readthedocs.io/en/latest/faq/a06-global-bui…

写字静不下心?不如试试这些“笨方法”

夏天悄悄热起来啦&#xff5e;有人说&#xff0c;想踏踏实实写一会儿&#xff0c;但又静不下心&#xff0c;耐不住性子&#xff0c;快收下这四个小锦囊&#xff0c;与古人一起笨拙精进吧&#xff01;    1、不论输赢      每次课前&#xff0c;暄桐林曦老师总会强调&am…