CSS综合案例导航和五彩导航

最新推荐文章于 2023-04-08 18:54:17 发布

浮光跃金.free

最新推荐文章于 2023-04-08 18:54:17 发布

阅读量175

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_52040402/article/details/128460027

版权

<!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>导航</title>
</head>
<style>
    /* a显示模式是行内,加宽高默认不生效,转显示模式:行内块 */
    a{
        text-decoration: none;
        width: 200px;
        height: 100px;
        background-color: aqua;
        display: inline-block;
        color: #fff;
        text-align: center;
        line-height: 100px;
    } 
    a:hover {
        background-color: orange;
    }
    /* 鼠标悬停 */
</style>
<body>
    <!-- a*5 -->
    <!-- alt+shift,同时选中 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

<!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>五彩导航</title>
</head>
<style>
    a{
        text-decoration: none;
        width: 120px;
        height: 58px;
        background-color: aquamarine;
        display: inline-block;
        text-align: center;
        line-height: 58px;
        /* 如果加了背景图片文字不上下居中,适当修改line-height */
        color: aliceblue;
    }
    /* 每个a背景图不同,单独找每个a.设置不同的背景图 */
    .one {
        background-image: url(./images/1.jpg);
    }
    .two {
        background-image: url(./images/2.jpg);
    }
    .three {
        background-image: url(./images/3.jpg);
    }
    .four {
        background-image: url(./images/5.jpg);
    }
    .one:hover {
        background-image: url(./images/5.jpg);
    }
    .two:hover {
        background-image: url(./images/3.jpg);
    }
    .three:hover {
        background-image: url(./images/5.jpg);
    }
    .four:hover {
        background-image: url(./images/1.jpg);
    }
</style>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
 
</body>
</html>