首先得了解什么是块级元素,行内元素和行内块元素

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素、行内元素与行内块元素示例</title>
    <style>
        .block-element {
            display: block;
            background-color: lightblue;
            margin: 10px;
            padding: 10px;
        }
        .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 10px;
        }
        .inline-block-element {
            display: inline-block;
            background-color: lightyellow;
            padding: 10px;
            margin: 5px;

        }
    </style>
</head>
<body>
    <h2>这是标题 (块级元素)</h2>
    <div class="block-element">这是一个块级元素的div</div>
    <span class="inline-element">这是一个行内元素的span</span>
    <a href="#" class="inline-element">这是一个行内元素的链接</a>
    <p>这是段落 (块级元素)</p>

    <h3>更多关于块级元素的例子:</h3>
    <ul class="block-element">
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    <table class="block-element">
        <tr>
            <td>表格单元格1</td>
            <td>表格单元格2</td>
        </tr>
    </table>

    <h3>行内块元素示例:</h3>
    <div class="inline-block-element">这是第一个行内块元素</div>
    <div class="inline-block-element">这是第二个行内块元素</div>
    <div class="inline-block-element">这是第三个行内块元素</div>

   
</body>
</html>
    </table>
</body>
</html>



案例:五彩导航

其中有4块内容,当鼠标悬停于按钮即可变色

企业微信截图_17285504223435.png

变色后的效果

image.png

编写思路

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五彩导航</title>
<style>
    .nav-item {
        width: 120px;
        height: 58px;
        display: inline-block;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 18px;
        / transition: background-color 0.3s;  /
    }
    .nav-item:hover {
        background-color: blue; / 鼠标悬停时的颜色 /
    }
</style>
</head>
<body>
<div class="nav-item" style="background-color:red;">五彩导航</div>
<div class="nav-item" style="background-color:green;">五彩导航</div>
<div class="nav-item" style="background-color:orange;">五彩导航</div>
<div class="nav-item" style="background-color:purple;">五彩导航</div>
</body>
</html>

image.png

可首先构建这样四块内容,然后为他们添加CSS样式层叠

image.png

附件:案例五彩导航的原图和源码已放入GItee自行下载    乱世千钧/CLASS - Gitee.com