CSS随笔
DIV 定义宽度后,增加float :left;属性,不会霸占一行,后面的元素不换行,
否则DIV会占一行
CSS
#flaotbtn{
width:35px;
height:35px;
position:absolute;
bottom:70px;
right:2px;
display:none;
background:url(../p_w_picpaths/up.png) no-repeat;
}
#flaotbtn a{
display: block;width:35px;height:35px;
}
#coverdiv{
width:100%;height:30px;position:absolute;bottom:40px;background:#80BEDB;display:none;
border-top-right-radius:2em;border-top-left-radius:2em;
}
#coverdiv ul li{
float: left;
width: 150px;
height: 30px;
text-align: center;
line-height: 30px;
border-bottom: none;
}
#coverdiv ul li a#commonSearch{
width: 150px;
display: block;
}
HTML
<!-- 遮罩层 -->
<div id="flaotbtn">
<a id="otherBtn" href="javascript:void(0);"></a>
</div>
<div id="coverdiv">
<ul>
<li>
<a id="commonSearch" href="javascript:void(0);">常用查询</a>
</li>
<li style="float: right;">
<a id="closeCover" href="javascript:void(0);">关闭</a>
</li>
</ul>
</div>
JS
//遮罩层
$("#flaotbtn").fadeIn(200);
$("#otherBtn").click(function(){
$("#coverdiv").fadeIn(500);
});
$("#closeCover").click(function(){
$("#coverdiv").fadeOut(500);
});
//常用查询
$("#commonSearch").click(function(){
Dialogs.load("index/commonSearch/view.htm",{},{
draggable : true,
resizable : false,
maximizable : false,
title : '常用查询',
lightbox : true,
width : 550,
height : 420
});
})
转载于:https://blog.51cto.com/kasimoyv5/1670791