用CSS實現類似導航翻轉功能例子
用CSS實現類似導航翻轉功能例子
今天寫了一個css實現類化導航翻轉功能例子,想拿出來和大家分享一下;
首先看看它的效果:
滑鼠移上去的時候:
背景和字型的顏色都變了,效果如下:
首先寫一個HTML文件,內容如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>導航翻轉功</title>
<link href=”test2.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<ul>
<li id=”blogger”><a href=”www.baidu.com” ><strong>my</strong> blogger</a></li>
<li id=”google”><a href=”www.google.com”><strong>my</strong> google</a></li>
<li id=”sogou”><a href=”www.sogou.com”><strong>my</strong> sogou</a></li>
<li id=”cto”><a href=”www.51cto.com”><strong>my</strong> 51cto</a></li>
</ul>
/*id屬性的名稱的命名規則,是不能數字開頭。*/
</body>
</html>
下面來開始寫CSS程式碼:
1. 去掉無序列表前面的加點預設圓點和內外邊距。
ul{
list-style:none;
margin:0;
padding:0;
}
2. 在li中使用float:left使得li水平排列。
}
ul li{
float:left;
margin:0;
padding:0;
}
3. 設定li中a標記的連結字型樣式,並設定display:block;同時去年下劃線。
ul li a{
color:#77;
display:block;
padding:90px 10px 5px;
text-align:center;
text-decoration:none;
}
4. 給a標記新增背景圖片。
ul li#blogger a{
background:url(face01.png) transparent no-repeat top center;
}
ul li#google a{
background:url(face02.png) transparent no-repeat top center;;
}
ul li#sogou a{
background:url(face03.png) transparent no-repeat top center;
}
ul li#cto a{
background:url(face04.png) transparent no-repeat top center;
}
5. 設定滑鼠經過時,連結字型的顏色。
ul li#blogger a:hover,
ul li#google a:hover,
ul li#sogou a:hover,
ul li#cto a:hover{
background-color:#FCC;
color:#000;
}
Ok,完成,測試一下效果。
本文轉自gauyanm 51CTO部落格,原文連結:http://blog.51cto.com/gauyanm/552119,如需轉載請自行聯絡原作者
相關文章
- 類似 MSDN 左邊導航樹效果的實現! [JavaScript + ASP] (轉)JavaScript
- 類似 MSDN 導航樹效果 ASP.Net(C#) + JavaScript 實現! (轉)ASP.NETC#JavaScript
- 實現類似IE的列印網頁功能 (轉)網頁
- 室內導航用什麼來實現?通過什麼可以實現導航功能?
- css3實現的3D翻滾導航選單CSSS33D
- PostgreSQL類似OracleMERGE功能的實現SQLOracle
- SQLite中中實現 if not exist 類似功能SQLite
- 用 hyperf websocket 實現,類似 qq 單機登入功能Web
- 不用匯入SDK就可實現導航--URI方式跳轉到各類地圖進行導航地圖
- css3實現動態導航選單CSSS3
- 教你如何用SQLite 實現if not exist 類似功能的操作SQLite
- 實現類似Pinterest 的圖片預載入功能REST
- 在Asp.Net中實現類似DWR的功能ASP.NET
- 使用 JavaScript 實現靈活的固定導航功能JavaScript
- Vue.js+cube-ui(Scroll元件)實現類似頭條效果的橫向滾動導航條Vue.jsUI元件
- css實現立體效果橫向導航選單CSS
- css3實現動態圓形導航欄CSSS3
- 用Java 19實現類似Go併發 - mccueJavaGo
- 實現左側導航和橫向導航
- CSS-實戰-梯形背景導航CSS
- 用C++ Builder 實現類似ie位址列的ComboBox (轉)C++UI
- 純css實現固定在網頁底部選單導航CSS網頁
- .Net中用js實現無重新整理類似ajax功能(例)JS
- 請教網站導航條的功能怎麼實現網站
- Tablayout實現導航欄TabLayout
- 用RecyclerView實現類似支付寶應用圖示拖拽排序以及增刪管理的功能View排序
- 用 golang 去實現類似 swoole 的 websocket 服務 ?GolangWeb
- CSS實現的側欄三級導航選單程式碼CSS
- GetX 實現類似微信轉發搜尋多選好友
- 兩步實現類似格瓦拉的轉場動畫動畫
- 採用 SwiftNIO 實現一個類似 Express 的 Web 框架SwiftExpressWeb框架
- CSS3 滑鼠懸浮立體翻滾的導航選單CSSS3
- 實用好看的CSS+JS+table 導航CSSJS
- lakeFS:實現類似於Git或事件溯源ES的物件儲存功能Git事件物件
- css3實現的可伸縮圓角導航選單CSSS3
- CSS垂直導航選單CSS
- 類似咻一咻,水波紋實現
- 如何實現園區路線導航?園區樓宇地圖導航如何實現?地圖