时间:2021-07-01 10:21:17 帮助过:28人阅读
要使用响应式布局首先需要在页面头部的元数据标签中设置"viewport",并在其中设置响应式布局所需要的一系列参数。"viewport"设置好后就可以在css中写入媒体查询来为不同屏幕大小的设备使用不同的布局方案。
#nav { position: fixed; bottom: 0; left: 0; width: 100%; height: 136px; background: #fff; } #nav a{ width: 25%; height: 135px; position: relative; } #nav a span{ display: block; margin: 15px 0 0 47px; } #nav a p{ margin-left: 55px; font-size: 26px; color:#000; position: absolute; bottom: 15px; }
<nav id="nav" class="test"> <a href="index.html" class="fl"> <span class="img icon-6"></span> <p>首页</p> </a> <a href="category.html" class="fl"> <span class="img icon-7"></span> <p>分类</p> </a> <a href="search.html" class="fl"> <span class="img icon-8"></span> <p>发现</p> </a> <a href="personal-information.html" class="fl"> <span class="img icon-9"></span> <p>我的</p> </a> </nav>
以上就是移动端项目开发总结的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!