五彩导航案例

于 2024-04-07 10:56:19 发布
阅读量513 收藏 4
点赞数 4
CC 4.0 BY-SA版权
文章标签： 前端 javascript html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/h131425q/article/details/137456204
本文详细描述了如何使用HTML和CSS创建一个五彩导航栏，通过:hover伪类实现鼠标悬停时的背景图像切换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .nav a {

            display: inline-block;

            width: 120px;

            height: 58px;

            background-color: pink;

            line-height: 48px;

            text-decoration: none;

        }

        .nav .bg1 {

            background-image: url(images/bg1.png);

            background-repeat: no-repeat;

        }

        .nav .bg1:hover {

            background-image: url(images/bg11.png);

        }

        .nav .bg2 {

            background-image: url(images/bg2.png);

            background-repeat: no-repeat;

        }

        .nav .bg2:hover {

            background-image: url(images/bg22.png);

        }

        .nav .bg3 {

            background-image: url(images/bg3.jpg);

            background-repeat: no-repeat;

        }

        .nav .bg3:hover {

            background-image: url(images/bg3.png);

        }

        .nav .bg4 {

            background-image: url(images/bg4.png);

            background-repeat: no-repeat;

        }

        .nav .bg4:hover {

            background-image: url(images/bg1.png);

        }

        .nav .bg5 {

            background-image: url(images/bg5.png);

            background-repeat: no-repeat;

        }

        .nav .bg5:hover {

            background-image: url(images/bg3.jpg);

        }

    </style>

</head>

<body>

    <div class="nav">

        <a href="#" class="bg1">五彩导航</a>

        <a href="#" class="bg2">五彩导航</a>

        <a href="#" class="bg3">五彩导航</a>

        <a href="#" class="bg4">五彩导航</a>

        <a href="#" class="bg5">五彩导航</a>

    </div>

</body>

</html>

程序猫..
关注
CSS课堂案例4-五彩导航栏
一只小白657的博客
10-17 2270
五彩导航 练习价值： 链接属于行内元素，但此时需要宽度高度，因此需要模式转换 里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码 链接里面需要设置背景图片，因此需要用到背景的相关属性的设置 鼠标经过背景图片，因此需要用到链接伪类选择器 代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS课堂案例-五彩导航<
CSS 五彩导航
m0_50484391的博客
06-03 537
源代码： 下面展示一些 内联代码片。 <!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">
前端案例：五彩导航
weixin_51745630的博客
03-14 1934
效果图如下所示：上图中元素块为链接，当鼠标放置在元素上方时则变色注意点：（1）链接属于行内元素，但需要高度宽度，因此需要使用到模式转换，将行内元素转化为行内块元素（2）链接中的文字需要剧中（3）需要设置背景图片（4）鼠标经过时背景图片样式改变，使用到链接伪类选择器。
CSS2（五彩导航）（背景相关）
qq_40501188的博客
10-28 1398
CSS背景 背景颜色 backround-color：颜色值； 背景图片 background-image： 描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景） 背景平铺 默认的情况下，背景是平铺的 背景图片不平铺： background-repeat：no-repeat； 图像按照x/y轴平铺 background-repeat：repeat-x/y； 页面元素既可以添加背景颜色也可以添加背景图片，只不过
五彩导航栏
Lily3619的博客
08-26 390
<!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>Do
案例：五彩导航
酷爱前端的小陈博客
04-26 686
案例效果： 这里例举两个，其他同理 案例分析: 1.链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换. 2.里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码. 3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置. 4.鼠标经过变化背景图片,因此需要用到链接伪类选择器. 代码示例： <!DOCTYPE html> <html lang="en"> <head> <met...
2022年5月21日Pink老师五彩导航
我是搬码蚁的博客
05-21 509
来源：B站pink老师P127：五彩导航栏 目的：学习记录 练习价值 1）链接属于行内元素，但此时需要宽度高度又不独占一行，涉及模式转换为行内块元素 display: inline-block; 2）其中文字需要水平居中和垂直居中显示，涉及单行文字垂直居中 文字行高等于盒子高度 3）链接需要设置背景图片 4）鼠标经过变化背景图片，设计链接伪类选择器 最终效果 HTML代码展示 <!DOCTYPE html> <html lang="en"> <head> &l
题目8 案例：五彩导航 11
最新发布
11-21
在探讨“五彩导航”的过程中，我们通常是指具有丰富色彩和创意设计的网页导航栏。在CSS（层叠样式表）的语境下，五彩导航的实现往往涉及到对HTML元素的样式设计、颜色搭配以及视觉效果的增强。CSS为网页设计师提供了...
五彩导航代码+图片，已经完好放在文件夹了
04-11
五彩导航代码+图片，已经完好放在文件夹了
CSS3-综合案例2-五色导航
热门推荐
weixin_54021642的博客
06-20 2万+
导航综合案例2
js 特效 html 特效 彩色导航条
06-13
js 特效 html 特效 彩色导航条 js 特效 html 特效 彩色导航条
背景图片和五彩导航栏
qq_42964711的博客
05-02 1706
背景图片url适合logo 方位：left top center right bottom 前后顺序无影响 <style> div { width: 1000px; height:1000px; background-color: orange; ...
css案例-五彩导航连
syyy9090的博客
03-25 1164
五彩导航栏： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五彩导航栏</title> <style> .nav a { display: inline-block; text-decoratio...
前端 五彩导航，鼠标经过即可变色
qq_55061257的博客
07-22 2031
<!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>综.
CSS实践案例 （1）—— 五彩导航栏
weixin_68431923的博客
08-20 751
尝试使用CSS来制作一个五彩的导航栏
五彩导航栏练习---CSS
花&败
02-05 752
素材： 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed..
五彩导航栏练习
剑来的博客
03-20 735
前端练习
2.五彩导航例子
neilro的博客
01-13 8643
素材： 效果图： 代码： 五彩导航 .nav .one:link{ /*将行内元素转为行内块元素*/ display: inline-block; /*设置大小*/ width:120px; height:58px; /*插入图片*/ background:url("imag
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值