css学习制作一个导航栏dome

最新推荐文章于 2023-02-04 17:21:55 发布

ai27275

最新推荐文章于 2023-02-04 17:21:55 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/luruihua/p/11228347.html

版权

功能

实现当鼠标悬浮时，样式为切换背景图片。
行内元素，没有宽高，转换为inline-block.
如图：

知识点

/* 因为a是行内元素，没有宽高，所以要转换为inline-block */
display: inline-block;
/* 去掉下划线 */
text-decoration: none;
/* 当行内元素的高度设置的和父元素一样高，就垂直居中了 */
line-height: 50px;

代码

<!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=edge">
    <title>Document</title>
</head>
<style>
    .nav {
        text-align: center
    }
    .nav a {
        width: 120px;
        height: 50px;
        /* 因为a是行内元素，没有宽高，所以要转换为inline-block */
        display: inline-block;
        background-image: url(img/bg.png);
        text-align: center;
        /* 去掉下划线 */
        text-decoration: none;
        /* 当行内元素的高度设置的和父元素一样高，就垂直居中了 */
        line-height: 50px;
        color:#fff;
    }
    .nav a:hover{
        background-image: url(img/bgc.png)
    }
</style>
<body>
    <div class="nav">
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
        <a href="#">网站导航</a>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/luruihua/p/11228347.html

ai27275

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习制作一个导航栏dome

功能实现当鼠标悬浮时，样式为切换背景图片。行内元素，没有宽高，转换为inline-block.如图：知识点/* 因为a是行内元素，没有宽高，所以要转换为inline-block */display: inline-block;/* 去掉下划线 */text-decoration: none;/* 当行内元素的高度设置的和父元素一样高，就垂直居中了 */line...
复制链接

扫一扫