1.需求
使用vue-cli和vue-router完成app h5界面的设计,元素包含导航和分类内容展示。
<template>
<div id="app" class="page">
<div class="context">
<router-view/>
</div>
<div class="flooter">
<div class="flooter-title">
<router-link to="/home"><span class="word">首页</span></router-link>
</div>
<div class="flooter-title">
<router-link to="/course"><span class="word">学习</span></router-link>
</div>
<div class="flooter-title">
<router-link to="/forum"><span class="word">考试</span></router-link>
</div>
<div class="flooter-title">
<router-link to="/aboutMe"><span class="word-mine">我的
<div class="notice"></div></span></router-link>
</div>
</div>
</div>
</template>
2.问题
底部导航使用绝对定位,盒子下部依然存在<page>文档流,当context拉长滞后,向下滑动滚动条出现在了底部导航上。
3.思路
使用定位布局会覆盖在文档流之上,而不是像float一样会使其他元素浮动在周围,所以当context元素拉长,独步滚动条存在,不会被覆盖(注:加了z-index也不会覆盖滚动条),所以采用css表格显示,底部导航存在于一行,<router-view/>显示在一行。
<div class="table">
<div class="tableRow">
<router-view/>
</div>
<div class="tableRow">
<div class="flooter-title">
<router-link to="/home"><span class="word">首页</span></router-link>
</div>
<div class="flooter-title">
<router-link to="/course"><span class="word">学习</span></router-link>
</div>
<div class="flooter-title">
<router-link to="/forum"><span class="word">考试</span></router-link>
</div>
<div class="flooter-title">
<router-link to="/aboutMe"><span class="word-mine">我的
<div class="notice"></div></span></router-link>
</div>
</div>
</div>
.table {
display: table;
}
.tableRow {
display: table-row;
}
4.总结
html5种常用布局
a.固体布局:简单粗暴写死宽高
b.流体布局:float + 固定宽度
c.凝胶布局:margin:auto
d.定位显示:position
e.表格显示:display:table
6.推荐
《Head First HTML and CSS》
网友评论