css网站导航-菜单
一个简单的网站导航效果:
效果案例:查看演示
css:
*{margin:;padding:;border:;}
body{font-family: arial, 宋体, serif;font-size: 12px;}
.menu{width:1170px;margin:0 auto;height:24px;}
#nav{line-height: 24px;list-style-type: none;background: #666;}
#nav a{display: block;width: 80px;text-align: center;}
#nav a:link{color: #666;text-decoration: none;}
#nav a:visited{color: #666;text-decoration: none;}
#nav a:hover{color: #FFF;text-decoration: none;font-weight: bold;}
#nav li{float: left;width: 80px;background: #CCC;}
#nav li.on{background: #999;}
#nav li a:hover{background: #999;}
/*清除浮动*/
.clearfix:after{visibility:hidden;display:block;font-size:;content:" ";clear:both;height:;}
.clearfix{*zoom:;}
body:
<div class="menu">
<ul id="nav" class="clearfix">
<li>
<a href="#">产品介绍</a>
</li>
<li>
<a href="#">服务介绍</a>
</li>
<li>
<a href="#">成功案例</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#">在线演示</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
js:
$("#nav li").click(function () {
$(this).siblings().removeClass("on")
$(this).addClass("on");
}).eq(0).click();
css网站导航-菜单的更多相关文章
- 用CSS做导航菜单的4个理由
导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...
- CSS之导航菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- 使用CSS创建有图标的网站导航菜单
在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...
- 顶 企业站常用css横向导航菜单
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- CSS 自适应导航菜单
文章目录 以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...
- CSS自适应导航菜单
以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...
- css之导航菜单的制作
通过设置<a>的背景改变样式,通过a:hover改变交互效果,改变文字颜色color 纵向 <!DOCTYPE html> <html> <head lang ...
随机推荐
- C# 实体model验证输出
新建Model实体: [Required(ErrorMessage = @"地址 1 为必填项!")] [StringLength(, ErrorMessage = @" ...
- 【原】Object 异常静态
//所有的类都继承Object类: Object a=; Object b="ddfasfda"; //正常情况下,都会省略掉:Object:但实际上是存在的: class tes ...
- A-Frame 简介03
如果你想开始使用A-Frame可以通过以下几种方式: Play with CodePen Grab the Boilerplate Include the JS Build Install from ...
- Javascript常见全局函数
ØdecodeURI() 解码某个编码的 URI ØencodeURI() 把字符串编码为 URI ØdecodeURIComponent() 解码一个编码的 URI 组件 ØencodeURIC ...
- 002.TPerlRegEx简单测试
我要做什么? 将一个字符串中的所有连续的数字替换成一个* 代码: program Project1; {$APPTYPE CONSOLE} uses System.SysUtils, PerlRegE ...
- 【gradle】 入门
robin@robin-PC2 /D/JavaWorkSpace/payment/alipay-wap (master)$ ./gradlew idea
- skip-grant-tables:非常有用的mysql启动参数
skip-grant-tables:非常有用的mysql启动参数 介绍一个非常有用的mysql启动参数—— --skip-grant-tables.顾名思义,就是在启动mysql时不启动grant ...
- 华为机试题——数组排序,且奇数存在奇数位置,偶数存在偶数位置
题目要求很简单,就是给你一个数组,对它进行排序,并且排序后,奇数要放在奇数的位置上,偶数要放在偶数的位置上,如果不满足这个规则的话就在数组上填充0 实现代码如下,文中值得注意的一点就是如何判读这个数字 ...
- ECSHOP安装或使用中提示Strict Standards: Non-static method cls_image:
随着ECSHOP的不断发展,越来越多的人成为了ECSHOP的忠实粉丝.由于每个人的服务器环境和配置都不完全相同,所以ECSHOP也接二连三的爆出了各种各样的错误信息.相信不少新手朋友在ECSHOP安装 ...
- 机器学习算法与Python实践之(四)支持向量机(SVM)实现
机器学习算法与Python实践之(四)支持向量机(SVM)实现 机器学习算法与Python实践之(四)支持向量机(SVM)实现 zouxy09@qq.com http://blog.csdn.net/ ...