一点简单的css知识及应用

最新推荐文章于 2024-07-29 15:16:06 发布

爷傲~奈我何

最新推荐文章于 2024-07-29 15:16:06 发布

阅读量68

点赞数

本文链接：https://blog.csdn.net/yeao_naiwohe/article/details/117516445

版权

涉及到的内容有

CSS常用选择器
字体属性
行高属性
宽度

完成《五彩导航》练习
要求：鼠标移入后，图片变化

代码如下：

<!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>
        /* 自定义样式 */
        /* 对元素设置display：inline-block ，元素不会脱离文本流， */
        .nav a {
            display: inline-block;
            width: 120px;
            height: 58px;
            background-color: #fff;
            text-align: center;
            line-height: 48px;
            color: #fff;
            text-decoration: none;
        }
        .bg1 {
            background: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg1.png)no-repeat;
        }
        /* 背景图（路径）  不平铺 */
        .bg1:hover{
            background-image: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg5.png);
        }
        /* 鼠标移动到超链接上的效果（这里是变色） */
        .bg2 {
            background: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg2.png)no-repeat;
        }
        .bg2:hover{
            background-image: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg6.png);
        }
        .bg3 {
            background: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg3.jpg)no-repeat;
        }
        .bg3:hover {
            background-image: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg1.png);
        }
        .bg4 {
            background: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg3.png)no-repeat;
        }
        .bg4:hover {
            background-image: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg5.png);
        }
        .bg5 {
            background: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg4.png)no-repeat;
        }
        .bg5:hover {
            background-image: url(C:/Users/Desktop/5.31-6.11/html/关卡4/bg6.png);
        }
    </style>

</head>
<body>
    <!-- div块-->
    <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>

效果图如下：

鼠标移入第一个导航前：