五彩导航案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         a.one{
 8             display:inline-block;
 9             height:58px;
10             width:120px;
11             text-align:center;
12             text-decoration:none;
13             color:#fff;
14             line-height:50px;
15             background:url("images/bg1.png");
16         }
17         a.one:hover{
18             background:url("images/bg2.png");
19         }
20         a.two{
21             display:inline-block;
22             height:58px;
23             width:120px;
24             text-align:center;
25             text-decoration:none;
26             color:#fff;
27             line-height:50px;
28             background:url("images/bg3.png");
29         }
30         a.two:hover{
31             background:url("images/bg4.png");
32         }
33         a.three{
34             display:inline-block;
35             height:58px;
36             width:120px;
37             color:#fff;
38             text-align:center;
39             line-height:50px;
40             text-decoration:none;
41             background:url("images/bg5.png");
42         }
43         a.four{
44             display:inline-block;
45             height:58px;
46             width:120px;
47             color:#fff;
48             text-align:center;
49             line-height:50px;
50             text-decoration:none;
51             background:url("images/bg6.png");
52         }
53     </style>
54 </head>
55 <body>
56     <a href="#" class="one">五彩导航</a>
57     <a href="#" class="two">五彩导航</a>
58     <a href="#" class="three">五彩导航</a>
59     <a href="#" class="four">五彩导航</a>
60 </body>
61 </html>

原文地址：https://www.cnblogs.com/twinkle-/p/9096195.html

时间： 2024-11-09 00:00:50

五彩导航案例的相关文章

8 清除浮动方式/小米导航案例

清除浮动方式之伪元素清除法: <style type="text/css"> .top_bar{ height: 200px; border:1px solid red; } .child1{ width:200px; height:200px; background-color: green; float: left; } .child2{ width: 200px; height:200px; background-color: orange; float: right

07- 小米导航案例

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; } .box{ width: 960px; /

前端 ---小米导航案例

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; } .box{ width: 960px; /

小米导航案例

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; } .box{ width: 960px; /

五彩小球案例

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五彩小球</title> 6 <style> 7 *{margin: 0;padding: 0;list-style: none;} 8 html, body, #box{width: 100%;height: 100%;}

导航案例

思路:分两步, 1.先把各个框框画好 2.用JS实现效果.---用到两个事件:onmouseover,onmouseout CSS: @charset "utf-8"; /* CSS Document */ * { margin:0px; padding:0px; } #a{ border:1px solid #00F; width:120px; height:60px; left:300px; top:200px; background-color:#F00; position:ab

导航案例（内边距撑开盒子）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

老二牛车Axure夜话：Axure手机原型视频教程之侧滑菜单(抽屉导航)

老二牛车Axure夜话:Axure手机原型视频教程之侧滑菜单(抽屉导航) 案例描述:侧滑菜单(抽屉导航) 知识点: 动态面板移动效果图: 本站在线效果预览:http://www.iniuche.com/phonelesson/drawer/start.html#p=home(firefox原型文件) AxShare在线效果预览: 原型下载地址:侧滑菜单抽屉导航.rp 在线视频: 实现步骤: 更新中…..

大型网站的导航设计

对于大部分网站,导航并不算是个挑战.一条主导航加条二级导航支撑,通常就足够了. 典型的做法是,二级导航显示出父.兄及当前子菜单.常显的主导航条显示最顶层的菜单,允许用户在菜单间切换. 然而,有一类网站让这种传统的导航样式承担有些吃力.这就是我要提的大型网站. 定义大型网站一个大型网站由结合了综合服务和产品的典型大型组织所有.这个组织通常也服务各色用户. 拥有大型网站的组织,包括BBC这类机构型的,类似微软这种项目多样化的公司型的,政府部门,高等教育类的以及运作多种活动的慈善组织类的,比如世界自