如何制作带背景图片的导航

 时间:2024-10-19 17:32:42

1、在浏览网页的时候,我们经常会看到网页导航有个默认的效果,当你鼠标划过导航的时候,会有另外一个效果,当你点击选中某个栏目的时候,又会是另外一个效果,类似如下图:

如何制作带背景图片的导航

2、首先准备4张图片,分别代表默认样式,鼠标移动到菜单上的样式,和菜单被选中的样式,最后一张是为了下边的cssscript准备的

如何制作带背景图片的导航
如何制作带背景图片的导航
如何制作带背景图片的导航
如何制作带背景图片的导航

3、在编辑器中输入如下代码

如何制作带背景图片的导航

4、预览效果如下

如何制作带背景图片的导航

5、现在给a标签添加默认的背景图片

如何制作带背景图片的导航

6、预览后,发现现在背景全部是白色图片了

如何制作带背景图片的导航

7、给a:hover添加淡黄的背景图片

如何制作带背景图片的导航

8、预览效果,当鼠标滑动到菜单上的时候,会出现淡黄背景图片

如何制作带背景图片的导航

9、我们还少一个当菜单被选中时的效果,看如下代码

如何制作带背景图片的导航

10、预览效果如下:

如何制作带背景图片的导航

11、上边是分别引用了3张图片,而还有一种cssscript技术,即引用一张图片,通过定位来确定引用图片中的哪一部分,如下图的代码,被框选的分别标识距离这张图片顶部和左侧的距离

如何制作带背景图片的导航

12、他们的实现效果是一样的

  • 如何在HTML中插入图片
  • css如何把文字放在图片上
  • html颜色代码表(全)
  • html如何把两个网页连接起来
  • HTML中引入css和js的方法
  • 热门搜索
    与诗同行手抄报 数学手抄报内容三年级 五四青年节手抄报内容 少先队员手抄报图片 三爱手抄报图片 中国梦手抄报设计图 军训手抄报内容 关于科技的手抄报资料 小学生科技手抄报图片 关于三月三的手抄报