html把图片做成导航条背景,DIV+CSS背景图片导航菜单的实现方法

导航菜单通常的做法是用ul li，但是ul

li纯文本方式的导航菜单实现的效果比较简单，我们可以使用背景图片来实现菜单的个性化设置。让我们开始吧：

先看效果图：

仅这一张图片，我们实现一个横行CSS菜单。并设置它们的悬停效果。我们该如何做呢？看下面的图片：

这是一个示意图。最底层是ul，这是一个容器，我们将列表项li全部置入其中。为了方便说明，示意图中仅画了一个li。实际此例中有六个li，全部向左浮动，实现横行排列。在li上面还有链接a标签。

id="mini_nav">

href="upload/2010/5/201005262050581365.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，重复方式为不重复，不给出背景图片的定位信息。

此时我们可以看到的页面效果如下：

html把图片做成导航条背景,DIV+CSS背景图片导航菜单的实现方法相关推荐

html怎么把图片做成一条花纹,CSS3 花纹背景图
CSS 语言: CSSSCSS 确定 html { height: 100%; background: -webkit-repeating-radial-gradient(circle, transp ...
淘宝分类导航条；纯css实现固定导航栏
效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端javascript:;" onClick="javascript:tagshow(event, '%BF%AA%B7%A2');" target=&qu ...
DIV+CSS布局图片加阴影效果方法
DIV+CSS布局图片加阴影效果方法转自:爱微网 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
html网页图片滚动代码用css和div,DIV+CSS网页图片滚动源代码
DIV+CSS网页图片滚动源代码 style="overflow:hidden;width:500px;"> border="0"> id=&quo ...
一个非常实用的 div+css 实现的导航条
<div id="nav"> <ul> <li><a href="http://www.52css.com/&quo ...
html5中平铺图片,HTML布局排版2 div的和图片平铺方便管理
在HTML里,由于浏览器显示器等差异,浏览器的宽度也会有变化,为了适应不同的宽度,需要用到平铺. 例如页面前面的固定的条等,如果是纯色,可以用背景色,如果不是纯色,是渐变等,可以用条状图平铺. 常见的 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

html把图片做成导航条背景,DIV+CSS背景图片导航菜单的实现方法

html把图片做成导航条背景,DIV+CSS背景图片导航菜单的实现方法相关推荐

最新文章

热门文章