CSS备忘
垂直居中:
先height再ling-height,都设成一样高
span 垂直居中:vertical-align:50%
设置外边距:
margin-top,margin-left,margin-right,margin-bottom
div背景单张铺满设置:
width: 30px;
height: 30px;
line-height: 30px;
background-image: url(../image/lzhf/one.png);
background-repeat: no-repeat;
background-size: 100% auto;
div浮在div上:
<div style="position: relative;height: 30px;width: 100%">
<div style="height: 30px; overflow: hidden;position: absolute;z-index: 2;width: 100%;">
<img alt="主要职责" style="width: 100%; height: 30px;"
src="../../image/ljfy/zcjgtop.png">
</div>
<div style="position: absolute;z-index: 3;margin-left:10px;height: 30px;line-height: 30px;">
<img src="../../image/ljfy/zyzzc.png" width="30" height="30">
</div>
<div style="position: absolute;z-index: 3;margin-left: 38px;height: 30px;line-height: 30px;">
<font style="font-weight: bold">共有内设机构20个</font>
</div>
</div>
解决非固定宽度的浮动问题:
结束加上<div style="clear:both;height: 0px;"></div>
js改变背景颜色:
document.getElementById('mycolor').style.background=yc
显示不显示:
document.getElementById("ah2").style.display = "block";
$("#id").css('display','none');
$("#id")[0].style.display = 'none';
图片在div中居中显示(水平居中和垂直居中):
水平居中:div设置:text-align:center;
img设置:width:图片宽度; margin:0 auto;
垂直居中:div设置:position:relative;
img设置:position:absolute; top:50%; height:图片高度; margin-top:图片高度的一半;
让两个Div并排显示:
<div style="width:300px; height:auto; float:left; display:inline">AAAA</div>
<div style="width:300px; height:auto; float:left; display:inline">BBBB</div>
table中的td换行:
在table定义中,添加style="table-layout:fixed;"
在对需要换行的td中,添加style="word-break:break-all;"
预打印:
分页 <br style="page-break-after: always;" />
打印时不显示
<style>
@media print {
.noprint {
display: none
}
}
</style>
<tr align="center" class="noprint">
点击文字可以选中相应的checkbox :
<input id="check1" name="tag" type="checkbox" value="长发"/><label for="check1">长发</label>
图片居中:
img{ display:block; margin:0 auto;}
优先级:
.style1{
color: #5a5100 !important;
text-decoration: none;
}