很多刚接触前端的可能遇到一些css能解决的小问题，我现在总结了一些，将会逐渐和大家分享，先是导航的背景问题，在网页中常常看到，当鼠标放到一个导航按钮上面是，就会出现一些特效，比如背景，这是最常用的，我们就来解决一下，这是所有导航都能用到的方法，能够去一反三的方法。

html代码如下：

 1 <html>

.........

 2 <body>

 3 <div id="nav">

 4 <ul>

 5 <li><a href=""><strong><span>首页</span></strong></a></li>

 6 <li><a href=""><strong><span>关于我们</span></strong></a></li>

 7 <li><a href=""><strong><span>联系我们</span></strong></a></li>

 8 <li><a href=""><strong><span>会员专区</span></strong></a></li>

 9 </ul>

10 </div>

11 </body>

12 </html>

css代码如下：

1 #nav {width:300px;height:80px;padding_top:20px;margin:0 auto;}

2 #nav li{float:left;heigth60px;margin-left:10px;}

3 #nav a{float:left;heigth60px;line-height:60px;font......}//设置li的文本的高度，效果是居中；

4 #nav strong{float:left;height:60px;}

5 #nav span{float:left;height:60px;padding:0 14px;}//设置每个li的左右的宽度；

6 //把鼠标放到导航上的背景效果

7 #nav a:hover {background:url(.......) repeat-x;}//中间背景重复；

8 #nav a:hover strong{background:url(.......) no-repeat left;}//左边背景，不重复，放在左边；

9 #nav a:hover span{background:url(.......) no-repeat right;}//右边背景，不重复，放在右边；

上面需要修改的地方：

1.html文件中需要添加css文件导入；  2.css文件中路径需要改正，选中需要用到的图片。

这是我之前自己写的运行效果如图（上面的示例代码，不完全，不能运行）：

当鼠标放在第二个导航按钮上时，就会出现圆角的一张背景图片，因为第一个”HOME“是设置了激活，所以一直处于有背景的状态：

css通用小笔记01——导航背景的更多相关文章

  1. css通用小笔记03——浏览器窗口变小 div错位的问题

    我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...

  2. css通用小笔记02——浮动、清除（三个例子）

    css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: h ...

  3. HTML+CSS基础小笔记再整理

    1. font的两个必须要写的:font-size 和 font-family text-indent 首行缩进(em)1em=一个文字大小 text-algin 对齐方式:left.center.r ...

  4. html+css常用小笔记（持续更新）

    1 去掉input点击时的蓝色边框 outline:none; 2 禁止文本选中 -webkit-touch-callout: none; /* iOS Safari */ -webkit-user- ...

  5. Css技术入门笔记01

    在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...

  6. CSS Secrets 翻译笔记 01: CSS coding tips

    .firDemoButton{ padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0 ...

  7. AMQ学习笔记 - 01. 相关背景

    概述 介绍中间件.MOM.JMS.ActiveMQ,及相互的关系. 中间件 由于业务的不同.技术的发展.硬件和软件的选择有所差别,导致了异构组件或应用并存的局面.要使这些异构的组件协同工作,一个有效的 ...

  8. 背包DP入门小笔记01背包

    FJUT OJ 2347 http://59.77.139.92/Problem.jsp?pid=2347 采药 TimeLimit:1000MS  MemoryLimit:128MB 64-bit ...

  9. 快速学习html、css的经典笔记

    HTML语言剖析 Html简介-目录 全写: HyperText Mark-up Language  译名: 超文本标识语言  简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag ...

随机推荐

  1. 理解CSS中的数学表达式calc()

    前面的话 数学表达式calc()是CSS中的函数,主要用于数学运算.使用calc()为页面元素布局提供了便利和新的思路.本文将介绍calc()的相关内容 定义 数学表达式calc()是calculat ...

  2. 自制jQuery标签插件

    在项目中需要一个添加标签的小插件,查看了一些已有插件后,发现很现成的高级插件,也有比较简单的插件.最后还是决定自己来写,这样能控制代码,以后与其他插件结合使用的时候能更好的把控.初步在IE6 7 8, ...

  3. [转载]UML类图总结

    前言 类图和序列图是UML中最常用的两种Diagram.我将做详细的总结.在许多书中,或者网站中,在介绍一个系统的子系统的设计时,很多时候,都是给出简单的类图来简述构成子系统的类之间的关系.这足以说明 ...

  4. Spark入门实战系列--5.Hive（下）--Hive实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 1.Hive操作演示 1.1 内部表 1.1.1 创建表并加载数据 第一步   启动HDFS ...

  5. 轻松自动化---selenium-webdriver(python) (七)

    本节知识点: 多层框架或窗口的定位: switch_to_frame() switch_to_window() 智能等待: implicitly_wait() 对于一个现代的web应用,经常会出现框架 ...

  6. javascript小技巧：同步服务器时间、同步倒计时

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个 ...

  7. 歌词文件解析(一):LRC格式文件的解析

    LRC是英文lyric(歌词)的缩写,被用做歌词文件的扩展名.以lrc为扩展名的歌词文件可以在各类数码播放器中同步显示.LRC 歌词是一种包含着“*:*”形式的“标签(tag)”的基于纯文本的歌词专用 ...

  8. Web API Filter ActionFilterAttribute 使用

    WebApi 提供两种过滤器的类型: 1.ActionFilterAttribute 2.exceptionFilterAttribute 两个类都是抽象类,ActionFilter 主要实现执行请求 ...

  9. asp.net中Ajax控件的用途（一）

    1,UpdatePanel控件,用户更新部分内容,示例 放入一个Label和一个Button,单击按钮,label显示当前时间. 2,ScriptManagerProxy控件,每个页面只能有一个Scr ...

  10. 【SQL】找出行数与自增标识值不相等的表（即有缺行）

    环境:mssql ent 2k8 r2 原理:遍历所有含自增列的用户表,用sp_spaceused过程分别获取每张表的行数并写入临时表,然后使用IDENT_CURRENT函数获取表的最大标识值,比较二 ...