html怎么把图片当作导航栏,css利用一张背景图制作导航菜单实现思路及代码
今天介绍的这款简单非常简单,利用一张背景图片来实现菜单的悬停状态。我们看下面的图片:
仅这一张图片,我们实现一个横行CSS菜单。并设置它们的悬停效果。我们该如何做呢?看下面的图片:
这是一个示意图。最底层是ul,这是一个容器,我们将列表项li全部置入其中。为了方便说明,示意图中仅画了一个li。实际此例中有六个li,全部向左浮动,实现横行排列。在li上面还有链接a标签。
我们首先整理XHTML代码:
Example Source Code
复制代码代码如下:
- 财经
- 商业
- 管理
- 领袖
- 协会
- 博客
我们着手写CSS前,先结合上面的示意图整理一下思路:
1、首先需要让ul居中,然后让nav成为ul的背景图片。这样就可以简化编码,不必给每一个li或a再定义不同的背景图片及其定位。
2、定义列表项li的宽度与高度,并向左浮动。实现列表项的横向排列,组成一个横向的菜单格局。
3、定义列表项内部的链接a元素为块元素。并给a:hover一个背景图片,但不给他任何定位信息。
4、根据nav1~nav6分别定义a:hover状态下,背景图片的定位。
5、利用padding移除链接a元素的文字。使得在CSS有效时文字不可见,若出现CSS加载失败或其它设备浏览时,链接同样有效。
我们开始着手CSS编写:
Example Source Code
复制代码代码如下:
* {margin:0; padding:0; font-size:12; list-style-type:none; }
#mini_nav {width:390px; height:38px; margin:50px auto; background:url(nav.png) no-repeat 0 0;}
#mini_nav li {width:65px; height:38px; float:left;}
#mini_nav li a {display:block; width:65px; height:38px;}
#mini_nav li a:hover {background:url(nav.png) no-repeat;}
设置总体布局声明,外边距与内边距均为零,文字大小为12px,列表项预调标记为无(去掉列表项前面的小黑点)。
设置ID为mini_nav的UL宽度与高度,上下边距为50px,左右边距为auto,实现水平居中对齐。设计背景图片为nav.png,定位于:0 0。
设置UL中的LI的样式,宽度与高度,向左浮动。
设置LI中链接A元素的样式,首先将A元素转换为块元素,并设置其宽与高。
设置链接A元素的县停样式,定义背景图片nav.png,重复方式为不重复,不给出背景图片的定位信息。
此时我们可以看到的页面效果如下:
但这时候还不能实现任何悬停交互效果,而且链接文字而位于我们的神觉范围内。我们继续编写CSS代码:
Example Source Code
复制代码代码如下:
#mini_nav li.nav1 a:hover {background-position:0 -38px;}
#mini_nav li.nav2 a:hover {background-position:-65px -38px;}
#mini_nav li.nav3 a:hover {background-position:-130px -38px;}
#mini_nav li.nav4 a:hover {background-position:-195px -38px;}
#mini_nav li.nav5 a:hover {background-position:-260px -38px;}
#mini_nav li.nav6 a:hover {background-position:-325px -38px;}
这一段很相类,我们给不同的链接(即nav1~nav6)设置了鼠标悬停时的定位坐标。
我们给前面的LI中链接A元素增加以下代码:
Example Source Code [www.52css.com]
复制代码代码如下:
padding-top:40px; overflow:hidden;
上部的内边距为40px。溢出为隐藏。我们将链接文字增加上部的内边距,从而推到了下面,不可见的地方,为了使这样的方法成功,我们必须设置溢出为隐藏。
html怎么把图片当作导航栏,css利用一张背景图制作导航菜单实现思路及代码相关推荐
- 怎么设置整体背景为灰色html,设置网站图片为灰色以及css添加多张背景图实现...
Document //添加多张背景图片 .bg{ background: url("栈出.png"), url("u=264976548,648399195&fm ...
- uniapp导航栏自定义图标按钮/搜索|uni-app自定导航条
uni-app自定义导航栏|仿微信顶部导航uni_headerBar,支持标题居左.居中.搜索条,按钮可传入文字/字体图标/图片 uniApp原生导航栏 uni-app原生导航栏也能实现一些顶部自定义 ...
- layui导航栏页面滚动固定_网站建设页面导航如何降低用户寻找的时间
做为正确引导客户体验网站的莱单导航栏,从检索视角上而言,也起着关键的功效,莱单导航栏不但联系网站的外界,也联系着网站主页面及其别的网页,是全部网站的"管理中心",因此网站建设中莱单 ...
- IOS 滑动tableview,导航栏渐渐显示,搜索框显示在导航栏上
先看下效果图 这样的效果图我们在很多app上也看到过,正好我们的项目中有需要,就来实现下. 该效果有两种解决方案: 一.自定义导航栏,在scrollViewDidScroll方法中,改变导航栏的颜色和 ...
- html导航栏点击不能跳转,无法单击导航栏中的链接CSS HTML
不确定是否允许您链接您的网站,但是如果允许. 因此,我可以将所有链接悬停在导航栏中,但我无法点击它们,并且S的图片是可移动的,但无法点击,我做错了什么?无法单击导航栏中的链接CSS HTML Nick ...
- android底部导航栏网络请求有冲突,Android 自定义底部导航栏 CustomizeTabLayout(支持访问网络图片、本地图片)...
先看效果 网络图片(使用第三方库Glide加载图片) GIF1.gif 本地图片 GIF2.gif 使用方法 xml(布局可关联鸿洋大神的AutoLinearLayout可完美适配) activity ...
- 页面顶部导航栏css样式布局
项目场景: css样式布局 例如:项目场景:页面顶部导航栏,左侧logo.右侧退出登录固定在页面,不随滚动条滚动:中间有菜单,添加滚动条. 问题描述 顶部导航栏出现滚动条,滚动条位置在页面底部 解决方 ...
- JAVA竖向导航栏,css实现横向导航和竖向导航栏的方法(代码)
本篇文章给大家带来的内容是关于css实现横向导航和竖向导航栏的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.竖向导航 ul{ list-style-type:non ...
- 学完css,做了一个csdn导航栏(一步一步做csdn导航栏,内容满满)
学完css,做了一个csdn导航栏,内容满满 步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示 知识点 完整代码 番外:本来打算做 ...
最新文章
- 大厂 CEO 一年薪酬拿多少?
- python tk下拉列表的state_Python tkinter之ComboBox(下拉框)的使用简介
- autowired 与 resources 注解的区别
- Vue访问百度音乐API实现播放时no-referrer-when-downgrade
- 问题生成的多样性会在多大程度上帮助下游QA任务?
- 三、自然语言处理研究内容
- Eclipse快捷键(自用)
- android token机制_你真的了解16.6ms刷新机制吗?
- docker-compose 使用小例
- Ubuntu下 Tomcat + JSF + Ant + eclipse 开发环境搭建
- 计算机网络入门知乎,网络工程师论文发表范文简述计算机网络基础教学
- matplotlib之2010-2017年各季度国民生产总值散点图
- script加密解密工具下载
- 华为HCNA路由与交换eNSP实战(1)静态路由基础
- CDH/HDP迁移之路
- 《数据结构》第四章串,数组和广义表
- 高斯衰减python实现
- unwallet白皮书解读
- 离散数学 (II) 习题 1
- php 126怎么设置发送邮箱验证码,PHP之邮件发送(126信箱和PHPMailer开源)