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.pswp.cn/bicheng/20646.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/20646.shtml
英文地址,請注明出處:http://en.pswp.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 運行步驟: …

為什么要保持方差為1

1.數值穩定性: 在機器學習和深度學習中,維持激活函數輸入的方差在一個合理范圍內(如1)是很重要的,這有助于防止在訓練過程中發生梯度消失或梯度爆炸的問題。如果方差過大或過小,經過多層網絡后輸出結果的方…

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…

原碼、反碼和真值都不存在!

文章目錄 補碼的理解十進制計算二進制計算 補碼和真值換算數制轉換負數補碼轉真值負數真值轉補碼 注&#xff1a;均來自 做而論道 答主的理解。 補碼的理解 在計算機系統中&#xff0c;根本就沒有原碼和反碼&#xff0c;真值也是不存在的。在計算機系統中&#xff0c;并不使用…

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.本地調試項目連接遠…

2024-06-01 Win 11 升級 TPM 2 問題

點擊 Windows 更新&#xff0c;遇到報錯&#xff0c;說是不支持 CPU 和 TPM 等&#xff0c;先是朋友給了一個鏈接文章&#xff0c;說是可以繞過&#xff0c;嘗試后&#xff0c;只是少了 CPU 的報錯&#xff0c;但 TPM 2 過不了。 后來在網上找到這篇文章&#xff0c; 先試了幾…

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;因此信號的…

JDK1.8新特性1

JDK1.8新特性1 JDK1.8新特性&#xff1a;Lambda表達式&#xff1a;使用&#xff1a;無參數無返回值&#xff1a;單參數無返回值&#xff1a;多參數無返回值&#xff1a;多參數有返回值&#xff1a; 案例&#xff1a;案例1&#xff1a;案例2&#xff1a;案例3&#xff1a; 函數式…

代碼隨想錄訓練營Day 42|力扣62.不同路徑、63. 不同路徑 II

1.不同路徑 代碼隨想錄 視頻講解&#xff1a;動態規劃中如何初始化很重要&#xff01;| LeetCode&#xff1a;62.不同路徑_嗶哩嗶哩_bilibili 代碼&#xff1a; class Solution { public:int uniquePaths(int m, int n) {// dp[i][j] 表示從起點走到坐標為i&#xff0c;j的地方…

全自動打包封箱機:解析其在產品質量與安全保障方面的作用

在當今快節奏的生產環境中&#xff0c;全自動打包封箱機以其高效、精準的特點&#xff0c;正逐漸成為生產線上的得力助手。它不僅提升了生產效率&#xff0c;更在產品質量與安全保障方面發揮著舉足輕重的作用。星派將詳細解析全自動打包封箱機在產品質量與安全保障方面的作用。…

css簡單介紹

1.css介紹 css指的是層疊樣式(Cascadingstyle sheets)&#xff0c;是用來給HTML標簽添加樣式的語言。他可以設置HTML頁面中 文字大小&#xff0c;顏色&#xff0c;對齊方式及元素的 寬高&#xff0c; 位置 等樣式。 一個完整的網頁是由HTML、CSS、Javascript三部分組成。HT…

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;代碼倉…