版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/black_hole2009/article/details/52717327
1、z-index属性
设置对象的层叠顺序,integer值,值越大,则被层叠在越上面。MUI框架中就是利用此属性来实现抽屉菜单。
leftMenu = mui.preload({
url:'index-menu.html',
id:'index-menu',
styles:{
left:0,
width:'70%',
zindex:-1
},//窗口参数
show: {
aniShow:'none'
}
})
2、对象高度自适应(height:100%)
一个对象的高度是否可以使用百分比显示,取决于该对象的父级对象。浏览器在默认情况下,是没有给body一个高度属性的,因此我们直接设置body的子级对象height:100%时,不会产生任何效果。只有给body设置height:100%后,子级对象才能实现高度自适应。由于Firefox的html标签不是100%高度,为了兼容不同浏览器,应该给html、body2个标签都设置为height:100%。
html, body {
margin: 0px;
height: 100%;
}
3、background-image属性
background-repeat 设置对象是否平铺
background-attachment 设置背景图片是否随对象滚动而滚动
background-size 设置宽高,如果都为100%则表示自适应屏幕大小
<div class="mui-content" style="width: 100%; height: 100%; background-image: url(../img/背景.png); background-size: 100% 100%;"></div>
4、text-align
作用于块级元素的行内内容(inline content),对子级块级元素本身不产生作用,但对子级块级元素的行内内容起作用。
5、设置导航条背景透明
MUI框架中导航条默认添加阴影效果,设置背景透明还需去除阴影。
<span style="font-size:14px;">.nav-bar {
background-color: rgba(0,0,0,0);
box-shadow: none;
}</span>