学习手机页面制作5
使用padding-bottom 实现高度自适应
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>height auto</title> 6 <!-- 加入meta viewport --> 7 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 8 <style> 9 *{ 10 padding:0; 11 margin:0; 12 } 13 #box{ 14 height:45px; 15 width:100%; 16 background: #f30; 17 display:-webkit-box; 18 position:relative; 19 } 20 #logo{ 21 width:100px; 22 background: #f00; 23 height:45px; 24 display:block; 25 26 27 28 } 29 #nav{ 30 -webkit-box-flex: 1; 31 -moz-box-flex: 1; 32 -ms-box-flex: 1; 33 box-flex: 1; 34 } 35 #btn{ 36 width:50px; 37 background: blue; 38 } 39 .list{ 40 width:100%; 41 42 } 43 .list ul{ 44 display:-webkit-box; 45 list-style-type: none; 46 } 47 .list li{ 48 -webkit-box-flex: 1; 49 -moz-box-flex: 1; 50 -ms-box-flex: 1; 51 box-flex: 1; 52 background: #eee; 53 width:30%; 54 margin-right:3%; 55 /*设置高度为0 padding-bottom:30% 参考的也是父亲的高度*/ 56 height:0; 57 /*width/height*区域的图片高度*/ 58 padding-top:30%; 59 } 60 </style> 61 </head> 62 <body> 63 <!-- h1里面写文字 用text-indent 利用seo --> 64 <div id="box"> 65 <dix id="logo">logo</dix> 66 <div id="nav"></div> 67 <div id="btn"></div> 68 </div> 69 <div class="list"> 70 <ul> 71 <li><img src="" alt=""></li> 72 <li></li> 73 <li></li> 74 </ul> 75 </div> 76 </body> 77 </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现