「已注销」 2022-05-30 15:40 采纳率: 87.5%
浏览 15
已结题

这个页面怎么做自适应呀,就是各个分辨率都会是这个样子,不会乱

这个页面怎么做自适应呀,就是各个分辨率都会是这个样子,不会乱

img

img

img

  • 写回答

2条回答 默认 最新

  • 吕布辕门 后端领域新星创作者 2022-05-30 15:59
    关注

    用bootstrap,例如

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>个人站点</title>
            <!-- 新 Bootstrap5 核心 CSS 文件 -->
            <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    
            <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
            <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    
            <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
            <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
        </head>
        <body>
            <nav class="navbar navbar-expand-sm bg-success navbar-dark ">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Logo</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapsibleNavbar">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">
                        <ul class="navbar-nav  me-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">链接</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">链接</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">链接</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button"
                                    data-bs-toggle="dropdown">下拉菜单</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">链接</a></li>
                                    <li><a class="dropdown-item" href="#">另一个链接</a></li>
                                    <li><a class="dropdown-item" href="#">第三个链接</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <input class="form-control me-2" type="text" placeholder="Search">
                            <button class="btn btn-primary" type="button">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
            <br>
            <br>
            <div class="container-fluid mt-3">
                <h3>导航栏表单</h3>
                <p>您还可以在导航栏中包含表单。</p>
            </div>
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
                ...
            </nav>
        </body>
    </html>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 6月7日
  • 已采纳回答 5月30日
  • 创建了问题 5月30日

悬赏问题

  • ¥15 nslt的可用模型,或者其他可以进行推理的现有模型
  • ¥15 arduino上连sim900a实现连接mqtt服务器
  • ¥15 vncviewer7.0安装后如何正确注册License许可证,激活使用
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并2
  • ¥66 关于人体营养与饮食规划的线性规划模型
  • ¥15 基于深度学习的快递面单识别系统
  • ¥15 Multisim仿真设计地铁到站提醒电路
  • ¥15 怎么用一个500W电源给5台60W的电脑供电
  • ¥15 请推荐一个轻量级规则引擎,配合流程引擎使用,规则引擎负责判断出符合规则的流程引擎模板id
  • ¥15 Excel表只有年月怎么计算年龄