导航栏示例

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <style type="text/css">
 5         body
 6         {
 7             font-family: Arial;
 8             font-size: 10pt;
 9         }
10
11         #navlist
12         {
13             margin: 0;
14             padding: 0;
15             text-align: center;
16         }
17
18         #navlist li
19         {
20             list-style: none;
21             display: inline;
22         }
23
24         #navlist li a
25         {
26             color: #fff;
27             background-color: #900;
28             padding: 0.2em 1em;
29             text-decoration: none;
30         }
31
32         #navlist li a:hover
33         {
34             color: #ffffff;
35             background-color: #333333;
36         }
37
38         .active
39         {
40             border: 1px solid #900;
41             color: #900;
42             font-weight: bold;
43             padding: 0.2em 1em;
44         }
45     </style>
46 </head>
47 <body>
48     <ul id="navlist">
49         <li class="active">Home</li>
50         <li><a>About Us</a></li>
51         <li><a>Services</a></li>
52         <li><a>Clients</a></li>
53         <li><a>Contact Us</a></li>
54     </ul>
55 </body>
56 </html>

效果图:

时间: 2024-11-13 09:52:57

导航栏示例的相关文章

html 小米商城导航栏示例

1.小米导航栏示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06小米商城导航条示例</title> <style> /* 全局通用的样式,去除浏览器默认的内边距和外边距 */ * { margin: 0; /* 去除浏览器默认的margin和padding */ padding:

Bootstrap入门Demo——制作路径导航栏

今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看. 一,源码文件简介 下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的. 二,如何引入的问题 现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后

文字导航栏的做法

文字导航栏 示例: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <style>         * {             margin: 0;             padding: 0;         }         .wrap {

IOS7的状态栏和导航栏

iOS 7中默认的导航栏 在开始定制之前,我们先来看看iOS 7中默认导航栏的外观.通过Xcode用Single View Controller模板创建一个工程.然后将view controller嵌入到一个navigation controller中.如果你不想从头开始,那么也可以在这里下载到这个示例工程. Xcode 5包含有iOS 6和iOS 7模拟器,我们可以在这两个不同的模拟器版本中运行示例程序,进行对比,如下图所示: vcC4tcSxs76w0dXJqzwvaDM+CjxwPtTaa

Android界面编程——导航栏及菜单(六)

Android界面编程--导航栏及菜单 2.7导航栏及菜单 2.7.1  ActionBar ActionBar是Android3.0(API 11)开始增加的新特性,ActionBar出现在活动窗口的顶部,可以显示标题.icon.Actions按钮.可交互View,可实现应用程序级的导航,如图2.7-1所示 图2.7-1 其中 1. App icon: 主要用于展示App的Logo,如果当前界面不是一级界面,还可以展示返回航. 2.View Control: 用于切换不同的视图或者展示非交互信

更改导航栏的背景和文字Color

更改导航栏的背景和文字Color方法一: [objc] view plaincopy//set NavigationBar 背景颜色&title 颜色  [self.navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:20/255.0 green:155/255.0 blue:213/255.0 alpha:1.0]];  [self.navigationController.navigationBar

jquery自定义插件-参数化配置多级菜单导航栏插件

1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. 使用插件时,可以修改默认参数,目前插件提供了设置菜单的分布方式:横向或纵向:菜单的位置:依赖上一级菜单栏的定位:上下左右定位. 修改调用参数,将一二级菜单改为纵向排列:并将三级菜单的显示位置改为二级菜单栏的右侧(其他的和默认保持一致),修改后运行效果如下图: 细心的观察,会发现上面两个菜单导航栏的

ecshop导航栏自动显示三级或多级子栏目,多级频道分类,并实现css高亮显示

ecshop导航要达到的目标: 一,比如上图,当我访问三级分类,响应式布局,这个栏目时,最顶级的元件这个分类,要高亮显示 二,如果导航上面有商品或文章频道, 并且他们有子栏目,则全自动显示所有的子栏目. 三,如果这个导航有子分类,则统一显示下拉三角标志. 代码如下 一,在includes/lib_main.php 文件中,修改掉或另外重命名并重定义一个这个get_navigator()函数,修改后的内容如下,另外get_categories_tree()这个函数为系统自带的在lib_goods.

css小案例:导航栏特效

css小案例:导航栏特效,实现如下图所示效果: 首先可以将html代码写出: 1 <nav class="cl-effect-1"> 2 <a href="#">Umbrella</a> 3 <a href="#">Ineffable</a> 4 <a href="#">Lilt</a> 5 <a href="#"&g