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结束 */

背景图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nodejs-- 网络编程

网络编程 构建tcp服务 TCP tcp全名为传输控制协议。再osi模型中属于传输层协议。 tcp是面向连接的协议,在传输之前需要形成三次握手形成会话 只有会话形成了,服务端和客户端才能想发送数据,在创建会话的过程中,服务端和客户…

【计算机毕业设计】353微信小程序零食批发交易管理系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

如何进行时间管理

1.一项调查显示,每个人在睡觉上花费的平均时间大约为25年,这无疑是非常重要的。但排名第二的项目却让人大跌眼镜——看电视是8.3年。接下来分别是工作7.5年、吃饭6年、等待和家务各5年、身体护理4.1年、做白日梦4年,等等。 远远落后的是读书时…

ChatTTS+Python编程搞定语音报时小程序

文字转语音神器Python编程搞定语音报时小程序 今天一个好哥们发了一个文字转语音的AI神器的短视频。这个神器的网站是[ChatTTS - Text-to-Speech for Conversational Scenarios][https://chattts.com/],如下图所示: 这个开源项目可以从github.com上下载…

[数据集][目标检测]轮胎检测数据集VOC+YOLO格式439张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):439 标注数量(xml文件个数):439 标注数量(txt文件个数):439 标注类别…

智慧商砼搅拌车安监运营管理的创新实践

随着城市化进程的加速,商砼搅拌车作为城市建设的重要设备,其安全管理与运营效率直接关系到工程质量和施工进度。近年来,通过引入先进的4G无线视频智能车载终端套件,我们实现了对商砼搅拌车的高精度定位、实时音视频调度、实时油量…

队列——一种操作受限的线性表

队列 队列(Queue)简称队,也是一种操作受限的线性表,只允许在表的一端进行插入,而在表的另一端进行删除。向队列中插入元素称为入队或进队,删除元素称为出队或离队。队列中的元素是先进先出(Fir…

C++设计模式-桥接模式

运行在VS2022,x86,Debug下。 29. 桥接模式 桥接模式将抽象与实现分离,使二者可以独立地变化。 应用:如在游戏开发中,多个角色和多个武器交叉组合时。可以使用桥接模式,定义角色抽象类,武器抽象…

注册北京个体工商户条件和办理时间

在北京这座充满活力的城市中,每天都有无数的创业者怀揣着梦想,踏上创业之路。然而,对于许多初次接触企业注册的人来说,往往对注册流程和时间感到困惑。特别是选择代理服务时,更希望了解一个大概的时间范围。那么&#…

Flutter开发效率提升1000%,Flutter Quick教程之对Widget进行删除,剪切,粘贴

一,删除操作 1,首先我们选中要删除的Widget。 2,在左边的侧边栏,点击删除按钮,即可完成对组件的删除操作。 二,剪切。剪切是相同的道理,都是先选中,再点击对应的按钮。 1&#xff…

拿捏AVL(C++)

文章目录 前言AVL树介绍模拟实现框架查找插入验证删除完整代码 性能分析总结 前言 在本篇文章中我,我们将会介绍一下有关AVL树的相关内容,并且对一些接口进行模拟实现。 AVL树介绍 为什么会有AVL树呢?? 我们在之前学习二叉树时…

UI的学习(一)

UI的学习(一) 文章目录 UI的学习(一)UIlabelUIButtonUIButton的两种形式UIButton的事件触发 UIView多个视图之间的关系 UIWindowUIViewController一个视图推出另一个视图 定时器和视图移动UISwitchUISlider和UIProgressSlid步进器与分栏控制器UITextFieldUIScrollView有关实现它…

【Python打包成exe】

Python打包成exe 前言一、理论知识打底二、实操开始----pyinstaller【Base环境下】【这是一个失败案例】规规矩矩 总结 前言 先放点参考 这个字多,写得很详细⇨用 Pyinstaller 模块将 Python 程序打包成 exe 文件(全网最全面最详细,万字详述…

C语言王国——内存函数

目录 1 memcpy函数 1.1 函数表达式 1.2 函数模拟 2 memmove函数 2.1 函数的表达式 2.2 函数模拟 3 memset函数 3.1 函数的表达式 3.2 函数的运用 4 memcmp函数 4.1函数的表达式: 4.2 函数的运用 5 结论 接上回我们讲了C语言的字符和字符串函数&#…

UI案例——登陆系统

UI的登陆界面实例 在学习了UILabel,UIButton,UIView,UITextField的内容之后,我们就可以写一个简单的登陆界面 我们可以通过UILabel来编写我们显示在登陆界面上的文字比方说下面这两行字就是通过UILabel去实现的。 下面给出一下实现…

6.2 休息日 背包问题总结

就目前所遇到的01背包与完全背包作总结。 01背包 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i],得到的价值是value[i] 。每件物品只能用一次,求解将哪些物品装入背包里物品价值总和最大。 二维dp数组01背包 动规五部曲 1.确定…

【Linux】System V 信号量

一、信号量的概念理论渗透 1.1 基本概念 共享资源:多个执行流,可以看到的一份资源临界资源:被保护起来的资源 —— 保护的方式:同步和互斥互斥:任何时候只能有一个进程在访问共享资源资源,一定要被程序员…

LeetCode刷题之HOT100之搜索旋转排序数组

2024/6/2 雨一直下,一个上午都在床上趴着看完了《百年孤独》,撑伞去吃了个饭,又回到了宿舍。打开许久未开的老电脑,准备做题了。《百年孤独》讲了什么,想表达什么,想给读者留下什么,我不知道&am…

每日一题《leetcode-- LCR 025.两数相加||》

https://leetcode.cn/problems/lMSNwu/ 分别把给定的两个链表翻转,然后从头开始相加。 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ //反转链表 struct ListNode* reverselist(struct ListNode*h…

项目中统一异常处理

项目中统一异常处理 1.异常处理框架图2.实现 1.异常处理框架图 异常处理除了输出在日志中,还需要提示给用户,前端和后端需要作一些约定: 错误提示信息统一以json格式返回给前端。以HTTP状态码决定当前是否出错,非200为操作异常。…