css通用小笔记01——导航背景
很多刚接触前端的可能遇到一些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——导航背景的更多相关文章
- css通用小笔记03——浏览器窗口变小 div错位的问题
我最近写网页的时候,经常碰到一个普遍的问题,经过我的查阅和尝试,终于解决了这一问题,这里有两种方法提供给大家,如果博友还有更好的方法,欢迎补充. 一.使用min-width属性: 我们先看看下面这段代 ...
- css通用小笔记02——浮动、清除(三个例子)
css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: h ...
- HTML+CSS基础小笔记再整理
1. font的两个必须要写的:font-size 和 font-family text-indent 首行缩进(em)1em=一个文字大小 text-algin 对齐方式:left.center.r ...
- html+css常用小笔记(持续更新)
1 去掉input点击时的蓝色边框 outline:none; 2 禁止文本选中 -webkit-touch-callout: none; /* iOS Safari */ -webkit-user- ...
- Css技术入门笔记01
在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...
- CSS Secrets 翻译笔记 01: CSS coding tips
.firDemoButton{ padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0 ...
- AMQ学习笔记 - 01. 相关背景
概述 介绍中间件.MOM.JMS.ActiveMQ,及相互的关系. 中间件 由于业务的不同.技术的发展.硬件和软件的选择有所差别,导致了异构组件或应用并存的局面.要使这些异构的组件协同工作,一个有效的 ...
- 背包DP入门小笔记01背包
FJUT OJ 2347 http://59.77.139.92/Problem.jsp?pid=2347 采药 TimeLimit:1000MS MemoryLimit:128MB 64-bit ...
- 快速学习html、css的经典笔记
HTML语言剖析 Html简介-目录 全写: HyperText Mark-up Language 译名: 超文本标识语言 简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag ...
随机推荐
- PHP Log时时查看小工具
以前Log都是打印在一个文档中,然后打开文件夹,最后打开文档查看里面的内容,每次打开文件夹感觉很烦. 前些日子看到同事开发.NET的时候,用他自己的一个小工具能够时时查看到Log的内容,非常方便,所以 ...
- Android基于mAppWidget实现手绘地图(十二)–显示当前用户位置
若显示当前用户位置,你需要执行以下步骤: 1.添加ACCESS_COARSE_LOCATION 和ACCESS_FINE_LOCATION权限在AndroidManifest.xml中 2.用mapW ...
- HTML5第一讲
第一回合:什么是HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTM ...
- 简单登录实例Login
本人菜鸟~~学习过程中~~请求老大们指导!!谢谢!!! 从基础学习,坚持下去,每天进步一点点!! 1.首先要实现登录,通俗点总得有个登陆的样子吧,也就是人要有个脸面嘛!说做就做!自己属于菜鸟级别的,所 ...
- JDK和tomcat环境变量配置
JDK环境变量配置: 如果你的JDK安装在C盘里,如:C:\Program Files\Java\jdk1.6.0_05, 那么就在系统变量里(当然也可以在用户变量里)点新建: 变量名:JAVA_ ...
- 11款扁平化设计的 Twitter Bootstrap 主题和模板
扁平化设计和 Bootstrap 框架是2013年网页设计领域的两大设计潮流.把这两者集合起来不是件容易的事情,使用下面这些主题和模板将节省我们的开发时间,因为我们可以修改已有的基础代码,而不是从零开 ...
- Elasticsearch增删改查 之 —— Update更新
更新操作,一般用这个的,应该不会很多吧!ES本身还是一个倾向于查询检索的框架,对于这种更新的操作,太过频繁总归是不好的. 不过阅读本篇后,你可以使用Script对所有的文档执行更新操作,也可以使用do ...
- [Server] 搭建发布环境Web Deploy
在Web Deploy前,实际上完全可以使用FTP方式发布网站. 如果你购买的只是虚拟空间,那FTP方式更广泛. 先来搭建一套FTP吧 添加FTP服务 在网站上添加FTP发布 配置FTP服务 FTP注 ...
- Android Studio快捷键每日一练(6)
原文地址:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-6/ 51.重构代码 苹果:Ctrl+T Win ...
- C#开源
商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Phone-7-SDK E ...