基础 CSS 厨房水槽顶栏

简介

基础 CSS 厨房水槽顶栏是指在网页顶部固定显示一个导航栏，类似于厨房里的水槽顶栏一样，方便用户快速访问网站的其他页面。

实现步骤

1. 新建一个 HTML 文件，定义一个 div 元素作为顶部导航栏容器，给其添加一个固定定位和一个 z-index 属性：

<div class="topnav">
    <!-- 导航栏内容 -->
</div>

<style>
    .topnav {
        position: fixed;
        z-index: 999;
        /* 更多样式... */
    }
</style>

2. 在 div 元素中添加导航链接，使用 标签定义链接和文本内容，使用 CSS 进行样式设置：

<div class="topnav">
    <a href="#home" class="active">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</div>

<style>
    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    .topnav a.active {
        background-color: #4CAF50;
        color: white;
    }
</style>

通过以上 CSS 样式设置，可以设置导航链接样式，包括文本颜色、背景颜色、鼠标悬停效果等。

3. 针对不同屏幕宽度进行响应式设置，在上述 CSS 样式基础上，使用 @media 查询媒体类型和特性，定义不同屏幕下的显示效果：

@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

总结

通过以上步骤，我们实现了基础 CSS 厨房水槽顶栏。可以根据不同网站需求进行修改和扩展。