仿bootstrap 纯css移动端菜单栏三横杠小图标

最新推荐文章于 2024-08-24 09:00:00 发布

李逸风

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量9.4k

点赞数

分类专栏： CSS 文章标签： bootstrap css 移动端适配

本文链接：https://blog.csdn.net/sheng_li/article/details/78362032

版权

本文介绍如何在不使用图片的情况下，利用HTML标签和CSS创建一个仿bootstrap风格的移动端菜单栏三横杠小图标。代码示例中详细展示了CSS样式和HTML结构，实现了一个响应式的按钮元素，包含三个水平线段作为图标。

摘要由CSDN通过智能技术生成

网页适配移动端的时候，menu菜单栏要隐藏到顶部右侧，这个时候就会有三根横岗的小图标。这里就是不用图片，直接用标签+css写的。

这是效果图：

这是完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .nav-mobile-button {
        position: relative;
        float: right;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        background: #eee; 
    }
    .nav-mobile-b