这个页面怎么做自适应呀,就是各个分辨率都会是这个样子,不会乱
2条回答 默认 最新
关注
用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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 metadata提取的PDF元数据,如何转换为一个Excel
- ¥15 关于arduino编程toCharArray()函数的使用
- ¥100 vc++混合CEF采用CLR方式编译报错
- ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
- ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
- ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
- ¥50 如何openEuler 22.03上安装配置drbd
- ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
- ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
- ¥15 Windows11, backspace, enter, space键失灵