<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a { /* 宽高以背景图为准120 58 */ width: 120px; height: 58px; background-color: red; color: white; /* a是行内显示 设置宽高无效 */ /* 转换成行内块元素 */ display: inline-block; /* 文本水平居中 */ text-align: center; /* 文本垂直居中 */ line-height: 50px; /* 文字文本修饰 */ text-decoration: none; } .one { background: url("images/bg1.png"); } .two { background: url("images/bg2.png"); } .three { background: url("images/bg3.png"); } .four { background: url("images/bg4.png"); } .one:hover { background: url("images/bg5.png"); } .two:hover { background: url("images/bg6.png"); } .three:hover { background: url("images/bg7.png"); } .four:hover { background: url("images/bg8.png"); } </style> </head> <body> <a href="#" class="one">五彩导航1</a> <a href="#" class="two">五彩导航2</a> <a href="#" class="three">五彩导航3</a> <a href="#" class="four">五彩导航4</a> </body> </html>效果图：
CSS3-综合案例2-五色导航
转载请注明出处或者链接地址：https://www.qianduange.cn//article/2054.html
发布的文章
构建ssm项目，使用jquery ajax请求实现单表的增删改查
2024-03-01 12:03:00
01-10jQuery框架
2024-03-01 12:03:59
基于javaweb mysql的ssm maven超市进销存管理系统(java ssm jsp bootstrap jquery mysql)
2024-03-01 12:03:54
JS jQuery基础2
2024-03-01 12:03:54
jQuery实现文件上传
2024-03-01 12:03:53
基于jQuery框架的文具销售管理系统 计算机专业毕业设计源码70886
2024-03-01 12:03:33
JQuery简介与解析
2024-03-01 12:03:31
不错的jquery上传插件jQuery File Upload 正确使用方式 很全面
2024-03-01 12:03:27
jquery上传图片单图多图
2024-03-01 12:03:11
基于javaweb mysql的jsp servlet人事hr管理系统(java servlet jsp jquery easyui ztree mysql)
2024-01-24 15:01:56
大家推荐的文章